随着支付宝,微信小程序的慢慢崛起,现在很多公司同一款程序都开发了四个版本.支付宝/微信小程序、安卓/iosAPP.但是随着程序的增加,引导用户使用就成了问题.比如,一家店门口如何贴一张二维码.实现用户扫描,跳转到不同app渠道.
目前支持扫描的除了手机本身的摄像头,常用的有三种:
微信扫描、支付宝扫描、手机自带浏览器内扫描
我们要实现这种效果,如果是微信扫描.根据二维码直接跳转到微信小程序,支付宝扫码直接跳转到支付宝小程序,如果用浏览器扫码.安卓手机跳转到安卓app,ios手机跳转到ios app.
我们知道,扫码跳转,其实码的内容就是一个url地址,而四种程序的地址肯定是不同的,如果要实现一码多用,我们就需要一个中转页,进入中转页之后,根据根据不同的条件,然后跳转到不同的app渠道.
在跨平台、浏览器、移动设备兼容的时候,要根据设备、浏览器做特定调整,所以我们经常会用到navigator.userAgent.toLowerCase()来进行判断.先来解释一下意思,navigator是HTML中的内置对象,包含浏览器的信息;userAgent是navigator的属性方法,可以返回由客户机发送服务器的头部的值,作用其实就是就是返回当前用户所使用的是什么浏览器,toLowerCase()是将转换为小写.
了解原理了就直接上代码:
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return 'wx';
} else if (ua.match(/alipayclient/i) == "alipayclient") {
return "zfb";
} else {
if (ua.match(/android/i) == "android") {
return 'android'
}else if(ua.match(/iphone/i) == "iphone" || ua.match(/ipad/i) == "ipad"){
return 'ios'
}
}ok上面我们知道了四种不同渠道了,接下来就是进行跳转了,这点需要注意,支付宝和小程序都是经过加密之后的短连接,支付宝通过,location.href='支付宝短连接地址'可以直接跳转到支付宝小程序,但是微信是不可以的,我们可以当微信扫描的时候,弹出微信小程序的二维码让用户长按识别自动跳转
安卓ios通过浏览器唤醒或者下载app的方法前面有分享,这里不从复了.有兴趣的取看看.
另,二维码也可以穿参数,只要协议制定好就可以.
注:如跳转微信公共号,只能传一个参数,因为多个参数,后面的参数微信会过滤掉,如果需要传多参,可以这样,比如?id=i&name=2换种规则 id_name=1_2.这样,之后再解析.
