前言

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

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

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

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

启用“抽奖模块”

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

找到 “抽奖模块”，点击 “启用模块” ，然后 F5 刷新一下后台界面，你将可以看到新的菜单：“营销复制” —> “抽奖设置 + 抽奖记录” ；

你需要先在后台发布一个新的抽奖设置项目：

抽奖例子 - 图1

小程序开发：

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

效果截图

抽奖例子 - 图2

js文件

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. const luckyInfoId = 165 // 后台抽奖设置里面的项目ID
  6. Page({
  7.   data: {
  8.     uid: undefined,
  9.     openid: undefined,
  10.     token: undefined
  11.   },
  12.   onLoad: function (options) {
  14.   },
  15.   onShow: function () {
  17.   },
  18.   goRegist(){
  19.     wx.navigateTo({
  20.       url: '/pages/register/index'
  21.     })
  22.   },
  23.   goLogin(){
  24.     const _this = this
  25.     wx.login({
  26.       success: function (res) {
  27.         const code = res.code; // 微信登录接口返回的 code 参数，下面登录接口需要用到
  28.         WXAPI.login_wx(code).then(function (res) {
  29.           // 登录接口返回结果
  30.           console.log(res)
  31.           if (res.code == 10000) {
  32.             wx.showToast({
  33.               title: '请先注册',
  34.               icon: 'none'
  35.             })
  36.           } else if (res.code == 0) {
  37.             wx.showToast({
  38.               title: '登录成功',
  39.               icon: 'success'
  40.             })
  41.             _this.setData(res.data)
  42.           } else {
  43.             wx.showToast({
  44.               title: res.msg,
  45.               icon: 'none'
  46.             })
  47.           }
  48.         })
  49.       }
  50.     })
  51.   },
  52.   luckyInfo(){
  53.     WXAPI.luckyInfo(luckyInfoId).then(res => {
  54.       console.log(res)
  55.       if (res.code == 700) {
  56.         wx.showToast({
  57.           title: '抽奖项目ID错误',
  58.           icon: 'none'
  59.         })
  60.       } else if (res.code == 0) {
  61.         wx.showToast({
  62.           title: '读取成功',
  63.           icon: 'success'
  64.         })
  65.       }
  66.     })
  67.   },
  68.   luckyInfoJoinMy(){
  69.     if (!this.data.token) {
  70.       wx.showToast({
  71.         title: '请先登录',
  72.         icon: 'none'
  73.       })
  74.       return
  75.     }
  76.     WXAPI.luckyInfoJoinMy(luckyInfoId, this.data.token).then(res => {
  77.       console.log(res)
  78.       if (res.code == 700) {
  79.         wx.showToast({
  80.           title: '你还未参与',
  81.           icon: 'none'
  82.         })
  83.       } else if (res.code == 0) {
  84.         wx.showToast({
  85.           title: '读取成功',
  86.           icon: 'success'
  87.         })
  88.       }
  89.     })
  90.   },
  91.   luckyInfoJoin(){
  92.     if (!this.data.token) {
  93.       wx.showToast({
  94.         title: '请先登录',
  95.         icon: 'none'
  96.       })
  97.       return
  98.     }
  99.     WXAPI.luckyInfoJoin(luckyInfoId, this.data.token).then(res => {
  100.       console.log(res)
  101.       if (res.code == 0) {
  102.         wx.showToast({
  103.           title: '参与成功',
  104.           icon: 'success'
  105.         })
  106.       } else {
  107.         wx.showToast({
  108.           title: res.msg,
  109.           icon: 'none'
  110.         })
  111.       }
  112.     })
  113.   },
  114.   luckyInfoJoinLogs(){
  115.     WXAPI.luckyInfoJoinLogs({
  116.       lid: luckyInfoId
  117.     }).then(res => {
  118.       console.log(res)
  119.       if (res.code == 0) {
  120.         wx.showToast({
  121.           title: '读取成功',
  122.           icon: 'success'
  123.         })
  124.       } else {
  125.         wx.showToast({
  126.           title: res.msg,
  127.           icon: 'none'
  128.         })
  129.       }
  130.     })
  131.   }
  132. })

wxss 文件

  1. button {
  2.   width:600rpx;
  3.   margin-top:50rpx;
  4. }

wxml 文件

  1. <button type="primary" bindtap="goRegist"> 注册新用户 </button>
  2. <button type="primary" bindtap="goLogin"> 登录获取token </button>
  3. <button type="warn" bindtap="luckyInfo"> 获取投票项目详情 </button>
  4. <button type="warn" bindtap="luckyInfoJoinMy"> 我的抽奖 </button>
  5. <button type="warn" bindtap="luckyInfoJoin"> 参与抽奖 </button>
  6. <button type="warn" bindtap="luckyInfoJoinLogs"> 拉取所有的抽奖记录 </button>

WXAPI.init(‘gooking’) 这句代码是将你的小程序链接到你的后台，其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

至此，你已经掌握了如何开发一个基于小程序的抽奖功能

使用上述的 “apifm-wxapi” 方法，试着去制作一个精美的抽奖小程序吧！

期待你的进步！
感谢！