微信扫一扫 - 实现签到功能 - 思路

（1）登录微信公众平台

打开微信公众平台 - 手机微信扫一扫 - 选择自己开发的某小程序微信公众平台微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。https://mp.weixin.qq.com/

（2）设置小程序码（实质为链接）

微信公众平台 - 开发 - 开发管理 - 开发设置 - 扫普通链接二维码打开小程序 - 添加 - 填写普通链接二维码地址详情

得到：如：https://mp.weixin.qq.com/pages/signIn/signIn?id=123

mp.weixin.qq.com为项目域名；pages/signIn/signIn为小程序签到页面；

id为实现签到功能要的参数；

（3）后端将该链接转为二维码

将 https://mp.weixin.qq.com/pages/signIn/signIn.html?id=123转化成二维码，注意在页面尾部添加.html

（4）前端获取二维码参数

当用户使用微信扫一扫-扫描二维码打开小程序时，微信会获取二维码的信息，这些信息会随着小程序的启动事件一起传递给小程序；

       onLoad(options) {
           //在此函数中获取扫描普通链接二维码参数
           if(options.q){
           let q = decodeURIComponent(options.q);
           this.id = this.getQueryString(q, 'id');
           }
       },

           // 获取参数的值
           getQueryString(url, name) {
           // (^|&|/?)：匹配字符串的开始; [^&|/?]* 表示匹配零个或多个不是 &、|、/ 或 ? 的字符;
           // (&|/|/?|$)表示匹配 & 或 / 后跟 ?或字符串的结束 $; 'i': 表示忽略大小写进行匹配
           // 匹配 URL 中指定参数名的参数值，考虑了参数可能出现在 URL 的起始位置、中间位置或结尾位置，以及参数值之前可能有斜杠的情况
           var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
           // 从索引位置 1（即去掉了字符串开头的第一个字符）开始截取;match 方法会返回匹配到的结果，如果没有匹配到，则返回 null
           // r = ["uuid=456", "uuid", "456", index: 25, input: "ttps://example.com/page?id=123&type=signIn&uuid=456"]
           var r = url.substr(1).match(reg)
           if (r != null) {
           return r[2]
           }
           return null;
           },

（5）效果

微信扫一扫后端生成的二维码，将会跳转至小程序的signIn页面（并携带二维码中的参数）

微信扫一扫 - 实现签到功能 - 思路

猜你喜欢