扫描普通二维码打开小程序

有这么一个使用场景,我们需要用户扫描一个二维码,然后打开我们的小程序查看详情。正好微信就有这么一个功能。

官方文档:https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E6%B5%8B%E8%AF%95%E8%B0%83%E8%AF%95

我感觉微信扫码打开小程序是这么一个逻辑:

假设说,我们有这么一个地址:www.xxx.com/aaa/ccc

在官网的教程成,是需要将校验的文件放在这个目录下的,也就是一个txt的文档。当微信扫描到这个二维码的时候,这个它应该先回去读取这个校验文件发现这是要打开的一个小程序,于是,微信就会打开我们的小程序到指定的页面,并把参数传递进去。

这里面一定要注意结果细节:

  1. 在开发的时候,需要使用的是用你的测试链接生成的二维码。这点我跟我的同事花了很长的时间才发现,因为我们生成二维码的页面是提前开发好了的,想着是扫任意一个二维码就好了,结果打开的全都不是开发版~

  2. 一个获取url参数的方法

export const getUrlParams = (url) => {
    const theRequest = {};
    if (url.indexOf('#') !== -1) {
        const str = url.split('#')[1];
        const strs = str.split('&');
        for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
        }
    }else if(url.indexOf('?') !== -1){
      const str = url.split('?')[1];
      const strs = str.split('&');
      for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
      }
    }
    return theRequest;
};
  1. 接收参数

接收参数在onload里面写

onLoad(option) {
  if (option.q) {
    //获取二维码的携带的链接信息
    let qrUrl = decodeURIComponent(option.q);
    const urlParams = getUrlParams(qrUrl)
  }
}

其他的话,感觉也没啥了。

你可能感兴趣的:(扫描普通二维码打开小程序)