微信小程序生成二维码踩坑

qylcx7758
8,699 阅读3分钟

微信小程序生成二维码踩坑

一、写在前头的话，编写时间为2019年09月24日，在此时有效

  1. 因为从微信开放社区的说法来看，现在（201909）小程序菊花码是没有体验版的，所以通过生成小程序码生成的菊花码是线上环境的，所以测试时手机识别这个二维码进入的是线上的小程序，不方便测试； 现知道的婉转的测试方法，最终还是需要直接到线上环境测试：
  • 开发工具，编译模式选择通过二维码编译来测试这个生成的菊花码
  • 开发工具，添加编译模式，添加参数来调试，注意有的接口参数需要encodeURIComponent
  • 开发工具，添加编译模式后，通过预览或者真机调试生成带时限的二维码，扫这个二维码进行测试

  1. 在微信公众平台后台管理页面，右上方，工具>生成小程序码可以生成指定路径的小程序码，不过现在的版本携带参数似乎有坑，参考小程序后台的"生成小程序码"如何带参数

  2. 通过草料二维码、芝麻二维码等生成带指定参数的二维码，不过这些第三方应用需要授权或者小程序秘钥等；

  3. 小程序二维码后端和前端都能生成，我这里是前端生成的方法生成小程序码，下边的内容是采用第一种方法生成二维码的一些介绍；

二、 使用生成小程序码接口前准备

  1. 按照文档而言，有三种接口生成二维码，不复制文档了，每个接口都可以通过HTTPS调用和云调用来获取小程序码，我介绍的是通过HTTPS调用；

  2. 以上的三种方法，都是需要access_token参数来进行后台请求的，比如：

请求地址

POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

  1. 生成access_token
  • access_token是变化的，所以需要通过接口调用凭证接口来获取，这个接口请求是需要2个关键参数AppId和AppSecret
  1. 获取AppId和AppSecret
  • AppId在小程序的管理后台可以看到，而AppSecret是隐藏的，而且不能轻易重置，重置会导致原先后台使用这个AppSecret的所有地方都需要更改，而AppSecret一般后台代码会有写的，所以可以找后台的同事要；
  1. 获取AppId和AppSecret参数后，通过前端代码内编写http请求或者postMan等工具，请求以下地址，来获取带时效的AppSecret

请求地址

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

三、对获取小程序码的接口调用注意事项

  1. 因为生成的二维码都是永久有效的，主要差别是请求接口生成二维码数量是否限制，但是如果只需要生成少量二维码，用在其他场景扫描识别二维码进入小程序的话，三种接口都可以；
  2. 不同的接口调用很多坑的--.；
  3. 第二种方法建议参考js生成小程序某页面二维码（生成小程序二维码），亲测可用（就这样贴文章，以后有时间再整理==。）；
  4. 第二种方法是将参数放在scene内，所以获取这个参数，是在onload时识别options.scene;
  5. 用上述链接方法生成后，在小程序的network内的preview可用看到二维码，或者通过将图片信息转成base64格式后，在img标签内添加引用；
    success(res) {
        console.log(res)
        let src = wx.arrayBufferToBase64(res.data);  //对数据进行转换操作
    }

    <img src="data:image/png;base64,{{src}}"/>

通过上述方式，在网页或者小程序上生成可用下载复制的二维码图片；

avatar
文章
阅读
粉丝