微信小程序开发之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共享单车——钱包与充值

第二部分：如何开通一个小商店