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

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



原文地址:https://www.cnblogs.com/woshidouzia/p/10905455.html

时间: 2024-11-06 03:37:38

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

c#后台生成指定页面带参数的小程序码

出于安全考虑,小程序禁用了直接在小程序端调用api.weixin.qq.com的功能,只能通过后台来调用,以下是实现的过程. 这是官方的文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html: 1.首先获取accesstoken public string GetAccessToken(string strAPPID, string strS

nodejs获取带参数的小程序码

打开项目目录 ,新建一个app.js文件 使用cnpm init命令初始化项目文件 安装express和superagent 并将安装信息保存到package文件中 安装完了 写一个接口看看有木有问题 OK 接口是可以的 接下来就要干正事了. 在app.js文件同级路径建一个config.js文件 用于保存小程序的appid和secret ,使用module.exports导出 在app.js里引用 同时使用superagent发起请求 把参数放到请求的网址里 在浏览器里调用一下 看看打印的内容

微信小程序开发问题踩坑整理,web-view、openID、小程序支付等汇总

微信小程序开发过程中遇到的问题踩坑整理,内容包括web-view.openID.小程序支付.网络请求等等一系列问题汇总,希望对大家能有一定帮助和启发. 内容如下: 关于小程序web-view bindmessage 真机不触发的问题 小程序iOS访问服务器访问不上,但android没有问题 关于ssl证书加密后小程序访问出错问题 微信拨打电话数据调用问题,如何一键拨号 后台php调用微信小程序接口获取openid,返回的是null 小程序图片显示问题,开发者工具显示,手机预览不显示 微信小程序支

后台生成带参跳到指定页面的小程序码

方法步骤如下: 1. 获取 access_token 详见:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183 2. 生成小程序码 接口B:适用于需要的码数量极多的业务场景 0)可接受页面参数较短 1)通过该接口生成的小程序码,永久有效 2)数量不做限制(截止今天,官方未对生成数量做限制) 3)用户扫码后,可以在对应页面获取到二维码中scene字段下面的值 4)B接口调用分钟频率受限(目前5000次/分钟,会调整)

小程序-将页面生成一个小程序码分享出去

这个需求我遇到过2次.一次是在识别二维码后跳转到其它页面,另一次是识别二维码后进入到生成小程序码的当前页面. 我有一个梦想,就是成为一名黑客!!!!!! 小程序中js wx.request({        url: '',        method: 'POST',        data: {        ModuleName: "",    //空间名 接口文档里每个接口会有标明 必填        MethodName: "GetQrCode",   

大牛带您微信小程序基础

前言什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画图"小程序等,小程序不同于APP一点的是,小程序成本低,前期宣传,可以靠扫描二维码,分享群,朋友圈等,来提高微信小程序的使用.无需安装即可下载的特点,也深受广大群众的喜欢.介绍小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务.小程序就是那

借助云开发10行代码生成小程序码,可以微信扫码快速进入指定小程序页

最近老有同学问我,如何生成小程序二维码,让用户扫码后能快速进入指定页面.经过一番研究,发现用云开发的云调用来实现特别方便,基本上10行代码就可以快速的生成指定页面的二维码.这样我们在做一些线下业务时就能让用户方便快速的进入到指定页面了,比如我们的点餐小程序,我们可以在二维码里绑定桌号,这样用户用微信扫码二维码,就可以快速的进入点餐页面了,并且可以识别到用户当前所在的桌号. 注意事项 我们生成的小程序码指定的页面,必须是你小程序已经发布,如果小程序还没有发布,获取小程序码绑定的页面不存在,扫码后就

C# 生成小程序码

1 /// <summary> 2 /// B接口-微信小程序带参数二维码的生成 3 /// </summary> 4 /// <param name="access_token"></param> 5 /// <returns></returns> 6 public static string CreateWxCode(string access_token string roomId) 7 { 8 string

微信公众平台功能开发(生成带参数的二维码)

为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 目前有2种类型的二维码,分别是临时二维码和永久二维码,前者有过期时间,最大为1800秒,但能够生成较多数量,后者无过期时间,数量较少(目前参数只支持1--100000).两种二维码分别适用于帐号绑定.用户来源统计等场景. 用户扫描带场景值二维码时,可能推送以下两种事件: 如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事