微信小程序筆記三：彩蛋“誰更帥”
前端源碼github地址在此奸笤，記得點星：
https://github.com/brandonxiang/weapp-handsome
后端源碼github地址在此惋啃，記得點星：
hhttps://github.com/brandonxiang/weapp-handsome-backend
構(gòu)思
畢竟是個彩蛋，整個構(gòu)思來自一個“玩笑”监右。這個玩笑就是“比誰更帥”的一個投票App边灭，緣由看下方圖片。
緣由
那么一個簡單的雙人投票應(yīng)用需要考慮哪些方面健盒。
UI界面
整個界面需要非常簡潔绒瘦。由于手機屏幕是縱向，希望頭像是上下布局味榛。用戶可以非常清晰的看到候選者的顏值椭坚。與此同時，操作也非常簡單搏色。直接點擊認(rèn)為比較帥的頭像善茎，完成投票，顯示結(jié)果频轿。結(jié)果的顯示也很簡潔垂涯，右上角出現(xiàn)小紅點，直接顯示數(shù)據(jù)結(jié)果航邢。
界面
編碼
前端采用flex的布局耕赘。考慮到每個微信用戶只能投一票膳殷。在初始化的過程中操骡，小程序需要進行登陸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ā)
