扫二维码打开小程序
目录
扫二维码打开小程序
需求:通过微信扫码,进入小程序并继续完成业务操作
问题分析:
1.通过微信扫码进入到小程序(又叫 普通链接二维码)
2.进入小程序后需要引导用户进行业务操作
3.开发过程中怎么测试验证?(通过配置体验版链接)
- 开发配置
首先,如果生成一个微信能识别的二维码(可以使用草料二维码生成器 生成二维码)
我们可以根据微信的开发文档(可以搜索普通链接二维码到文档页面)
让运维同学进行协助处理,将校验文件添加到指定位置
例如,《xx小程序》的链接前缀定义的是: ,则检验文件需要放到 目录下, 不是 目录
配置好二维码规则以及小程序功能页面后可以保存并发布(配置该页面,在微信扫码后会进入到onLoad函数中,且会将二维码内容通过参数传递过来)
配置路径:登录后台->开发(左侧)→开发设置→ 扫普通链接二维码打开小程序 (滑动到底部)
- 通过二维码链接传递参数
在二维码前缀后通过?方式拼接,像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
}
- 通过微信扫码进入小程序体验版本
在配置普通链接二维码的页面中可以添加测试链接
敲黑板: 如果需要跳转到体验版本,二维码的内容一定需要配置在测试链接中,一个标点都不能有差别,否则,微信扫码后会跳转到正式版本