微信扫普通链接二维码进入小程序

微信小程序在当前的技术环境中占据了大量市场。

此次接到客户需求，需求的描述很简洁：通过微信扫码，进入小程序并继续完成业务操作

问题分析：

1.通过微信扫码进入到小程序

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

开发配置

首先，如果生成一个微信能识别的二维码（可以使用草料二维码生成器https://cli.im生成二维码）

我们可以根据微信的开发文档（可以搜索普通链接二维码到文档页面）https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html

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

例如，医网信的链接前缀定义的是：https://www.xxx.com/miniprogram/business，则检验文件需要放到https://www.xxx.com/miniprogram目录下，不是business目录

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

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

通过二维码链接传递参数

在二维码前缀后通过?方式拼接，像get请求地址一样，示例一个二维码链接为：www.xxx.com/miniprogram/business?qrEntryType=sign&uniqueId=11111

在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
}

通过微信扫码进入小程序体验版本

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

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

微信扫普通链接二维码进入小程序

猜你喜欢