目录

扫二维码打开小程序

扫二维码打开小程序

需求:通过微信扫码,进入小程序并继续完成业务操作

问题分析:

1.通过微信扫码进入到小程序(又叫 普通链接二维码)

2.进入小程序后需要引导用户进行业务操作

3.开发过程中怎么测试验证?(通过配置体验版链接)

  • 开发配置

首先,如果生成一个微信能识别的二维码(可以使用草料二维码生成器 生成二维码)

我们可以根据微信的开发文档(可以搜索普通链接二维码到文档页面)

让运维同学进行协助处理,将校验文件添加到指定位置

例如,《xx小程序》的链接前缀定义的是: ,则检验文件需要放到 目录下, 不是 目录

配置好二维码规则以及小程序功能页面后可以保存并发布(配置该页面,在微信扫码后会进入到onLoad函数中,且会将二维码内容通过参数传递过来)

配置路径:登录后台->开发(左侧)→开发设置→ 扫普通链接二维码打开小程序 (滑动到底部)

https://i-blog.csdnimg.cn/blog_migrate/d623970557768d0fd8d0ba29ab7ec141.png https://i-blog.csdnimg.cn/blog_migrate/7fabb027f8d5edb40ba50eae5c4f0dfa.png https://i-blog.csdnimg.cn/blog_migrate/57aee8c177840b4502be53164ba5083c.png

  • 通过二维码链接传递参数

在二维码前缀后通过?方式拼接,像get请求地址一样,示例一个二维码链接为:

在onLoad函数中对数据进行处理(官方文档中有说明)

原则上,二维码的内容主要有两个:业务类型qrEntryType、业务唯一标识uniqueId,后续逻辑都在内部处理

onLoad (options) {
  let query = options.q
  let params = this.getQueryParams(query)
  // todo 业务流转
},
// ... more
 
getQueryParams (queryString) {
    // 微信扫码得到的内容进行了一次编码,所以官方要求需要进行decodeURIComponent一次
    queryString = decodeURIComponent(queryString)
    let params = {}
    if (queryString) {
      let queryArray = queryString.split('?')
      if (queryArray.length > 1) {
        let query = queryArray[1]
        let array = query.split('&')
        array.map((value) => {
          let valueArray = value.split('=')
          if (valueArray.length > 1) {
            // 还需要对value进行解码(可能涉及到在value为中文字符,在赋值到二维码前进行了encodeURI编码)
            Object.assign(params, { [valueArray[0]]: decodeURI(valueArray[1]) })
          }
        })
      }
    }
    return params
}
  • 通过微信扫码进入小程序体验版本

在配置普通链接二维码的页面中可以添加测试链接

敲黑板: 如果需要跳转到体验版本,二维码的内容一定需要配置在测试链接中,一个标点都不能有差别,否则,微信扫码后会跳转到正式版本

https://i-blog.csdnimg.cn/blog_migrate/2121f0917f36c7eeb04682b16d338626.png