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

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

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

一，方案

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

對應的官方文檔：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html

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

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

二，實現(xiàn)思路

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

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

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

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

實現(xiàn)的云對象代碼：

// 云對象教程: 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 () { // 通用預處理器

	},
	
	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)用微信的生成分享碼的接口

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

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

// 云對象教程: 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 () { // 通用預處理器

	},
	//數(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:體驗版
			}),
		}
		const res3 = await uniCloud.httpclient.request(codeUrl,codeOptions)
		return res3
	}
}

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

如下圖：

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

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

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

三，完整的代碼實現(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') // 導入云對象
				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這個云對象：

// 云對象教程: 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 () { // 通用預處理器

	},
	//數(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:體驗版
			}),
		}
		const res3 = await uniCloud.httpclient.request(codeUrl,codeOptions)
		const buffer=res3.data
		console.log("---響應--",buffer)
		// const buf = new Buffer (buffer)
		console.log("buffer轉(zhuǎn)化",buffer.toString('base64'))
		const result=buffer.toString('base64')
		return result
	}
}

四，坑點

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

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

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

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

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

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