1. プログラム
公式ドキュメントを読んだところ、アプレットコードを入手するには3つの方法があり、私は2番目の方法である共有コードを無制限に生成する方法を使用しています。
対応する公式ドキュメント: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html
https コールとクラウド開発コールに分かれています。
私はunicloudクラウド開発を使用しているので、WeChatクラウド開発を使用する場合、wx-server-sdkを導入する必要があり、その後設定が必要で、ドキュメントが不完全で、2回失敗して断念しました。解決。
最後はhttpsの呼び出し方です。
第二に、アイデアを実現する
[手順 1] ACCESS_TOKEN 値を取得する必要があります。
この種の WeChat インターフェイスはサーバーによって呼び出される必要があり、フロントエンドの https によって直接呼び出すことはできません。開発段階では正常に呼び出すことができますが、これは WeChat 開発者ツール - プロジェクト情報 - ローカル設定で正当なドメイン名が検証されていないことが原因で成功をチェックしているためです。体験版と正式版をリリースすると通話ができなくなります。
したがって、ACCESS_TOKEN を取得するには、サーバー側で WeChat インターフェイスを直接呼び出して取得する必要があります。
公式ドキュメント: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
実装されたクラウド オブジェクト コード:
// 云对象教程: 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
}
}
[ステップ 2] ACCESS_TOKEN を使用して WeChat のインターフェースを呼び出し、共有コードを生成する必要がありますが、
このインターフェースは依然として WeChat のインターフェースであるため、サーバー上で開始する必要があります。
したがって、前の手順で取得した access_token に基づいて、共有コードを取得するためのインターフェイスの呼び出しを続けます。
// 云对象教程: 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 () {
// 通用预处理器
},
//数据库中增加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
}
}
[ステップ 3] 取得した共有コードの結果のタイプは、次の図に示すように、ピクチャに転送する必要があるバッファのバイナリ形式です。つまり、res.data はバッファ
タイプのデータであり、これには 2 つのフィールドがあります。データ フィールドにはコンテンツが格納され、タイプ フィールドにはタイプが表示されます。
したがって、サーバー側で Base64 に変換してからフロントエンドに渡す必要があります。
const buffer=res3.data
const result=buffer.toString('base64')
3、完全なコード実装
フロントエンド
<img :src="shareCode" alt="" >
<script>
export default {
data() {
return {
shareCode:'',
}
},
onLoad(options) {
this.getWeixinCode()
},
methods: {
//调用后端接口，生成小程序分享码
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 () {
// 通用预处理器
},
//数据库中增加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转化",buffer.toString('base64'))
const result=buffer.toString('base64')
return result
}
}
4、ピット
1. WeChat インターフェイスはサーバーによって呼び出される必要があります
2. 共有コードを取得するインターフェイスのポスト インターフェイス パラメーターは、 JSON.stringify によって一度処理される必要があります
3. Scenez は 32 ビットのみをサポートし、一部の特殊文字はまだサポートされていません。
4. 共有コードを取得するインターフェイスの access_token パラメーターは、私のコードと同じ URL に配置する必要があります。
5. ローカル開発が完了したら、クラウド オブジェクトをアップロードしてデプロイする必要があり、試用版と実機のデバッグが使用できるようになります。さらに、アプレットのインターフェイス ホワイトリストを構成する必要があります。https://tcb-api.tencentcloudapi.com および
https://tcb-wbk382fznzzwna3-8chuc14d8e99.service.tcloudbase.com
6. 共有コードを取得するためのインターフェイスはバッファー バイナリ ストリームを返すため、QR コードを取得するためのインターフェイスは, datatype パラメータを設定しませんでしたが、デフォルト値を使用させました。結果を取得したら、ページ上に表示する前に、base64 に変換する必要があります。
全体として、かなり可哀想ですが、私は泣きませんでした。
やあ、以上です～
後で見る友達の参考になれば幸いです～