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


    //获取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'),
                         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



  • 相关阅读:
    RedisTemplate的rightpushAll()时的坑
    Redis操作HyperLogLog
    Redis做消息队列使用
    UML
    设计模式概述
    HTTP/HTTPS/TCP/IP协议
    SpringBoot特点
    虚拟机+kafka基础配置
    Spring学习
    SpringBoot配置文件
  • 原文地址:https://www.cnblogs.com/woshidouzia/p/10905455.html
Copyright © 2020-2023  润新知