逐福科技
177-371-24501(同微信)

微信小程序开发之OFO共享单车,微信小程序钱包与充值页面制作

2022-04-21 管理员
<script type="text/javascript">replyreload += ',' + 348719;</script>上一节我们完成了登录页面的实现，这一节让我们完成登录后的钱包页面和充值页面


页面分析
  • 需要获取钱包余额数据并显示在页面上，充值后数据会自动更新
  • 其他可点击按钮分别显示对应的模态框，因为微信只允许五个页面层级，避免过多页面层级造成用户迷失。

页面结构
  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: "继续使用",
  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来设置和获取本地存储，用于模拟充值，便于做加减

点击登录按钮，跳转到充值页面：



页面分析
  • 输入金额，存储在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事件里执行

扩展：
  • 使用easy-mock伪造数据小程序多次请求了服务器“发送/接受”数据，其实这里使用了easy-mock这个网站伪造的数据。
  • easy-mock可以作为前端开发的伪后端，自己构造数据来测试前端代码。方便又快捷。
  • 比如我们这个小程序用到了后端api接口
    • 提交报障信息的反馈
    • 单车编号和解锁密码
    • 单车经纬度

结语:
到这里，ofo小程序的制作就到了尾声了。我们创建了多个页面，然后一个一个页面从页面分析，到完成数据逻辑，分别响应着不同的业务逻辑，有的页面与页面之间有数据往来，我们就通过跳转页面传参或设置本地存储来将它们建立起联系，环环相扣，构建起了整个小程序的基本功能。

通过这个小程序，我们发现文档提供的API在不知不觉中已经失去了它的神秘感，它们就是不同的工具，为小程序实现业务请求搭建肢体骨架。其实小程序的处理简单的业务逻辑很简单，只要用心去思考，边实现边查文档就能体会到它的精悍之处，本小程序还存在诸多不足，不过对于初学者熟悉小程序的页面跳转，api等或许有些帮助。

其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值

上一篇：微信小程序开发之OFO共享单车,微信小程序个人中心页制作
下一篇：微信小程序api签名验证,小程序加密数据解密算法
相关资讯 Releva ntnews
解决方案 Solutions
相关热点 Hot spot
郑州快速建站：网站的站内优化怎么做
  1. 我们的优势
  2. 我们的实力
  3. 选择我们的理由
咨询电话（微信同号）

177-371-24501(同微信)

豫ICP备17049932号

Copyright © 2017-2022 版权所有 追风建站 Rights Reserved 技术支持：酷微科技

电话咨询 在线咨询 服务项目 SEO优化