AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-26 21:05:05

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:终章 给ofo撸一个微信小程序之钱包与充值
相关的资讯,希望对您有帮助。

终章 给ofo撸一个微信小程序之钱包与充值

终章 给ofo撸一个微信小程序之钱包与充值

上一节我们完成了登录页面的实现,这一节让我们完成登录后的钱包页面和充值页面


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

  1. class=container>
  2. class=overage>
  3. class=overage-header>我的余额(元)
  4. class=overage-amount>{{overage}}
  5. bindtap=overageDesc class=overage-desc>余额说明
  6. bindtap=movetoCharge class=btn-charge>充值
  7. bindtap=showTicket class=my-ticket tapbar>
  8. 我的用车券
  9. class=c-g>{{ticket}}张>
  10. bindtap=showDeposit class=my-deposit tapbar>
  11. 我的押金
  12. class=c-y>99元,押金退款>
  13. bindtap=showInvcode class=my-invcode tapbar>
  14. 关于ofo
  15. >

页面样式

  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. class=container>
  2. class=title>请输入充值金额
  3. class=input-box>
  4. bindinput=bindInput />
  5. bindtap=charge class=btn-charge>充值

页面样式

  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. .input-box input{
  10. width: 100%;
  11. height: 100%;
  12. text-align: center;
  13. }

页面数据逻辑

  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接口 
提交报障信息的反馈 
单车编号和解锁密码 
单车经纬度


21阅读 | 0评论
你的回应
写文章

8059