前言
本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:
本案例中,“点击抽奖” 功能,需要用户登录后才能操作,也就是说需要 token 授权,请先了解:
启用“在线支付接口”
登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理
找到 “在线支付接口”,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单:“财务管理” --> “用户资产管理” ;
在该界面下你将可以管理用户的资产情况,调整用户的余额、积分信息
小程序开发:
接口返回的时候没有做界面上的渲染,统一在 console 输出,你可以尝试着将结果数据在界面上进行渲染
效果截图
js文件
1const WXAPI = require('apifm-wxapi') 2WXAPI.init('gooking') 3 4Page({ 5 data: { 6 7 }, 8 onLoad: function (options) { 9 10 }, 11 onShow: function () { 12 13 }, 14 goRegist() { 15 wx.navigateTo({ 16 url: '/pages/auth/index' 17 }) 18 }, 19 userAmount() { 20 const loginToken = wx.getStorageSync('loginToken') 21 if (!loginToken) { 22 wx.showToast({ 23 title: '请先登录', 24 icon: 'none' 25 }) 26 return 27 } 28 WXAPI.userAmount(loginToken.token).then(res => { 29 console.log(res) 30 if (res.code == 0) { 31 wx.showToast({ 32 title: '读取成功', 33 icon: 'success' 34 }) 35 } else { 36 wx.showToast({ 37 title: res.msg, 38 icon: 'none' 39 }) 40 } 41 }) 42 }, 43 cashLogs() { 44 const loginToken = wx.getStorageSync('loginToken') 45 if (!loginToken) { 46 wx.showToast({ 47 title: '请先登录', 48 icon: 'none' 49 }) 50 return 51 } 52 WXAPI.cashLogs({ 53 token: loginToken.token 54 }).then(res => { 55 console.log(res) 56 if (res.code == 0) { 57 wx.showToast({ 58 title: '读取成功', 59 icon: 'success' 60 }) 61 } else { 62 wx.showToast({ 63 title: res.msg, 64 icon: 'none' 65 }) 66 } 67 }) 68 }, 69})
wxss 文件
1button { 2 width:600rpx; 3 margin-top:50rpx; 4}
wxml 文件
1<button type="primary" bindtap="goRegist"> 注册 / 登录 </button> 2<button type="warn" bindtap="userAmount"> 读取资产 </button> 3<button type="warn" bindtap="cashLogs"> 读取资金流水 </button>
WXAPI.init('gooking') 这句代码是将你的小程序链接到你的后台,其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明);
至此,你已经掌握了如何在小程序中增加用户资产功能
思考题
读取资金流水可以实现分页展示,不可能一次性全部取出,开动脑筋,自己动手试试如何去实现资金明细的分页展示:
资金明细方法的参数,你可以查看下面的接口文档检阅:
期待你的进步!
感谢!