一、项目需求
最近公司项目有个需求,在PC端扫描二维码进入小程序的指定页面,一开始以为没这个方法,毕竟将近一年没做小程序了,试着到官方文档查看了一下,确实提供了扫普通二维码进入小程序,官方文档:扫普通二维码进入小程序
二、实现步骤
通读了两三遍文档,个人觉得大体分三步,来实现项目需求。
step1:开启扫描二维码打开小程序
登录小程序后台,进入“开发-开发设置-扫普通链接二维码打开小程序”,开启功能后即可配置二维码规则。
step2:配置二维码
1、填写二维码
二维码规则:
- 二维码规则的域名须通过ICP备案的验证。
- 支持http、https、ftp开头的链接(如:http://wx.qq.com、https://wx.qq.com/mp/、https://wx.qq.com/mp?id=123)
- 一个小程序帐号可配置不多于10个二维码前缀规则。
2、校验文件
下载随机校验文件,并将文件上传至服务器指定位置的目录下,方可通过所属权校验。
我是在服务器指定目录新建一个文件夹,然后把随机生成的xxx.txt文件上传到这个目录,然后根据二维码规则配置,例如:http://ok2etest.xinyusoft.com/weShare/test/?id=111。
注意:上线时需要配置https开头的链接。配置时可使用原来的xxx.txt校验文件,因为生成的文件是一样的。
3、小程序功能页面
小程序功能页面可打开指定页面,扫描二维码可打开对应页面。
step3:扫描二维码打开小程序
配置二维码时可配置测试链接,利用第三方二维码生成工具,使用测试链接生成二维码,利用微信“扫一扫”或微信内长按识别二维码跳转小程序。
链接?后为参数部分,可在onLoad事件中提取q
参数并自行decodeURIComponent
一次,即可获取原二维码的完整内容。
onLoad: function (options) {
if (options.q) {
let queryAll = decodeURIComponent(options.q);
let id = gup('id', queryAll);
//console.log(queryAll);
//console.log(id);
}
},
/**
* 获取URL中某个字符串字段
* gup('id', 'https://www.lubanso.com/wx/home/?id=bHViYW5zb7W7DJI=&jhkfdhkjfda')
* //===> bHViYW5zb7W7DJI=
*/
function gup(name, url) {
if (!url) url = location.href;
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(url);
return results == null ? null : results[1];
}
三、注意事项
- 开放范围:企业、媒体、政府及其他组织类型小程序。
- 对于普通链接二维码,目前支持使用微信“扫一扫”或微信内长按识别二维码跳转小程序。
- 上线时需要配置https开头的链接,并且配置指定域名。
- 上线时,需要发布二维码规则才可使用。
- 填写符合二维码前缀匹配规则的二维码完整链接用于测试,如包括参数,请完整填写。
GitHub地址,欢迎start:
扫描普通二维码打开小程序实例
参考文章:
扫描普通二维码打开小程序