一、為什麼要是用雲函數生成小程式二維碼呢。
是用雲函數生成小程式碼,是可以脫離後端人員的接口,自己來實作的。而且通過一定的封裝調用起來也是蠻友善的。而且這個功能應用的場景還是蠻多的。
二、下面簡單說一下步驟
1、建立雲函數,在函數中填寫程式的appid和秘鑰(下面我會貼上我的代碼)
2.到控制台建立一個名為
access_token
的資料集合,用于給
wx-js-utils
類庫緩存
access_token
的數值。
代碼中我将生成的二維碼直接放置在雲存儲的qr檔案夾下。(這個可以自己進行)
3.上傳雲函數到伺服器并部署服務
4、頁面直接調用
三、下面貼一下我的代碼詳情
雲端代碼:(雲函數的index.js檔案,需要自行填入秘鑰和appid)
// 雲函數入口檔案
const cloud = require('wx-server-sdk');
const SECRET = "秘鑰", //小程式的秘鑰
bucketPrefix ="存放的id"; //其中 bucketPrefix 為檔案存儲 fildID 的前半部分。
// 設定檔案夾名稱 設定名稱加'/'
const filename ="qr/";
// 初始化雲能力
cloud.init()
async function getQR(method, path, fileID) {
const {
APPID,
} = cloud.getWXContext();
// 字元串的處理
let filename2 = `${path}_${fileID}`.replace(/\//g, '_');
filename2 = filename2.replace(/\?/g,'-')
try {
await cloud.downloadFile({
fileID: bucketPrefix + filename + filename2
})
console.log('get from cos!!!')
return { fileID: bucketPrefix + filename + filename2}
} catch (e) {
console.log('get cos failed, invoke api generate!')
const {
WXMINIUser,
WXMINIQR
} = require('wx-js-utils')
// 擷取access_token
const wXMINIUser = new WXMINIUser({
appId: APPID,
secret: SECRET
})
const access_token = await wXMINIUser.getCacheAccessToken()
console.log('access_token: ', access_token)
// 生成小程式碼
const wXMINIQR = new WXMINIQR()
const qrResult = await wXMINIQR[method]({
scene: '?code=123',
access_token,
path,
is_hyaline: true
})
await cloud.uploadFile({
cloudPath: filename + filename2,
fileContent: qrResult
})
return { fileID: bucketPrefix + filename + filename2 }
}
}
/**
* 根據類型生成對應的二維碼
* @param {String} type 取值有square,mina,unlimitmina
*/
async function getQRByType(type = 'limit', path ="pages/index/index") {
switch (type) {
case 'square':
return await getQR('getQR', path, 'square.png')
case 'limit':
return await getQR('getMiniQRLimit', path, 'limit.png')
default:
return await getQR('getMiniQR', path, 'mini.png')
}
}
// 雲函數入口函數
exports.main = async (event) => await getQRByType(event.type, event.path)
頁面的js檔案:
const regeneratorRuntime = require('../../libs/runtime')
Page({
data: {
title: 'qrcode',
step: 1,
counterId: '',
openid: '',
count: null,
queryResult: '',
},
onCreateSquare() {
this.create('square')
},
onCreateLimit() {
this.create('limit', "pages/form/register/register?action=modification& openid=oIxZX4zWD2QBU8FDgeaiRbuzo6lA")
},
async create(type = 'square', path) {
wx.showLoading({
title: '加載中',
})
try {
const res = await wx.cloud.callFunction({
name: 'wxaqrcode',
data: {
type,
path,
}
})
wx.hideLoading()
const result = res.result
if (result.code) {
wx.showToast({
title: result.msg,
icon: 'none'
})
return
}
this.setData({qrSource: result.fileID})
} catch (err) {
wx.hideLoading()
console.log('err',err)
wx.showToast({
title: '生成失敗!',
icon: 'none',
duration: 3000
})
}
},
})
函數說明:create(),這個函數存在兩個參數,第一個參數是生成二維碼的類型的,第二個是二維碼的路基和參數連接配接,直接編寫即可。如果不傳參的話,目前生成的pages/index/index頁面,并且是無參數的。