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

—— 2017 ——
12/20
00:00

来源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 来源：不详 作者：未知
上一节我们完成了登录页面的实现，这一节让我们完成登录后的钱包页面和充值页面


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

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

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

微信小程序开发之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事件里执行

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

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

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

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


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！



▼点击进入科汛官网了解更多



热门标签
微信小程序开发 微信小程序
上/下篇
换一换相关推荐
精选内容
热点精选
产品服务
商家服务
关于我们

科汛专注于在线教育软件及私域社交电商SaaS平台解决方案，让商业经营更简单。

地址：厦门市观音山国际商务中心6号楼606号

电话：400-008-0263/0596-2218051

邮箱：partner@kesion.com

关注我们

Copyright©2006-2022厦门科汛软件有限公司 All Rights Reserved.

闽ICP备06009871号

闽公网安备35020302001540号

国家高新技术认定企业

国家高新技术认定企业

ISO20000

ISO20000

ISO27001

ISO27001

OHSAS18001

OHSAS18001

© 2006-2024 厦门科汛软件有限公司 版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1 闽公网安备 35020302001540号 统一社会信用代码：91350206MA2XN2XQ4A 国家高新技术企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证联盟企业编号：928180109031687687593 国际权威认证：信息技术服务管理体系标准（ISO 20000） 信息安全管理体系国际认证（ISO/IEC 27001）
在线咨询 电话咨询