注冊(cè)

微信小程序開發(fā)之OFO共享單車,微信小程序錢包與充值頁(yè)面制作

2017-12-20
導(dǎo)讀：上一節(jié)我們完成了登錄頁(yè)面的實(shí)現(xiàn)，這一節(jié)讓我們完成登錄后的錢包頁(yè)面和充值頁(yè)面 Screenshot_2017-05-07-10-16-12-744_com.tencent.mm.png (101.39 KB, 下載次數(shù): 5) 下載附件 保存到相冊(cè) 2017-6-5 14:40 上...
上一節(jié)我們完成了登錄頁(yè)面的實(shí)現(xiàn)，這一節(jié)讓我們完成登錄后的錢包頁(yè)面和充值頁(yè)面


頁(yè)面分析
  • 需要獲取錢包余額數(shù)據(jù)并顯示在頁(yè)面上，充值后數(shù)據(jù)會(huì)自動(dòng)更新
  • 其他可點(diǎn)擊按鈕分別顯示對(duì)應(yīng)的模態(tài)框，因?yàn)槲⑿胖辉试S五個(gè)頁(yè)面層級(jí)，避免過(guò)多頁(yè)面層級(jí)造成用戶迷失。

頁(yè)面結(jié)構(gòu)
  1. <!--pages/wallet/index.wxml-->
  2. <view class="container">
  3.     <view class="overage">
  4.         <view>
  5.             <text class="overage-header">我的余額（元）</text>
  6.         </view>
  7.         <view>
  8.             <text class="overage-amount">{{overage}}</text>
  9.         </view>
  10.         <view>
  11.             <text bindtap="overageDesc" class="overage-desc">余額說(shuō)明</text>
  12.         </view>      
  13.     </view>
  14.     <button bindtap="movetoCharge" class="btn-charge">充值</button>
  15.     <view bindtap="showTicket" class="my-ticket tapbar">
  16.         <text>我的用車券</text>
  17.         <text><text class="c-g">{{ticket}}張</text>></text>
  18.     </view>
  19.     <view bindtap="showDeposit" class="my-deposit tapbar">
  20.         <text>我的押金</text>
  21.         <text><text class="c-y">99元，押金退款</text>></text>
  22.     </view>
  23.     <view bindtap="showInvcode" class="my-invcode tapbar">
  24.         <text>關(guān)于ofo</text>
  25.         <text>></text>
  26.     </view>
  27. </view>
復(fù)制代碼

頁(yè)面樣式
  1. /* pages/wallet/index.wxss */
  2. .overage{
  3.         background-color: #fff;
  4.         padding: 40rpx 0;
  5.         text-align: center;
  6. }
  7. .overage-header{
  8.         font-size: 24rpx;
  9. }
  10. .overage-amount{
  11.         display: inline-block;
  12.         padding: 20rpx 0;
  13.         font-size: 100rpx;
  14.         font-weight: 700;
  15. }
  16. .overage-desc{
  17.         padding: 10rpx 30rpx;
  18.         font-size: 24rpx;
  19.         border-radius: 40rpx;
  20.         border: 1px solid #666;
  21. }
  22. .my-deposit{
  23.         margin-top: 2rpx;
  24. }
  25. .my-invcode{
  26.         margin-top: 40rpx;
  27. }
  28. .c-y{
  29.         color: #b9dd08;
  30.         padding-top: -5rpx;
  31.         padding-right: 10rpx;
  32. }
  33. .c-g{
  34.         padding-top: -5rpx;
  35.         padding-right: 10rpx;
  36. }
復(fù)制代碼

頁(yè)面數(shù)據(jù)邏輯
  1. // pages/wallet/index.js
  2. Page({
  3.   data:{
  4.     overage: 0,
  5.     ticket: 0
  6.   },
  7. // 頁(yè)面加載
  8.   onLoad:function(options){
  9.      wx.setNavigationBarTitle({
  10.        title: '我的錢包'
  11.      })
  12.   },
  13. // 頁(yè)面加載完成，更新本地存儲(chǔ)的overage
  14.   onReady:function(){
  15.      wx.getStorage({
  16.       key: 'overage',
  17.       success: (res) => {
  18.         this.setData({
  19.           overage: res.data.overage
  20.         })
  21.       }
  22.     })
  23.   },
  24. // 頁(yè)面顯示完成，獲取本地存儲(chǔ)的overage
  25.   onShow:function(){
  26.     wx.getStorage({
  27.       key: 'overage',
  28.       success: (res) => {
  29.         this.setData({
  30.           overage: res.data.overage
  31.         })
  32.       }
  33.     })
  34.   },
  35. // 余額說(shuō)明
  36.   overageDesc: function(){
  37.     wx.showModal({
  38.       title: "",
  39.       content: "充值余額0.00元+活動(dòng)贈(zèng)送余額0.00元",
  40.       showCancel: false,
  41.       confirmText: "我知道了",
  42.     })
  43.   },
  44. // 跳轉(zhuǎn)到充值頁(yè)面
  45.   movetoCharge: function(){
  46.     // 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到指定頁(yè)面，返回時(shí)將不會(huì)回到當(dāng)前頁(yè)面
  47.     wx.redirectTo({
  48.       url: '../charge/index'
  49.     })
  50.   },
  51. // 用車券
  52.   showTicket: function(){
  53.     wx.showModal({
  54.       title: "",
  55.       content: "你沒有用車券了",
  56.       showCancel: false,
  57.       confirmText: "好吧",
  58.     })
  59.   },
  60. // 押金退還
  61.   showDeposit: function(){
  62.     wx.showModal({
  63.       title: "",
  64.       content: "押金會(huì)立即退回，退款后，您將不能使用ofo共享單車確認(rèn)要進(jìn)行此退款嗎？",
  65.       cancelText: "繼續(xù)使用",
  66.       cancelColor: "#b9dd08",
  67.       confirmText: "押金退款",
  68.       confirmColor: "#ccc",
  69.       success: (res) => {
  70.         if(res.confirm){
  71.           wx.showToast({
  72.             title: "退款成功",
  73.             icon: "success",
  74.             duration: 2000
  75.           })
  76.         }
  77.       }
  78.     })
  79.   },
  80. // 關(guān)于ofo
  81.   showInvcode: function(){
  82.     wx.showModal({
  83.       title: "ofo共享單車",
  84.       content: "微信服務(wù)號(hào)：ofobike,網(wǎng)址：m.ofo.so",
  85.       showCancel: false,
  86.       confirmText: "玩的6"
  87.     })
  88.   }
  89. })
復(fù)制代碼

我們將金額信息也使用wx.setStorage({})和wx.getStorage({})這兩個(gè)API來(lái)設(shè)置和獲取本地存儲(chǔ)，用于模擬充值，便于做加減

點(diǎn)擊登錄按鈕，跳轉(zhuǎn)到充值頁(yè)面：

微信小程序開發(fā)之OFO共享單車,微信小程序錢包與充值頁(yè)面制作

頁(yè)面分析
  • 輸入金額，存儲(chǔ)在data對(duì)象里，點(diǎn)擊充值后，設(shè)置本地金額數(shù)據(jù)
  • 點(diǎn)擊充值按鈕后自動(dòng)跳轉(zhuǎn)到錢包頁(yè)

頁(yè)面結(jié)構(gòu)
  1. <!--pages/charge/index.wxml-->
  2. <view class="container">
  3.     <view class="title">請(qǐng)輸入充值金額</view>
  4.     <view class="input-box">
  5.         <input bindinput="bindInput" />
  6.     </view>
  7.     <button bindtap="charge" class="btn-charge">充值</button>
  8. </view>
復(fù)制代碼

頁(yè)面樣式
  1. /* pages/charge/index.wxss */
  2. .input-box{
  3.         background-color: #fff;
  4.         margin: 0 auto;
  5.         padding: 20rpx 0;
  6.         border-radius: 10rpx;
  7.         width: 90%;
  8.  
  9. }
  10. .input-box input{
  11.         width: 100%;
  12.         height: 100%;
  13.         text-align: center;
  14. }
復(fù)制代碼

頁(yè)面數(shù)據(jù)邏輯
  1. // pages/charge/index.js
  2. Page({
  3.   data:{
  4.     inputValue: 0
  5.   },
  6. // 頁(yè)面加載
  7.   onLoad:function(options){
  8.     wx.setNavigationBarTitle({
  9.       title: '充值'
  10.     })
  11.   },
  12. // 存儲(chǔ)輸入的充值金額
  13.   bindInput: function(res){
  14.     this.setData({
  15.       inputValue: res.detail.value
  16.     })  
  17.   },
  18. // 充值
  19.   charge: function(){
  20.     // 必須輸入大于0的數(shù)字
  21.     if(parseInt(this.data.inputValue) <= 0 || isNaN(this.data.inputValue)){
  22.       wx.showModal({
  23.         title: "警告",
  24.         content: "咱是不是還得給你錢？??！",
  25.         showCancel: false,
  26.         confirmText: "不不不不"
  27.       })
  28.     }else{
  29.       wx.redirectTo({
  30.         url: '../wallet/index',
  31.         success: function(res){
  32.           wx.showToast({
  33.             title: "充值成功",
  34.             icon: "success",
  35.             duration: 2000
  36.           })
  37.         }
  38.       })
  39.     }
  40.   },
  41. // 頁(yè)面銷毀，更新本地金額，（累加）
  42.   onUnload:function(){
  43.     wx.getStorage({
  44.       key: 'overage',
  45.       success: (res) => {
  46.         wx.setStorage({
  47.           key: 'overage',
  48.           data: {
  49.             overage: parseInt(this.data.inputValue) + parseInt(res.data.overage)
  50.           }
  51.         })
  52.       },
  53.       // 如果沒有本地金額，則設(shè)置本地金額
  54.       fail: (res) => {
  55.         wx.setStorage({
  56.           key: 'overage',
  57.           data: {
  58.             overage: parseInt(this.data.inputValue)
  59.           },
  60.         })
  61.       }
  62.     })
  63.   }
  64. })
復(fù)制代碼

充值頁(yè)面關(guān)閉時(shí)更新本地金額數(shù)據(jù)，所以需要在unLoad事件里執(zhí)行

擴(kuò)展：
  • 使用easy-mock偽造數(shù)據(jù)小程序多次請(qǐng)求了服務(wù)器“發(fā)送/接受”數(shù)據(jù)，其實(shí)這里使用了easy-mock這個(gè)網(wǎng)站偽造的數(shù)據(jù)。
  • easy-mock可以作為前端開發(fā)的偽后端，自己構(gòu)造數(shù)據(jù)來(lái)測(cè)試前端代碼。方便又快捷。
  • 比如我們這個(gè)小程序用到了后端api接口
    • 提交報(bào)障信息的反饋
    • 單車編號(hào)和解鎖密碼
    • 單車經(jīng)緯度

結(jié)語(yǔ):
到這里，ofo小程序的制作就到了尾聲了。我們創(chuàng)建了多個(gè)頁(yè)面，然后一個(gè)一個(gè)頁(yè)面從頁(yè)面分析，到完成數(shù)據(jù)邏輯，分別響應(yīng)著不同的業(yè)務(wù)邏輯，有的頁(yè)面與頁(yè)面之間有數(shù)據(jù)往來(lái)，我們就通過(guò)跳轉(zhuǎn)頁(yè)面?zhèn)鲄⒒蛟O(shè)置本地存儲(chǔ)來(lái)將它們建立起聯(lián)系，環(huán)環(huán)相扣，構(gòu)建起了整個(gè)小程序的基本功能。

通過(guò)這個(gè)小程序，我們發(fā)現(xiàn)文檔提供的API在不知不覺中已經(jīng)失去了它的神秘感，它們就是不同的工具，為小程序?qū)崿F(xiàn)業(yè)務(wù)請(qǐng)求搭建肢體骨架。其實(shí)小程序的處理簡(jiǎn)單的業(yè)務(wù)邏輯很簡(jiǎn)單，只要用心去思考，邊實(shí)現(xiàn)邊查文檔就能體會(huì)到它的精悍之處，本小程序還存在諸多不足，不過(guò)對(duì)于初學(xué)者熟悉小程序的頁(yè)面跳轉(zhuǎn)，api等或許有些幫助。

其他章節(jié)
微信小程序開發(fā)之OFO共享單車——掃碼
微信小程序開發(fā)之OFO共享單車——單車報(bào)障頁(yè)
微信小程序開發(fā)之OFO共享單車——個(gè)人中心頁(yè)
微信小程序開發(fā)之OFO共享單車——錢包與充值

重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個(gè)小商店

第三部分：如何登錄小商店

第四部分：開店任務(wù)常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結(jié)算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)