摘要：平安夜圣誕節(jié)總是讓人聯(lián)想到平安果圣誕襪圣誕樹圣誕老人圣誕櫥窗等等讓人歡喜滿滿期望滿滿的詞語。禮物祝福笑臉驚喜溫暖都伴隨而來，最近課程輕松，便想著做一個有關圣誕的小程序，來當作對小程序的初步學習。

平安夜/圣誕節(jié)總是讓人聯(lián)想到平安果、圣誕襪、圣誕樹、圣誕老人、圣誕櫥窗等等讓人歡喜滿滿、期望滿滿的詞語。
禮物、祝福、笑臉、驚喜、溫暖都伴隨而來，最近課程輕松，便想著做一個有關圣誕的小程序，來當作對小程序的初步學習。

gif圖有點遲鈍（上傳圖片不能超過4M），其實轉起來很快的，可觀看錄制視頻

微信開發(fā)者工具

小程序開發(fā)文檔

iconfont矢量圖標庫：找到合適的tabBar圖標

每個頁面都要在app.json里注冊

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/wish/wish",
    "pages/surprise/surprise",
    "pages/list/list",
    "pages/happy/happy"
  ],

"tabBar": {
    "color": "#666",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#eee",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/wish/wish",
      "text": "圣誕許愿",
      "iconPath": "images/wish.png",
      "selectedIconPath": "images/wish_active.png"  
    }, {
      "pagePath": "pages/surprise/surprise",
      "text": "驚喜盒子",
      "iconPath": "images/surprise.png",
      "selectedIconPath": "images/surprise_active.png"
    }]
  }

很簡單，在頁面中設一個按鈕，綁定點擊事件

我的驚喜盒子~

點擊跳轉事件的實現(xiàn)：

  gotoList: function() {
    wx.navigateTo({
      url: "../list/list"
    })
  }

在pc端調試的時候已經可以看到出現(xiàn)背景圖片了，但是在真機調試的時候卻發(fā)現(xiàn)沒有背景圖片,這是小程序的一個bug

你可以在使用背景圖片的時候用網(wǎng)絡圖片，就是用外鏈的形式，比如你將這張圖片放到你的服務器，如：https://xxxx/xxx.jpg
如果你沒有服務器的話，推薦七牛云的對象存儲，你可以把你要用到的圖片傳上去，它會為每張圖片生成外鏈噠

考慮???大轉盤后獲得的驚喜盒子的內容如何傳遞到我的獎品頁面
用wx.setStorage(OBJECT)和wx.getStorage(OBJECT)

驚喜盒子頁面
js文件中的點擊抽獎事件函數(shù)中添加這一段代碼：

    var that = this
    // 獲取獎品配置
    var awardsConfig = app.awardsConfig
    if (awardIndex < 2) 
    awardsConfig.chance = false
    // console.log(awardsConfig.awards[awardIndex].name)
    that.data.List.push(awardsConfig.awards[awardIndex].name)
    wx.setStorage({
      key:"list",
      data: that.data.List
    })

我的獎品頁面
js文件中的onload中添加這一段代碼：

 var that = this
    wx.getStorage({
      key: "list",
      success: function (res) {
        console.log(res.data);
        that.setData({
          awardsList: res.data,
         })
      }
    })

微信小程序無法操作dom，這意味著之前js中的各種習慣方法必須換一種思路實現(xiàn)；
我們可以通過操作數(shù)據(jù)，用{{}}變量綁定，來更改樣式。

例如大轉盤中間的“抽獎”這個view，點擊后轉盤轉動，按鈕變灰，轉動完畢，按鈕變回原樣，那么給這個view的class綁定一個變量：

抽獎

在js文件的data中新增一個變量btnDisabled，賦值為空：

data: {
    image: "http://ozlrrk52c.bkt.clouddn.com/wx/top_bg.png",
    animationData: {},
    awardsList: {},
    List: [],
    btnDisabled: "" 
  },

在點擊后，賦值為新的class名稱（這里設的是disabled）

this.setData({
      animationData: animationInit.export(),
      btnDisabled: "disabled"
    })

在wxss文件中新增disabled的樣式

.canvas-btn.disabled{
    pointer-events: none;
    background: #B07A7B;
    color: #ccc;
}

轉發(fā)分享
在 Page 中定義 onShareAppMessage 函數(shù)，設置該頁面的轉發(fā)信息。路徑為happy頁面，存儲你保存的卡片內容。

 onShareAppMessage: function (e) {
    return {
        title: "圣誕快樂~",
        desc: "",
        imageUrl: "http://ozlrrk52c.bkt.clouddn.com/wx/1.jpg",
        path: "/pages/happy/happy"
    }
  }

恰逢圣誕節(jié)前夕，便想寫個相關的小程序練練手，首先是構思節(jié)日需求，然后想到了許愿/賀卡/抽禮物這些小點子，然后就是思考怎么實現(xiàn)這些功能，以及頁面的合理美觀，當然總體來說比較簡單啦，只是個起手式，相當于初步認識小程序啦

最后祝大家圣誕快樂~

項目源址：https://github.com/hellocassi...
我的郵箱：justincassiell@gmail.com
歡迎交流！