使用开发者工具模拟扫描进入小程序内容页

使用开发者工具模拟进入小程序的场景

使用开发者工具模拟启动小程序的参数.

 

在小程序中的 开发者工具里, 工具 -- 编译配置中可以配置小程序的编译条件,

如设置扫描二维码进入页面,如 

 



 

 

可以设置进入小程序的参数, 进入的场景,解析二维码.

对于复杂的业务场景调试非常方便, 如果 要调试扫描一个二维码进入某个订单详情的页面. 非常方便



 

 

 

文章目录
文章参考
问题描述
解决步骤
1.开发工具模拟扫描二维码进入小程序
2. 在进入小程序的界面

文章参考

微信小程序未发布 二维码图片如何扫描测试

问题描述
有个要识别二维码页面跳转的功能，想着怎么样模拟识别二维码呢，用开发工具扫描二维码应该不可能，如果是用手机扫，那么，怎么让手机跳转到我的开发代码中，而不是我发布的代码小程序中呢？
解决步骤
1.开发工具模拟扫描二维码进入小程序

通过二维码编译 启动小程序，然后运行的代码就是当前开发的代码


2. 在进入小程序的界面

传递的参数，特殊字符需要通过decodeURIComponent函数转码

// 获取扫描二维码传递过来的参数
onLoad(query) {
	console.log(query);
	// 传递的参数需要转码
	const scene = decodeURIComponent(query.scene);
	console.log(scene);
	this.qrcodeParam = scene;
},

bug步骤：

1.从微信端扫码进入小程序，二维码带参数，如：https://api.xxx.com/?id=aaa

2.app.js onLaunch中的query.q能获取id=aaa

3.右上角退出小程序，最近使用中有该小程序记录

4.再次从微信端扫码进入小程序，二维码带参数：https://api.xxx.com/?id=bbb

5.进到小程序中发现onLaunch中的query.q能获取的id还是aaa，而不是我刚扫描的bbb

6.右上角退出小程序，把最近使用删掉，从新从微信端扫码进入小程序https://api.xxx.com/?id=bbb

7.onLaunch中的query.q能获取id=bbb

 

bug原因分析：

onLaunch在小程序未销毁的情况下，你扫码进去多次，都只执行第一次。

 

bug解决方法：

在onShow方法里去接收参数。

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

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

问题分析：

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
}

通过微信扫码进入小程序体验版本
在配置普通链接二维码的页面中可以添加测试链接

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