小程序模板網(wǎng)

微信小程序筆記《三》:彩蛋“誰(shuí)更帥”;圖片投票含后端

發(fā)布時(shí)間:2017-12-08 17:13 所屬欄目:小程序開發(fā)教程

構(gòu)思畢竟是個(gè)彩蛋,整個(gè)構(gòu)思來(lái)自一個(gè)“玩笑”。這個(gè)玩笑就是“比誰(shuí)更帥”的一個(gè)投票App,緣由看下方圖片。緣由那么一個(gè)簡(jiǎn)單的雙人投票應(yīng)用需要考慮哪些方面。UI界面整個(gè)界面需要非常簡(jiǎn)潔。由于手機(jī)屏幕是縱向,希望 ...

 
 
 

構(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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18085.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢