Uniapp?實(shí)現(xiàn)全民分銷功能原理解析

更新時(shí)間：2022年06月20日 09:10:56 作者：狂奔滴小馬

這篇文章主要介紹了Uniapp?實(shí)現(xiàn)全民分銷功能,本篇文章主要介紹全民分銷功能實(shí)現(xiàn)原理，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

前言

前段時(shí)間在掘金 app 多了一個(gè)推廣中心，分享課程鏈接，若有其他用戶從你分享的鏈接購(gòu)買，你就可以獲得一筆傭金，我們稱類似的功能叫全民分銷，全民分銷在互聯(lián)網(wǎng)推廣中很常見，比如騰訊云、阿里云等都有，只不過叫法不一樣、騰訊云叫 SCP，阿里云叫推廣云大使。筆者也通過類似的活動(dòng)，也獲得過一些收益，由于全民分銷功能使用門檻較低、傳播速度快、對(duì)于平臺(tái)商家和用戶都是零成本的，成了互聯(lián)網(wǎng)中熱門的推廣功能，本篇介紹下全民分銷功能實(shí)現(xiàn)原理。

流程圖

推廣者（也就是老用戶）生成唯一的推廣鏈接或者二維碼，新用戶點(diǎn)擊推廣者鏈接記錄推廣者 ID，用戶下單生成推廣記錄流水，當(dāng)然還有另外一種方式，拉新獲得獎(jiǎng)勵(lì)，比如拉新 3 人獲得代金券等

表結(jié)構(gòu)

比如有一張用戶表

interface User {
  _id: string
  // 名稱
  name: string
  // 頭像
  avatar: string
  // weixin  唯一ID
  openid: string
  // 創(chuàng)建時(shí)間
  createTime: number
  // 積分
  integral: number
}

一張記錄表

interface Record {
  _id: string
  // 獲得積分描述
  name: string
  // 發(fā)放模式 1 已發(fā)放 0 未發(fā)放
  mode: number
  // 關(guān)聯(lián)用戶表
  userId: string
  // 創(chuàng)建時(shí)間
  createTime: number
  // 獲得積分
  integral: number
}

積分用來描述用戶收益，或者可以用積分來兌換獎(jiǎng)勵(lì)，這部分可以根據(jù)不同的活動(dòng)有不同的實(shí)現(xiàn)方式。以上數(shù)據(jù)字段是簡(jiǎn)易版設(shè)計(jì)，實(shí)際可以根據(jù)活動(dòng)情況增加字段。

分享的 3 種方式

復(fù)制鏈接

在 web app 中一般會(huì)使用復(fù)制鏈接的功能在現(xiàn)代瀏覽器(chrome 66+,edge 79+ )中只需要 1 行代碼就可以實(shí)現(xiàn)復(fù)制和粘貼

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

粘貼

const text = navigator.clipboard.readText()

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

轉(zhuǎn)發(fā)

在小程序中會(huì)有轉(zhuǎn)發(fā)和分享的按鈕，只需要在函數(shù)生命周期中加入 2 個(gè)函數(shù)就可以了。

onShareAppMessage() {
  // 轉(zhuǎn)發(fā)
  return {
    title: this.detail.title + ' | 前端面試題庫(kù)',
    path: '/pages/index/detail?id=' + this.detail._id + '&userId=' + this.vuex_user ? this.vuex_user._id : '',
  }
},
onShareTimeline() {
  // 分享到朋友圈
  return {
    title: this.detail.title + ' | 前端面試題庫(kù)',
    path: '/pages/index/detail?id=' + this.detail._id + '&userId=' + this.vuex_user ? this.vuex_user._id : '',
  }
}

上述代碼是我的面試刷題小程序代碼 detail._id 是題目 id，this.vuex_user._id 是當(dāng)前用戶的 id，這樣，每一道題目分享出去都會(huì)帶上當(dāng)前用戶的 id。

生成帶參數(shù)的二維碼

在小程序中可以使用 wxacode.getUnlimited 接口獲取小程序碼，適用于需要的碼數(shù)量極多的業(yè)務(wù)場(chǎng)景。通過該接口生成的小程序碼，永久有效，數(shù)量暫無限制。

首先需要獲得 access_token，這個(gè)是接口調(diào)用憑證

//封裝獲取 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
}

接下來就可以調(diào)用微信提供的接口，生成唯一的小程序碼

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
}

參數(shù)說明

env_version：要打開的小程序版本。正式版為 release，體驗(yàn)版為 trial，開發(fā)版為 develop
page：頁面 page，例如 pages/index/index，根路徑前不要填加 /，不能攜帶參數(shù)（參數(shù)請(qǐng)放在 scene 字段里），如果不填寫這個(gè)字段，默認(rèn)跳主頁面
scene：二維碼唯一參數(shù)，最大 32 個(gè)可見字符，只支持?jǐn)?shù)字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符請(qǐng)自行編碼為合法字符（因不支持%，中文無法使用 urlencode 處理，請(qǐng)使用其他編碼方式）

返回值

Buffer 返回的圖片 Buffer

云函數(shù)生成小程序碼

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 海報(bào)

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)
  },
})

我們?cè)陧撁嫔霞右粋€(gè)生成朋友圈海報(bào)的按鈕，當(dāng)點(diǎn)擊這個(gè)按鈕觸發(fā)云函數(shù)，生成小程序碼，然后生成一個(gè) ${wx.env.USER_DATA_PATH}/mpcode.png 臨時(shí)文件路徑，將接口返回的數(shù)據(jù)通過 uni.arrayBufferToBase64 轉(zhuǎn)成 base64，最后將 base64 寫入臨時(shí)文件，此時(shí)本地就有了帶參數(shù)的二維碼。

接下來將二維碼繪制在 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();
}

此時(shí)我們可以在頁面上看到一個(gè)小程序碼，drawImage 參數(shù)接收一個(gè)本地圖片路徑，在 470,530 的坐標(biāo)，繪制一個(gè) 100,100 的小程序二維碼

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

為了讓海報(bào)更加好看，我們可以設(shè)計(jì)一張背景，先在 canvas 上繪制背景，文字等，然后再繪制小程序碼。

下載生成的 canvas 海報(bào)

methods: {
  saveImage() {
    uni.showLoading({
      title: '加載中...',
      mask: true,
    })
    uni.canvasToTempFilePath({
      //將canvas保存到一個(gè)臨時(shí)文件
      canvasId: 'myCanvas', //畫布id
      success: (res) => {
        const fs = uni.getFileSystemManager()

        fs.saveFile({
          tempFilePath: res.tempFilePath, // 傳入一個(gè)本地臨時(shí)文件路徑
          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: '請(qǐng)授權(quán)保存圖片到“相冊(cè)”的權(quán)限',
            success: (result) => {
              const { confirm } = result
              if (confirm) {
                uni.openSetting({})
              }
            },
          })
        }
      },
    })
  },
}

在頁面上加一個(gè)下載海報(bào)按鈕，點(diǎn)擊就調(diào)用 saveImage 函數(shù), 這樣就可以將 canvas 海報(bào)保存到本地相冊(cè)了。

注意雖然是 canvas 下載圖，但是需要在微信小程序后臺(tái)：開發(fā)平臺(tái)->服務(wù)器域名->uploadFile 合法域名要添加上 example.com 否則沒辦法下載成功圖片。

插入記錄表

從 url 獲得推廣者的 id，我們需要在用戶注冊(cè)或者下單的時(shí)候，推廣者獲得收益和積分等記錄存入一張收益記錄表，這樣就可以根據(jù)記錄或者獲得查詢收益。代碼比較簡(jiǎn)單，這里就不貼了。

小結(jié)

本文記錄了小程序端全民分銷的實(shí)現(xiàn)方式，包含前后端的邏輯和思路，總體比較簡(jiǎn)單，唯一難的就是使用 canvas 繪制海報(bào)，若要繪制一張好看的 canvas 海報(bào)，可能會(huì)花費(fèi)你不少時(shí)間，但是我們可以使用現(xiàn)成的插件，直接在 Dcloud 插件市場(chǎng)搜索關(guān)鍵詞“海報(bào)”，里面有各種已經(jīng)封裝好的插件，這里我推薦使用海報(bào)畫板，支持 xml 和 json 等方式配置，使用比較簡(jiǎn)單。

到此這篇關(guān)于Uniapp 實(shí)現(xiàn)全民分銷功能原理解析的文章就介紹到這了,更多相關(guān)Uniapp 全民分銷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: