微信小程序筆記三：彩蛋“誰更帥”

前端源碼github地址在此，記得點星：
https://github.com/brandonxiang/weapp-handsome

后端源碼github地址在此，記得點星：
hhttps://github.com/brandonxiang/weapp-handsome-backend

構(gòu)思

畢竟是個彩蛋，整個構(gòu)思來自一個“玩笑”。這個玩笑就是“比誰更帥”的一個投票App，緣由看下方圖片。

緣由

那么一個簡單的雙人投票應(yīng)用需要考慮哪些方面。

UI界面

整個界面需要非常簡潔。由于手機(jī)屏幕是縱向，希望頭像是上下布局。用戶可以非常清晰的看到候選者的顏值。與此同時，操作也非常簡單。直接點擊認(rèn)為比較帥的頭像，完成投票，顯示結(jié)果。結(jié)果的顯示也很簡潔，右上角出現(xiàn)小紅點，直接顯示數(shù)據(jù)結(jié)果。

界面

編碼

前端采用flex的布局?？紤]到每個微信用戶只能投一票。在初始化的過程中，小程序需要進(jìn)行登陸wx.login，拿到對應(yīng)的code。再通過騰訊的rest服務(wù)https://api.weixin.qq.com/sns/jscode2session獲取唯一的openid。

wx.login({
      success: function (res) {
        console.log(res)
        if (res.code) {
          getSession({
            data: {
              appid: "你的appid",
              secret: "你的appsecret",
              js_code: res.code,
              grant_type: "authorization_code"
            },
            success: function (res) {
              console.log(res)
              that.setData({ username: res.data.openid })
              that.validation()
            },
            fail: errorMessage
          })
        } else {
          errorMessage(res)
        }
      },
      fail: errorMessage
    })

由于openid是每個用戶唯一值，接下來就是業(yè)務(wù)邏輯的問題。參考后端的表結(jié)構(gòu)。

小結(jié)

考慮到大家的身心健康，該小程序最終還是不上線。

轉(zhuǎn)載，請表明出處。總目錄跨平臺快速開發(fā)