Let's draw the Christmas surprise box together! (Hand-on for small programs)

Christmas is coming!

Christmas Eve / Christmas is always reminiscent of Heian Guo, Christmas stockings, Christmas trees, Santa Claus, Christmas windows, etc., which are full of joy and expectation.
Gifts, blessings, smiling faces, surprises, and warmth are all accompanied. Recently, the course is easy, so I wanted to make a small program about Christmas as a preliminary study of the small program.

Project display:

Surprise box

The gif image is a bit sluggish (upload images cannot exceed 4M), In fact, it turns fast, you can watch the recorded video

Christmas wish

development tools:

• WeChat Developer Tools
• Applet development documentation
• iconfont vector icon library: find the appropriate tabBar icon

Page registration:

Every page must be registered in app.json

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

Bottom navigation:

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

How to jump to another page without going through tabBar

Very simple, set a button on the page to bind the click event

<button bindtap="gotoList" type="primary">我的惊喜盒子~</button>

Click to achieve the jump event:

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

The background picture cannot be displayed

When debugging on the PC side, you can already see the background image, but when debugging on the real machine, it is found that there is no background image. This is a bug in the small program.

You can use the network picture, outside the chain is in the form of, for example, you will put this picture on your server when using a background image, such as: HTTPS: //xxxx/xxx.jpg
If you do not have a server, then recommend seven Niu Yun 's object storage, you can upload the pictures you want to use, it will generate an external link for each picture

How to transfer data between two pages?

Consider how the content of the surprise box obtained after the big
carousel is passed to my prize page with wx.setStorage (OBJECT) and wx.getStorage (OBJECT)

Add this code to the click lottery event function in the js file of the surprise box page :

    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
    })

Add this code to the onload in the js file of my prize page :

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

Can't operate dom, how to change the style?

The WeChat applet cannot operate dom, which means that the various custom methods in the previous js must be implemented
by another way of thinking; we can change the style by manipulating data and binding with {{}} variables .

For example, the "Draw" view in the middle of the big carousel. After clicking, the carousel rotates, the button turns gray, and the button is turned back to its original state. Then bind a variable to the class of this view:

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

Add a variable btnDisabled to the data of the js file, and set the value to empty:

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

After clicking, assign a new class name (disabled here)

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

Added disabled style in wxss file

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

Send your wishes / greeting cards to your friends

Forward sharing
Define the onShareAppMessage function in Page to set the forwarding information of the page. The path is happy page, store the content of the card you saved.

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

Conclusion

Just on the eve of Christmas, I want to write a related small program to practice my hands, first of all, I want to conceive the needs of the holiday, then I think of the small ideas of wishing / greeting / drawing gifts, and then thinking about how to achieve these functions, and the reasonable and beautiful page Of course, overall it is relatively simple, just a hands-on style, which is equivalent to a preliminary understanding of small programs.

Finally, I wish you all a Merry Christmas ~

Project source address: https: //github.com/hellocassi ...
My email: [email protected]
Welcome to exchange!