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

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

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

微信開發(fā)者工具

小程序開發(fā)文檔

iconfont矢量圖標(biāo)庫：找到合適的tabBar圖標(biāo)

每個頁面都要在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"
    }]
  }

很簡單，在頁面中設(shè)一個按鈕，綁定點(diǎn)擊事件

我的驚喜盒子~

點(diǎn)擊跳轉(zhuǎn)事件的實(shí)現(xiàn)：

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

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

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

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

驚喜盒子頁面
js文件中的點(diǎn)擊抽獎事件函數(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中的各種習(xí)慣方法必須換一種思路實(shí)現(xiàn)；
我們可以通過操作數(shù)據(jù)，用{{}}變量綁定，來更改樣式。

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

抽獎

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

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

在點(diǎn)擊后，賦值為新的class名稱（這里設(shè)的是disabled）

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

在wxss文件中新增disabled的樣式

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

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

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

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

最后祝大家圣誕快樂~

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