構(gòu)思

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

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

UI界面

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

編碼

前端采用flex的布局。考慮到每個(gè)微信用戶只能投一票。在初始化的過(guò)程中，小程序需要進(jìn)行登陸wx.login，拿到對(duì)應(yīng)的code。再通過(guò)騰訊的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是每個(gè)用戶唯一值，接下來(lái)就是業(yè)務(wù)邏輯的問(wèn)題。參考后端的表結(jié)構(gòu)。

小結(jié)

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

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

前端下載：weapp-handsome-master.zip

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

后端下載：weapp-handsome-backend-master.zip