移动端js开发中的二维码规则适配思路

手上正在做的一个项目需求，有很多线下的机器，每个机器上有一个固定的二维码，需支持微信h5、微信小程序、支付宝h5三平台，打开对应的页面或者是小程序。

我们总共有三套平台：微信小程序、微信h5、支付宝h5，功能与界面几乎完全相同，只是调用的框架不同

基本规则

• 微信扫码：低版本微信（不支持小程序）扫码后尝试打开链接；高版本微信扫码后打开微信小程序，具体打开哪个小程序需到微信公众平台进行url规则的配置
• 支付宝扫码：直接打开链接
• 其他工具扫码：直接打开链接

处理思路：

• 二维码中的url为不支持任何平台的中间页
• 每个机器上的url是同一个，但是后面带有不同的参数（机器的id），来标识每一台机器
• 微信小程序到公众平台配置url独占规则，用户扫码后微信并不会尝试打开网页，而是直接打开对应小程序
• 低版本微信、支付宝扫码后打开中间页，判断浏览器为微信或是支付宝后自动跳转对应平台下的h5页面
• 其他工具扫码、或是url后面没有参数（没有id）的话，打开中间页，显示广告信息等
• 不同的二维码可能会要求打开不同的页面，这种情况下，中间页根据url后代的参数进行判断并把参数拼到url上后跳转

小程序配置

进入微信公众平台，设置——开发设置

拉到底“扫描普通链接二维码打开小程序”，这里可以配置规则，当微信扫描到这个url时，会打开你的小程序

 

 

示例：

生成一个内含url为‘https://www.xxx.com/abc?data=123’的二维码，这个页面可以在任意浏览器中打开，页面初始内容为空白（防止微信支付宝用户出现先闪一下广告又出现页面的情况），通过navigator.userAgent判断是微信还是支付宝浏览器，然后自动跳转对应的产品页面。如果不是这两个浏览器，那么显示页面上的广告、说明等，引导用户通过微信或支付宝扫码打开。

在微信公众平台上配置https://www.xxx.com/abc链接打开自己的小程序并且独占规则即可。

(function () {
//获取url中的参数
    function GetQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) 
            return unescape(r[2]);
        return null;
    }
    var pileid = GetQueryString('pileid');//获取pileid参数
    var exchangeid = GetQueryString('exchangeid');//获取exchangeid参数
    if (pileid || exchangeid) {
        //根据url中的pileid或是exchangeid跳转对应的页面
        var params='';
        var page='';
        if(pileid){//有pileid跳转borrow页
            params = 'pileid=' + pileid;
            page = 'borrow';
        }else if(exchangeid){
            params = 'exchangeid=' + exchangeid;
            page = 'borrowExchange';//有exchangeid的跳转borrowExchange页面
        }
        if (navigator.userAgent.indexOf('Alipay') > -1) {
            console.log('是支付宝');
            window.location.href = 'http://m.xxx.com/alipay/' + page + '?' + params;
        } else if (navigator.userAgent.indexOf('MicroMessenger') > -1) {
            console.log('是微信');
            window.location.href = 'http://m.xxx.com/micro?'  + page + '?' + params;
        }else{
            console.log('普通浏览器');
            document.getElementsByClassName('container')[0].style.display='flex';//更改页面css将页面显示出来
        }
    }else{
        console.log('没有参数')
        document.getElementsByClassName('container')[0].style.display='flex';//更改页面css将页面显示出来
    }
})()