前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

本案例中，“点击抽奖” 功能，需要用户登录后才能操作，也就是说需要 token 授权，请先了解：

《微信小程序登录获取openid及三方token》

启用“在线支付接口”

登录 “第一步” 注册的后台，左侧菜单 —> 工厂设置 —> 模块管理

找到 “在线支付接口”，点击 “启用模块” ，然后 F5 刷新一下后台界面，你将可以看到新的菜单：“财务管理” —> “用户资产管理” ；

在该界面下你将可以管理用户的资产情况，调整用户的余额、积分信息

资金模块(查看资产、查看资金流水) - 图1

小程序开发：

接口返回的时候没有做界面上的渲染，统一在 console 输出，你可以尝试着将结果数据在界面上进行渲染

效果截图

资金模块(查看资产、查看资金流水) - 图2

js文件

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  7.   },
  8.   onLoad: function (options) {
  10.   },
  11.   onShow: function () {
  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 文件

  1. button {
  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 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

至此，你已经掌握了如何在小程序中增加用户资产功能

思考题

读取资金流水可以实现分页展示，不可能一次性全部取出，开动脑筋，自己动手试试如何去实现资金明细的分页展示：

资金明细方法的参数，你可以查看下面的接口文档检阅：

《api接口文档》

期待你的进步！
感谢！