Published on

Uniapp 实现全民分销功能

Authors
  • avatar
    作者
    狂奔滴小马

前言

前段时间在掘金 app 多了一个推广中心,分享课程链接,若有其他用户从你分享的链接购买,你就可以获得一笔佣金,我们称类似的功能叫全民分销,全民分销在互联网推广中很常见,比如腾讯云、阿里云等都有,只不过叫法不一样、腾讯云叫 SCP,阿里云叫推广云大使。笔者也通过类似的活动,也获得过一些收益,由于全民分销功能使用门槛较低、传播速度快、对于平台商家和用户都是零成本的,成了互联网中热门的推广功能,本篇介绍下全民分销功能实现原理。

掘金推广中心

流程图

全民分销流程图

推广者(也就是老用户)生成唯一的推广链接或者二维码,新用户点击推广者链接记录推广者 ID,用户下单生成推广记录流水,当然还有另外一种方式,拉新获得奖励,比如拉新 3 人获得代金券等

表结构

比如有一张用户表

interface User {
  _id: string
  // 名称
  name: string
  // 头像
  avatar: string
  // weixin  唯一ID
  openid: string
  // 创建时间
  createTime: number
  // 积分
  integral: number
}

一张记录表

interface Record {
  _id: string
  // 获得积分描述
  name: string
  // 发放模式 1 已发放 0 未发放
  mode: number
  // 关联用户表
  userId: string
  // 创建时间
  createTime: number
  // 获得积分
  integral: number
}

积分用来描述用户收益,或者可以用积分来兑换奖励,这部分可以根据不同的活动有不同的实现方式。以上数据字段是简易版设计,实际可以根据活动情况增加字段。

分享的 3 种方式

复制链接

在 web app 中一般会使用复制链接的功能 在现代浏览器(chrome 66+,edge 79+ )中只需要 1 行代码就可以实现复制和粘贴

const copy = (text) => navigator.clipboard.writeText('Hello world!')

粘贴

const text = navigator.clipboard.readText()

如果需要兼容老的浏览器可以使用 clipboard.js

转发

在小程序中会有转发和分享的按钮, 只需要在函数生命周期中加入 2 个函数就可以了。

onShareAppMessage() {
  // 转发
  return {
    title: this.detail.title + ' | 前端面试题库',
    path: '/pages/index/detail?id=' + this.detail._id + '&userId=' + this.vuex_user ? this.vuex_user._id : '',
  }
},
onShareTimeline() {
  // 分享到朋友圈
  return {
    title: this.detail.title + ' | 前端面试题库',
    path: '/pages/index/detail?id=' + this.detail._id + '&userId=' + this.vuex_user ? this.vuex_user._id : '',
  }
}

上述代码是我的面试刷题小程序代码 detail._id 是题目 id,this.vuex_user._id 是当前用户的 id,这样,每一道题目分享出去都会带上当前用户的 id。

生成带参数的二维码

在小程序中可以使用 wxacode.getUnlimited 接口获取小程序码,适用于需要的码数量极多的业务场景。通过该接口生成的小程序码,永久有效,数量暂无限制。

首先需要获得 access_token,这个是接口调用凭证

//封装获取 access_token 的方法, 1分钟1w次
async function getAccessToken(appId, appSecret) {
  const res = await uniCloud.httpclient.request(
    `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
    {
      dataType: 'json',
    }
  )
  return res.data.access_token
}

接下来就可以调用微信提供的接口,生成唯一的小程序码

async function getMpCode(scene, page, access_token) {
  const res = await uniCloud.httpclient.request(
    `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        scene,
        page,
      },
    }
  )
  return res.data
}

参数说明

  • env_version:要打开的小程序版本。正式版为 release,体验版为 trial,开发版为 develop
  • page: 页面 page,例如 pages/index/index,根路径前不要填加 /,不能携带参数(参数请放在 scene 字段里),如果不填写这个字段,默认跳主页面
  • scene:二维码唯一参数, 最大 32 个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符请自行编码为合法字符(因不支持%,中文无法使用 urlencode 处理,请使用其他编码方式)

返回值

  • Buffer 返回的图片 Buffer

云函数生成小程序码

exports.main = async (event, context) => {
  const appId = '你的 appId'
  const appSecret = '你的 appSecrets'
  const { page, scene } = event
  const access_token = await getAccessToken(appId, appSecret)
  const res = await getMpCode(scene, page, access_token)
  return res
}

小程序端生成 canvas 海报

uniCloud.callFunction({
  name: 'getmpcode',
  data: {
    scene,
  },
  success: (res) => {
    const imagepath = `${wx.env.USER_DATA_PATH}/mpcode.png`
    const fs = uni.getFileSystemManager()
    fs.writeFileSync(imagepath, uni.arrayBufferToBase64(res.result.data), 'base64')
    canvasdrawImage(imagepath)
  },
})

我们在页面上加一个生成朋友圈海报的按钮,当点击这个按钮触发云函数,生成小程序码,然后生成一个 ${wx.env.USER_DATA_PATH}/mpcode.png 临时文件路径,将接口返回的数据通过 uni.arrayBufferToBase64 转成 base64,最后将 base64 写入临时文件,此时本地就有了带参数的二维码。

接下来将二维码绘制在 canvas 上就可以了

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width:100vw;height:100vw;"></canvas>
  </view>
</template>
function canvasDrawImage(imagepath) {
  const context = uni.createCanvasContext('myCanvas')
  context.drawImage(imagepath, 470, 530, 100, 100)
  context.draw()
}

此时我们可以在页面上看到一个小程序码,drawImage 参数接收一个本地图片路径,在 470,530 的坐标,绘制一个 100,100 的小程序二维码

var img = new Image()
img.onload = function () {
  context.drawImage(img, 0, 0)
}
img.src = 'https://example.com/files/backdround.png'

为了让海报更加好看,我们可以设计一张背景,先在 canvas 上绘制背景,文字等,然后再绘制小程序码。

下载生成的 canvas 海报

methods: {
  saveImage() {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })
    uni.canvasToTempFilePath({
      //将canvas保存到一个临时文件
      canvasId: 'myCanvas', //画布id
      success: (res) => {
        const fs = uni.getFileSystemManager()

        fs.saveFile({
          tempFilePath: res.tempFilePath, // 传入一个本地临时文件路径
          success: (res) => {
            this.posterImage = res.savedFilePath
            this.saveImageToPhotosAlbum()
          },
          fail: (err) => {
            console.log(err)
          },
        })
        uni.hideLoading()
      },
    })
  },
  saveImageToPhotosAlbum() {
    uni.saveImageToPhotosAlbum({
      filePath: this.posterImage,
      success: () => {
        this.$emit('close-overlay')
        uni.showToast({
          title: '保存图片成功',
          duration: 2000,
        })
      },
      fail(err) {
        const { errMsg } = err
        if (errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
          uni.showModal({
            title: '保存失败',
            content: '请授权保存图片到“相册”的权限',
            success: (result) => {
              const { confirm } = result
              if (confirm) {
                uni.openSetting({})
              }
            },
          })
        }
      },
    })
  },
}

在页面上加一个下载海报按钮,点击就调用 saveImage 函数, 这样就可以将 canvas 海报保存到本地相册了。

注意 虽然是 canvas 下载图,但是需要在微信小程序后台: 开发平台->服务器域名->uploadFile 合法域名要添加上 example.com 否则没办法下载成功图片。

插入记录表

从 url 获得推广者的 id, 我们需要在用户注册或者下单的时候,推广者获得收益和积分等记录存入一张收益记录表, 这样就可以根据记录或者获得查询收益。代码比较简单,这里就不贴了。

小结

本文记录了小程序端全民分销的实现方式,包含前后端的逻辑和思路,总体比较简单,唯一难的就是使用 canvas 绘制海报,若要绘制一张好看的 canvas 海报,可能会花费你不少时间,但是我们可以使用现成的插件,直接在 Dcloud 插件市场搜索关键词“海报”,里面有各种已经封装好的插件,这里我推荐使用 海报画板,支持 xml 和 json 等方式配置,使用比较简单。

最后

我的面试刷题小程序面试狗中也加入了这个功能,邀请一个新用户,可以获得 6 积分,虽然现在积分不能兑换礼品,感兴趣朋友可以体验下。

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

runjs-cool
关注微信公众号,获取最新原创文章(首发)View on GitHub