生成指定頁面帶參數的小程序碼及踩坑

//獲取accessToken
            let that = this;
            const APP_ID = 'yourapp_id';// 小程序appid
            const APP_SECRET = 'yourapp_secreat';// 小程序app_secret
            let access_token = '';
            wx.request({
                url:"https://api.weixin.qq.com/cgi-bin/token",
                data: {
                    grant_type: 'client_credential',
                    appid: APP_ID,
                    secret: APP_SECRET
                },
                success:function(res){
                    access_token = res.data.access_token;

                    // 接口A：適用於需要的碼數量較少的業務場景 生成的是小程序碼
                    that.getQrCode_A(access_token);

                    // 接口B：適用於需要的碼數量極多的業務場景 生成的是小程序碼
                    that.getQrCode_B(access_token);

                    // 接口C：適用於需要的碼數量較少的業務場景 生成的是小程序二維碼
                    that.getQrCode_C(access_token);
                }
            })

 

//獲取二維碼
        getQrCode_A(access_token){
            var self = this;
            wx.request({
                url:"https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,
                method: 'POST',
                responseType:'arraybuffer',  //設置響應類型
                data: {
                    //path: 'pages/parnter/parnter?dealerId=' + wx.getStorageSync('dealerId'), // 必須是已經發布的小程序存在的頁面（否則報錯）
                    path:'pages/index/index?DRdealerId=' + wx.getStorageSync('dealerId'),
                    width: 298,
                    auto_color: false,// 自動配置線條顏色，如果顏色依然是黑色，則說明不建議配置主色調
                    line_color: {"r":"0","g":"0","b":"0"} // auto_color 為 false 時生效，使用 rgb 設置顏色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十進制表示
                },
                success:function(res){
                    self.DRsrc = wx.arrayBufferToBase64(res.data);
                }
            })
        }

第一步：先獲取access_token;

第二步：獲取指定頁面的小程序碼，上圖使用A方法，具體文檔有3種

第三步：在需要用到的頁面unload里通過query獲取參數

注：頁面展示小程序碼，需要使用

wx.arrayBufferToBase64轉為base64

src="data:image/png;base64,{{DRsrc}}"

踩坑點：

1.體驗版可以通過二維碼編譯小程序測試，使用方法，生成小程序碼后保存到本地，然后微信開發者工具編譯選擇：二維碼編譯，就可以測試了

 

2.體驗版正常，審核發布之后發現線上無法生成小程序碼，最后檢查發現

api.weixin.qq.com  的域名不在域名配置里，去配置，結果提示這個域名無法使用，然后發現文檔提示：app_secreat這個字段出於安全考慮，前端不要使用，最后換成由后端同事來生成二維碼傳給前端

 

3.后端同事傳arraybuffer的數據給前端，前端來轉base64展示圖片的時候，后端同事

Content-Type:

application/json; encoding=utf-8不能設置成image,否則無法生成二維碼

 

4.使用B方法生成的二維碼要使用query.scene去獲取，

const scene = decodeURIComponent(query.scene);

但是在傳參的時候不能使用encode轉碼，否則報錯40129