pp电子

登录
免费开通
产品中心
更多服务

微信小程序开发之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 pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。

KESION 一直通过手艺立异，，，，提供产品和服务，，，，助力企业向数字化转型，，，，通过科技驱动商业刷新，，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



上/下篇

  • 微信小程序api署名验证,小程序加密数据解密算法

    用户数据的署名验证和加解密 数据签学校验 为了确保 开放接口 返回用户数据的清静性，，，，微信会对明文数据举行署名。？？？？？⒄呖梢云局び敌枰允莅傩星┭Ｑ椋，，，确保数据的完整...

    微信小程序开发微信小程序 2017/12/21 0:00:00

  • 微信小程序开发之OFO共享单车,微信小程序个人中心页制作

    上一节我们实现了单车报障页，，，，这一节我们来实现个人中心页面： Screenshot_2017-05-07-10-15-09-971_com.tencent.mm.png (36.15 KB, 下载次数:

    微信小程序开发微信小程序 2017/12/20 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序开发之OFO共享单车,微信小程序钱包与充值页面制作