Uniapp?實(shí)現(xiàn)全民分銷功能原理解析
前言
前段時(shí)間在掘金 app 多了一個(gè)推廣中心,分享課程鏈接,若有其他用戶從你分享的鏈接購(gòu)買,你就可以獲得一筆傭金,我們稱類似的功能叫全民分銷,全民分銷在互聯(lián)網(wǎng)推廣中很常見,比如騰訊云、阿里云等都有,只不過(guò)叫法不一樣、騰訊云叫 SCP,阿里云叫推廣云大使。筆者也通過(guò)類似的活動(dòng),也獲得過(guò)一些收益,由于全民分銷功能使用門檻較低、傳播速度快、對(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 }
積分用來(lái)描述用戶收益,或者可以用積分來(lái)兌換獎(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)景。通過(guò)該接口生成的小程序碼,永久有效,數(shù)量暫無(wú)限制。
首先需要獲得 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 }
接下來(lái)就可以調(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ù)說(shuō)明
- env_version:要打開的小程序版本。正式版為 release,體驗(yàn)版為 trial,開發(fā)版為 develop
- page: 頁(yè)面 page,例如 pages/index/index,根路徑前不要填加 /,不能攜帶參數(shù)(參數(shù)請(qǐng)放在 scene 字段里),如果不填寫這個(gè)字段,默認(rèn)跳主頁(yè)面
- scene:二維碼唯一參數(shù), 最大 32 個(gè)可見字符,只支持?jǐn)?shù)字,大小寫英文以及部分特殊字符:
!#$&'()*+,/:;=?@-._~
,其它字符請(qǐng)自行編碼為合法字符(因不支持%,中文無(wú)法使用 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è)陧?yè)面上加一個(gè)生成朋友圈海報(bào)的按鈕,當(dāng)點(diǎn)擊這個(gè)按鈕觸發(fā)云函數(shù),生成小程序碼,然后生成一個(gè) ${wx.env.USER_DATA_PATH}/mpcode.png
臨時(shí)文件路徑,將接口返回的數(shù)據(jù)通過(guò) uni.arrayBufferToBase64
轉(zhuǎn)成 base64,最后將 base64 寫入臨時(shí)文件,此時(shí)本地就有了帶參數(shù)的二維碼。
接下來(lái)將二維碼繪制在 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í)我們可以在頁(yè)面上看到一個(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({}) } }, }) } }, }) }, }
在頁(yè)面上加一個(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序通過(guò)點(diǎn)擊事件傳參(data-)的操作示例
微信小程序可以通過(guò)直接寫 data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ,利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過(guò)點(diǎn)擊事件傳參(data-)的操作,感興趣的朋友一起看看吧2023-12-12ie中js創(chuàng)建checkbox默認(rèn)選中問(wèn)題探討
js創(chuàng)建checkbox默認(rèn)選中在某些特殊情況下還是比較實(shí)用的,下面有個(gè)不錯(cuò)的示例,大家可以參考下2013-10-10關(guān)于驗(yàn)證碼在IE中不刷新的快速解決方法
下面小編就為大家?guī)?lái)一篇關(guān)于驗(yàn)證碼在IE中不刷新的快速解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09Bootstrap選項(xiàng)卡與Masonry插件的完美結(jié)合
這篇文章主要介紹了Bootstrap選項(xiàng)卡與Masonry插件的完美結(jié)合的相關(guān)資料,需要的朋友可以參考下2016-07-07js利用iframe實(shí)現(xiàn)選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了js利用iframe實(shí)現(xiàn)選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01