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

2017-12-20

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

上一節我們完成了登錄頁面的實現，這一節讓我們完成登錄后的錢包頁面和充值頁面

頁面分析

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

頁面結構

<view class="container">
<view class="overage">
<view>
<text class="overage-header">我的余額（元）</text>
</view>
<view>
<text class="overage-amount">{{overage}}</text>
</view>
<view>
<text bindtap="overageDesc" class="overage-desc">余額說明</text>
</view>
</view>
<button bindtap="movetoCharge" class="btn-charge">充值</button>
<view bindtap="showTicket" class="my-ticket tapbar">
<text>我的用車券</text>
<text><text class="c-g">{{ticket}}張</text>></text>
</view>
<view bindtap="showDeposit" class="my-deposit tapbar">
<text>我的押金</text>
<text><text class="c-y">99元，押金退款</text>></text>
</view>
<view bindtap="showInvcode" class="my-invcode tapbar">
<text>關于ofo</text>
<text>></text>
</view>
</view>

復制代碼

頁面樣式

/* pages/wallet/index.wxss */
.overage{
background-color: #fff;
padding: 40rpx 0;
text-align: center;
}
.overage-header{
font-size: 24rpx;
}
.overage-amount{
display: inline-block;
padding: 20rpx 0;
font-size: 100rpx;
font-weight: 700;
}
.overage-desc{
padding: 10rpx 30rpx;
font-size: 24rpx;
border-radius: 40rpx;
border: 1px solid #666;
}
.my-deposit{
margin-top: 2rpx;
}
.my-invcode{
margin-top: 40rpx;
}
.c-y{
color: #b9dd08;
padding-top: -5rpx;
padding-right: 10rpx;
}
.c-g{
padding-top: -5rpx;
padding-right: 10rpx;
}

復制代碼

頁面數據邏輯

// pages/wallet/index.js
Page({
data:{
overage: 0,
ticket: 0
},
// 頁面加載
onLoad:function(options){
wx.setNavigationBarTitle({
title: '我的錢包'
})
},
// 頁面加載完成，更新本地存儲的overage
onReady:function(){
wx.getStorage({
key: 'overage',
success: (res) => {
this.setData({
overage: res.data.overage
})
}
})
},
// 頁面顯示完成，獲取本地存儲的overage
onShow:function(){
wx.getStorage({
key: 'overage',
success: (res) => {
this.setData({
overage: res.data.overage
})
}
})
},
// 余額說明
overageDesc: function(){
wx.showModal({
title: "",
content: "充值余額0.00元+活動贈送余額0.00元",
showCancel: false,
confirmText: "我知道了",
})
},
// 跳轉到充值頁面
movetoCharge: function(){
// 關閉當前頁面，跳轉到指定頁面，返回時將不會回到當前頁面
wx.redirectTo({
url: '../charge/index'
})
},
// 用車券
showTicket: function(){
wx.showModal({
title: "",
content: "你沒有用車券了",
showCancel: false,
confirmText: "好吧",
})
},
// 押金退還
showDeposit: function(){
wx.showModal({
title: "",
content: "押金會立即退回，退款后，您將不能使用ofo共享單車確認要進行此退款嗎？",
cancelText: "繼續使用",
cancelColor: "#b9dd08",
confirmText: "押金退款",
confirmColor: "#ccc",
success: (res) => {
if(res.confirm){
wx.showToast({
title: "退款成功",
icon: "success",
duration: 2000
})
}
}
})
},
// 關于ofo
showInvcode: function(){
wx.showModal({
title: "ofo共享單車",
content: "微信服務號：ofobike,網址：m.ofo.so",
showCancel: false,
confirmText: "玩的6"
})
}
})

復制代碼

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

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

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

頁面分析

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

頁面結構

<view class="container">
<view class="title">請輸入充值金額</view>
<view class="input-box">
<input bindinput="bindInput" />
</view>
<button bindtap="charge" class="btn-charge">充值</button>
</view>

復制代碼

頁面樣式

/* pages/charge/index.wxss */
.input-box{
background-color: #fff;
margin: 0 auto;
padding: 20rpx 0;
border-radius: 10rpx;
width: 90%;
}
.input-box input{
width: 100%;
height: 100%;
text-align: center;
}

復制代碼

頁面數據邏輯

// pages/charge/index.js
Page({
data:{
inputValue: 0
},
// 頁面加載
onLoad:function(options){
wx.setNavigationBarTitle({
title: '充值'
})
},
// 存儲輸入的充值金額
bindInput: function(res){
this.setData({
inputValue: res.detail.value
})
},
// 充值
charge: function(){
// 必須輸入大于0的數字
if(parseInt(this.data.inputValue) <= 0 || isNaN(this.data.inputValue)){
wx.showModal({
title: "警告",
content: "咱是不是還得給你錢？！！",
showCancel: false,
confirmText: "不不不不"
})
}else{
wx.redirectTo({
url: '../wallet/index',
success: function(res){
wx.showToast({
title: "充值成功",
icon: "success",
duration: 2000
})
}
})
}
},
// 頁面銷毀，更新本地金額，（累加）
onUnload:function(){
wx.getStorage({
key: 'overage',
success: (res) => {
wx.setStorage({
key: 'overage',
data: {
overage: parseInt(this.data.inputValue) + parseInt(res.data.overage)
}
})
},
// 如果沒有本地金額，則設置本地金額
fail: (res) => {
wx.setStorage({
key: 'overage',
data: {
overage: parseInt(this.data.inputValue)
},
})
}
})
}
})

復制代碼

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

擴展：

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

結語:
到這里，ofo小程序的制作就到了尾聲了。我們創建了多個頁面，然后一個一個頁面從頁面分析，到完成數據邏輯，分別響應著不同的業務邏輯，有的頁面與頁面之間有數據往來，我們就通過跳轉頁面傳參或設置本地存儲來將它們建立起聯系，環環相扣，構建起了整個小程序的基本功能。

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

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

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

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

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