注冊

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

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


頁面分析
  • 需要獲取錢包余額數據并顯示在頁面上，充值后數據會自動更新
  • 其他可點擊按鈕分別顯示對應的模態(tài)框，因為微信只允許五個頁面層級，避免過多頁面層級造成用戶迷失。

頁面結構
  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">余額說明</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>關于ofo</text>
  25.         <text>></text>
  26.     </view>
  27. </view>
復制代碼

頁面樣式
  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. }
復制代碼

頁面數據邏輯
  1. // pages/wallet/index.js
  2. Page({
  3.   data:{
  4.     overage: 0,
  5.     ticket: 0
  6.   },
  7. // 頁面加載
  8.   onLoad:function(options){
  9.      wx.setNavigationBarTitle({
  10.        title: '我的錢包'
  11.      })
  12.   },
  13. // 頁面加載完成，更新本地存儲的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. // 頁面顯示完成，獲取本地存儲的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. // 余額說明
  36.   overageDesc: function(){
  37.     wx.showModal({
  38.       title: "",
  39.       content: "充值余額0.00元+活動贈送余額0.00元",
  40.       showCancel: false,
  41.       confirmText: "我知道了",
  42.     })
  43.   },
  44. // 跳轉到充值頁面
  45.   movetoCharge: function(){
  46.     // 關閉當前頁面，跳轉到指定頁面，返回時將不會回到當前頁面
  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: "押金會立即退回，退款后，您將不能使用ofo共享單車確認要進行此退款嗎？",
  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. // 關于ofo
  81.   showInvcode: function(){
  82.     wx.showModal({
  83.       title: "ofo共享單車",
  84.       content: "微信服務號：ofobike,網址：m.ofo.so",
  85.       showCancel: false,
  86.       confirmText: "玩的6"
  87.     })
  88.   }
  89. })
復制代碼

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

點擊登錄按鈕，跳轉到充值頁面：

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

頁面分析
  • 輸入金額，存儲在data對象里，點擊充值后，設置本地金額數據
  • 點擊充值按鈕后自動跳轉到錢包頁

頁面結構
  1. <!--pages/charge/index.wxml-->
  2. <view class="container">
  3.     <view class="title">請輸入充值金額</view>
  4.     <view class="input-box">
  5.         <input bindinput="bindInput" />
  6.     </view>
  7.     <button bindtap="charge" class="btn-charge">充值</button>
  8. </view>
復制代碼

頁面樣式
  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. }
復制代碼

頁面數據邏輯
  1. // pages/charge/index.js
  2. Page({
  3.   data:{
  4.     inputValue: 0
  5.   },
  6. // 頁面加載
  7.   onLoad:function(options){
  8.     wx.setNavigationBarTitle({
  9.       title: '充值'
  10.     })
  11.   },
  12. // 存儲輸入的充值金額
  13.   bindInput: function(res){
  14.     this.setData({
  15.       inputValue: res.detail.value
  16.     })  
  17.   },
  18. // 充值
  19.   charge: function(){
  20.     // 必須輸入大于0的數字
  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. // 頁面銷毀，更新本地金額，（累加）
  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.       // 如果沒有本地金額，則設置本地金額
  54.       fail: (res) => {
  55.         wx.setStorage({
  56.           key: 'overage',
  57.           data: {
  58.             overage: parseInt(this.data.inputValue)
  59.           },
  60.         })
  61.       }
  62.     })
  63.   }
  64. })
復制代碼

充值頁面關閉時更新本地金額數據，所以需要在unLoad事件里執(zhí)行

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

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

通過這個小程序，我們發(fā)現文檔提供的API在不知不覺中已經失去了它的神秘感，它們就是不同的工具，為小程序實現業(yè)務請求搭建肢體骨架。其實小程序的處理簡單的業(yè)務邏輯很簡單，只要用心去思考，邊實現邊查文檔就能體會到它的精悍之處，本小程序還存在諸多不足，不過對于初學者熟悉小程序的頁面跳轉，api等或許有些幫助。

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

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

第一部分：小商店是什么

第二部分：如何開通一個小商店

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

第四部分：開店任務常見問題

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

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

第七部分：小程序直播

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

第九部分：小程序怎么結算

第十部分：小程序客服

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

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