腳本之家服務器常用軟件

快捷導航

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

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

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

前言

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

流程圖

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

表結構

比如有一張用戶表

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

一張記錄表

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

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

分享的 3 種方式

復制鏈接

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

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

粘貼

const text = navigator.clipboard.readText()

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

轉發(fā)

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

onShareAppMessage() {
  // 轉發(fā)
  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。

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

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

首先需要獲得 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
}

參數(shù)說明

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

返回值

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 海報

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

我們在頁面上加一個生成朋友圈海報的按鈕，當點擊這個按鈕觸發(fā)云函數(shù)，生成小程序碼，然后生成一個 ${wx.env.USER_DATA_PATH}/mpcode.png 臨時文件路徑，將接口返回的數(shù)據(jù)通過 uni.arrayBufferToBase64 轉成 base64，最后將 base64 寫入臨時文件，此時本地就有了帶參數(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();
}

此時我們可以在頁面上看到一個小程序碼，drawImage 參數(shù)接收一個本地圖片路徑，在 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 函數(shù), 這樣就可以將 canvas 海報保存到本地相冊了。

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

插入記錄表

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

小結

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

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

您可能感興趣的文章: