一塊兒抽聖誕的驚喜盒子吧！（小程序起手式）

Christmas is coming!

平安夜/聖誕節老是讓人聯想到平安果、聖誕襪、聖誕樹、聖誕老人、聖誕櫥窗等等讓人歡喜滿滿、指望滿滿的詞語。
禮物、祝福、笑臉、驚喜、溫暖都伴隨而來，最近課程輕鬆，便想着作一個有關聖誕的小程序，來看成對小程序的初步學習。

項目展現：

驚喜盒子

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

聖誕許願

開發工具：

• 微信開發者工具
• 小程序開發文檔
• 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"
    }]
  }

不經過tabBar，如何跳轉到另外一個頁面

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

<button bindtap="gotoList" type="primary">個人驚喜盒子~</button>

點擊跳轉事件的實現：

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

背景圖片顯示不了

在pc端調試的時候已經能夠看到出現背景圖片了，可是在真機調試的時候卻發現沒有背景圖片,這是小程序的一個bug

你能夠在使用背景圖片的時候用網絡圖片，就是用外鏈的形式，好比你將這張圖片放到你的服務器，如：https://xxxx/xxx.jpg
若是你沒有服務器的話，推薦七牛雲的對象存儲，你能夠把你要用到的圖片傳上去，它會爲每張圖片生成外鏈噠

兩個頁面之間如何傳遞數據？

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

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

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，如何更改樣式？

微信小程序沒法操做dom，這意味着以前js中的各類習慣方法必須換一種思路實現；
咱們能夠經過操做數據，用{{}}變量綁定，來更改樣式。

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

<view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">抽獎</view>

在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;
}

把你寫的願望/賀卡發給你的好友

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

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

結語

恰逢聖誕節前夕，便想寫個相關的小程序練練手，首先是構思節日需求，而後想到了許願/賀卡/抽禮物這些小點子，而後就是思考怎麼實現這些功能，以及頁面的合理美觀，固然整體來講比較簡單啦，只是個起手式，至關於初步認識小程序啦

最後祝你們聖誕快樂~

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