生成指定页面带参数的小程序码及踩坑

//获取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

生成指定页面带参数的小程序码及踩坑

猜你喜欢