一起抽圣诞的惊喜盒子吧！（小程序起手式）

摘要：平安夜圣诞节总是让人联想到平安果圣诞袜圣诞树圣诞老人圣诞橱窗等等让人欢喜满满期望满满的词语。礼物祝福笑脸惊喜温暖都伴随而来，最近课程轻松，便想着做一个有关圣诞的小程序，来当作对小程序的初步学习。

平安夜/圣诞节总是让人联想到平安果、圣诞袜、圣诞树、圣诞老人、圣诞橱窗等等让人欢喜满满、期望满满的词语。
礼物、祝福、笑脸、惊喜、温暖都伴随而来，最近课程轻松，便想着做一个有关圣诞的小程序，来当作对小程序的初步学习。

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"
    }]
  }

很简单，在页面中设一个按钮，绑定点击事件

我的惊喜盒子~

点击跳转事件的实现：

  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，这意味着之前js中的各种习惯方法必须换一种思路实现；
我们可以通过操作数据，用{{}}变量绑定，来更改样式。

例如大转盘中间的“抽奖”这个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;
}

转发分享
在 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
欢迎交流！