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

(1)登录微信公众平台

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

(2)设置小程序码(实质为链接)        

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

得到:如:https://mp.weixin.qq.com/pages/signIn/signIn

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

注意:测试链接配置时不写参数,只写 “二维码规则+小程序功能页面”,功能页面后不加.html 

(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页面(并携带二维码中的参数)

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值