如何利用unicloud生成微信小程序分享碼

更新時(shí)間：2022年12月19日 09:40:28 作者：笑道三千

這篇文章主要給大家介紹了關(guān)于如何利用unicloud生成微信小程序分享碼的相關(guān)資料,這是最近工作中遇到的一個(gè)需求,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一，方案

看了官方的文檔，獲取小程序碼有三種，我采用的是第二種：生成數(shù)量不受限制的分享碼。

對(duì)應(yīng)的官方文檔：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html

其中又分為https調(diào)用和云開發(fā)調(diào)用。

因?yàn)槲矣玫氖莡nicloud云開發(fā)，如果采用微信的云開發(fā)，還需要引入wx-server-sdk，然后要配置一堆東西，文檔又不全，嘗試了兩次未果，就放棄了這種方案。
最后是采用的https調(diào)用的方式。

二，實(shí)現(xiàn)思路

【第一步】需要獲取ACCESS_TOKEN值。

這種微信的接口，必須服務(wù)端調(diào)用，不能前端直接https進(jìn)行調(diào)用。雖然在開發(fā)階段能夠調(diào)用成功，那是因?yàn)槲⑿砰_發(fā)者工具-項(xiàng)目信息-本地設(shè)置中勾選了不校驗(yàn)合法域名導(dǎo)致的成功。當(dāng)你發(fā)布體驗(yàn)版和正式版時(shí)是調(diào)用不通的。

所以，獲取ACCESS_TOKEN必須在服務(wù)端直接調(diào)用微信接口獲取。

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html

實(shí)現(xiàn)的云對(duì)象代碼：

// 云對(duì)象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc語法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function () { // 通用預(yù)處理器

	},
	
	async addCodeInfo(infoObj){
		//獲取access_token
		const APPID='xxx'
		const APPSECRET='xxx'
		const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
		const requestOptions = {
			method: 'GET',
			dataType: 'json'
		}
		const res1 = await uniCloud.httpclient.request(URL,requestOptions)
		const access_token=res1.data.access_token
		return access_token
	}
}

【第二步】需要利用ACCESS_TOKEN再調(diào)用微信的生成分享碼的接口

這個(gè)接口依舊是微信的接口，所以依舊是需要在服務(wù)端發(fā)起。

于是，在上一步獲取到access_token的基礎(chǔ)上，繼續(xù)調(diào)用獲取分享碼的接口：

// 云對(duì)象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc語法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function () { // 通用預(yù)處理器

	},
	//數(shù)據(jù)庫中增加wifi信息,增加完畢后返回分享二維碼
	async addCodeInfo(infoObj){
		//獲取access_token
		const APPID='wxe0bc57edf31dad80'
		const APPSECRET='7e5f676a5fad20d044434792360c28d4'
		const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
		const requestOptions = {
			method: 'GET',
			dataType: 'json'
		}
		const res1 = await uniCloud.httpclient.request(URL,requestOptions)
		const access_token=res1.data.access_token

		//由此id生成分享碼
		const codeUrl=`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`
		const codeOptions={
			method:'POST',
			data: JSON.stringify({
				"scene":'id',
				"page":'pages/index/index',
				"check_path":false,
				"width":500,
				"env_version":'trial'//trial:體驗(yàn)版
			}),
		}
		const res3 = await uniCloud.httpclient.request(codeUrl,codeOptions)
		return res3
	}
}

【第三步】獲取到的分享碼結(jié)果類型是buffer的二進(jìn)制格式，需要轉(zhuǎn)圖片

如下圖：

也就是，res.data是個(gè)buffer類型的數(shù)據(jù)，它有兩個(gè)字段：data字段存儲(chǔ)內(nèi)容，type字段顯示類型。

于是需要在服務(wù)端轉(zhuǎn)成base64后再傳給前端：

const buffer=res3.data
const result=buffer.toString('base64')

三，完整的代碼實(shí)現(xiàn)

前端

<img :src="shareCode" alt="" >

<script>
	export default {
		data() {
			return {
				shareCode:'',
			}
		},
		onLoad(options) {
			this.getWeixinCode()
		},
		methods: {
			//調(diào)用后端接口，生成小程序分享碼
			async getWeixinCode() { // 注意異步
				const _this=this
				const wifiCode = uniCloud.importObject('wifiCode') // 導(dǎo)入云對(duì)象
				try {
					const params={}
					const res=await wifiCode.addCodeInfo(params)
					console.log("++++",res)
					this.shareCode="data:image/png;base64," + res
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

后端：

主要就是wifiCode這個(gè)云對(duì)象：

// 云對(duì)象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj
// jsdoc語法提示教程：https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129
module.exports = {
	_before: function () { // 通用預(yù)處理器

	},
	//數(shù)據(jù)庫中增加wifi信息,增加完畢后返回分享二維碼
	async addCodeInfo(infoObj){
		//獲取access_token
		const APPID='xxx'
		const APPSECRET='xxx'
		const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`
		const requestOptions = {
			method: 'GET',
			dataType: 'json'
		}
		const res1 = await uniCloud.httpclient.request(URL,requestOptions)
		const access_token=res1.data.access_token
		
		//由此id生成分享碼
		const codeUrl=`https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`
		const codeOptions={
			method:'POST',
			data: JSON.stringify({
				"scene":"23",
				"page":'pages/index/index',
				"check_path":false,
				"width":500,
				"env_version":'trial'//trial:體驗(yàn)版
			}),
		}
		const res3 = await uniCloud.httpclient.request(codeUrl,codeOptions)
		const buffer=res3.data
		console.log("---響應(yīng)--",buffer)
		// const buf = new Buffer (buffer)
		console.log("buffer轉(zhuǎn)化",buffer.toString('base64'))
		const result=buffer.toString('base64')
		return result
	}
}

四，坑點(diǎn)

1，微信的接口需要服務(wù)端調(diào)用

2，獲取分享碼的接口的post接口參數(shù)需要JSON.stringify處理一次

3，scenez只支持32位，一些特殊字符還不支持。

4，獲取分享碼的接口的access_token參數(shù)，必須放在url上，也就是和我代碼中一樣的寫法。

5，本地開發(fā)完成后，云對(duì)象啥的需要上傳部署后，體驗(yàn)版和真機(jī)調(diào)試才能用。并且，需要配置小程序的接口白名單。https://tcb-api.tencentcloudapi.com和
https://tcb-wbk382fznzzwna3-8chuc14d8e99.service.tcloudbase.com

6，獲取分享碼的接口，返回的是buffer二進(jìn)制流，所以獲取二維碼的接口，我沒有配置datatype這個(gè)參數(shù)，而是讓它采用默認(rèn)的值。獲取到結(jié)果后還需要轉(zhuǎn)化成base64才可以渲染在頁面上。