如何利用unicloud生成微信小程序分享碼
一，方案
看了官方的文檔，獲取小程序碼有三種，我采用的是第二種：生成數(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)用微信接口獲取。
實(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才可以渲染在頁面上。
總而言之，比較坑，但是我沒哭。
吶，就這樣吧～
總結(jié)
到此這篇關(guān)于如何利用unicloud生成微信小程序分享碼的文章就介紹到這了,更多相關(guān)unicloud生成微信小程序分享碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這里延遲加載的意思是，拖動(dòng)滾動(dòng)條時(shí)，在圖片出現(xiàn)在瀏覽器顯示區(qū)域后才加載顯示。2013-07-07
讓ie6也支持websocket采用flash封裝實(shí)現(xiàn)
ie9都不支持websocket,何況ie6,往往這些不可思議的事情卻意想不到的發(fā)生了;websocket能開發(fā)那么酷的功能,怎么能讓ie攔住我們的腳步,用falsh封裝吧，感興趣的你可不要錯(cuò)過了哈2013-02-02
這篇文章主要為大家介紹了高性能JavaScript循環(huán)語句和條件語句，感興趣的小伙伴們可以參考一下2016-01-01
ES6數(shù)組與對(duì)象的解構(gòu)賦值詳解
這篇文章主要介紹了ES6數(shù)組與對(duì)象的解構(gòu)賦值,結(jié)合實(shí)例形式詳細(xì)分析了ES6中數(shù)組與對(duì)象的解構(gòu)賦值原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
split()方法可以利用字符串的子字符串的作為分隔符將字符串分割為字符串?dāng)?shù)組，并返回此數(shù)組，本文給大家介紹javascript split 方法，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要是對(duì)javascript中文本框中輸入法切換的問題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了ionic 自定義彈框效果，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
RGB轉(zhuǎn)換實(shí)現(xiàn)代碼，淘寶前端開發(fā)工程師筆試題
寫一個(gè)轉(zhuǎn)換RGB的值的函數(shù)，實(shí)現(xiàn)以下效果。2010-11-11
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒有indexOf()方法，可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05
在IE中，新創(chuàng)建的input沒有如預(yù)期的獲得焦點(diǎn)。2009-09-09