小程序完整生成小程序码-原创手记-慕课网

开发前准备

本文首先假定开发者已经粗略阅读过微信小程序的开发文档，所以注册小程序的流程就不介绍了。这里我们先看下生成小程序码的官方文档

1.首先我们确定开发者在app.json中已经注册了相应的页面，当然你的pages目录下也有相应的页面，且必须是已经上线的小程序，否则生成码后会提示找不到相应页面，这里我们就使用[pages/index/index]为例。

image.png

2.然后我们需要拿到Access_token。关于获取Access_token官方文档里也有介绍，进入小程序后台，点击左侧「设置」，找到「开发设置」，我们就能找到AppSecret一项。点击「获取」或「重置」，扫码之后，网页就会显示新的AppSecret。

需要注意的是，如果你之前生成过新的AppSecret，那么旧的AppSecret会随这个操作而失效。然后在官方测试网站获取到Access_token,走到这里我们就完成基础的一步了

image.png

3.接着我们继续看文档，官方提供了3个获取小程序码的接口：

接口A：适用于需要的码数量较少的业务场景（生成小程序码，可接受path参数较长，生成个数受限）
接口B：适用于需要的码数量极多的业务场景（生成小程序码，可接受页面参数较短，生成个数不受限）
接口C：适用于需要的码数量较少的业务场景（生成二维码，可接受path参数较长，生成个数受限）

image.png

我们要利用AppId和AppSecret，获取AccessToken
这一步，我们请求的地址是:
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appId=(小程序Id)&secret=(小程序后台的AppSecret)，我们需要使用GET方法，传递你的AppID和AppSecret。
grant_type 获取access_token填写client_credential
appid 第三方用户唯一凭证
secret第三方用户唯一凭证密钥，即Appsecret
在本例，我们使用postman模拟请求的方式，让大家了解这个接口的使用方法和原理。

image.png

从结果中（emmmm我就没去拿真实的AppId和Appsecret了）我们可以得知：执行这个操作后，微信会给你返回一个JSON数据包。解析这个数据包，我们就可以获得AccessToken。

假如我们需要生成的码扫码后打开具体页面：入参path：pages/index/index

接口A：https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

image.png

接口C：https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

image.png

至于接口B：https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
这个接口就是重中之重了。基本上所有的小程序码都是通过这个接口获取到的（因为不限制数量啊）
跟其他两个接口不一样的地方在于：
a)入参从path变为page了，不可携带参数（path可以携带）
b)需要的参数需要单独通过scene字段上传，然后需要在你生成小程序码的页面里拿到scene字段解析后做页面逻辑处理。

image.png

需要注意的是：

因为前端获取Access_token不安全，且前端请求接口后拿到的是一个二进制图片流文件，需要后端进行转换，所以建议生成小程序码这一块让后端来操作。我们只需要传入要生成的路径以及参数即可

let postData = {    scene: `pid=${this.data.partJobId}&sid=${this.data.shareUserId}`,    page: 'pages/partJob/partJob'}//这里的调用请求方法是封装过的，只做示例。this.postAjax(url, postData).then((res)) {  if (res.success) {   //后端返回的图片url地址
  } else {
    toast(res.errMsg)  
  }
}

附上后端解析二进制流生成图片的地址

页面内进行解析：

这是部分业务代码，因为scene最大32个可见字符，只支持数字，大小写英文以及部分特殊字符，所以我们的业务Id就已经是超出这个长度了。所以我们需要与后端进行约定sid为shareUserId，pid为partJobId，最后跟获取到的Id进行映射即可做后续操作.

//页面初始化加载
  onLoad(options) {    if (!options.scene) {      this.setData({        partJobId: options.partJobId,        shareUserId: options.shareUserId || '',        authorizedKey: options.authorizedKey || ''
      })
    } else {      var getQueryString = new Object()      var strs = decodeURIComponent(options.scene).split('&') //以&分割
      //取得全部并赋值
      for (var i = 0; i < strs.length; i++) {
        getQueryString[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
      }      this.setData({        partJobId: getQueryString['pid'] ? getQueryString['pid'] : '',        shareUserId: getQueryString['sid'] ? getQueryString['sid'] : ''
      })
    }
  }

image.png

最后：生成码后如何调试？？？

因为生成的码扫码打开后是生产环境的小程序，所以生成的码的页面必须是线上已有的小程序页面。
调试使用开发者工具的编译模式即可。只要配置好参数，测试后如果没问题上线后也是没问题的。

image.png

生成小程序码常见的Q&A

1.前端生成的码是乱码的？

image.png

前面已经说过了，前端生成的码就是一个二进制的流文件，所以转换交给后端即可。再贴一下后端转换二进制流为图片的地址
2.生成的小程序码偶现是空白的。
确定路径是线上的路径，偶现生成码是这样的

image

这个问题是你的Access_token过期了。因为如果你在本地测试小程序码，本地拿到Access_token，线上的Access_token可能就失效了，然后就会跪咯，就看你的Access_token的缓存机制了。

image.png

还有其他细节问题的可以联系邮箱minchangyong@qtshe.com或者QQ8662054.

附上成品体验小程序【青团社兼职实习】，微信里搜索兼职即可，可从服务直达区进入小程序。

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界

作者：一个被床封印的程序猿
链接：https://www.jianshu.com/p/1713f23360de