抽奖例子

前言

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

《创建 HelloWorld 项目》

《使用 “apifm-wxapi” 快速开发小程序》

《免费注册开通后台，获得专属域名》

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

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

启用“抽奖模块”

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

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

小程序开发：

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

效果截图

js文件

  1const WXAPI = require('apifm-wxapi')
  2WXAPI.init('gooking')
  3
  4const luckyInfoId = 165 // 后台抽奖设置里面的项目ID
  5
  6Page({
  7  data: {
  8    uid: undefined,
  9    openid: undefined,
 10    token: undefined
 11  },
 12  onLoad: function (options) {
 13
 14  },
 15  onShow: function () {
 16
 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 文件

1button {
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” 方法，试着去制作一个精美的抽奖小程序吧！

期待你的进步！

感谢！

"api工厂" 使用手册