这次分享可能比较适合小白,大神们多多指教哈!为什么这么说呢,因为我之前都是做pc,或者小程序、rn 什么的,原生app内嵌h5这种还是第一次。
最近提了个需求:app下载页 如果当前应用已经安装就直接打开scheme全路径对应的页面,没有安装就点击去下载页面,大致业务流程如下
都确定了就开搞吧,刚开始就是按照传统的思维来一步一步的 做各种判断,但是发现有些浏览器,还要做内核判断,打开方式做特殊处理,当时仿照的就是支付宝做吗 ,做了个测试demo自测发现支付宝在UC上面可以调起app,虽然UC大部分人不会做默认浏览器,但是也算是常用的吧 ,百度,qq浏览器这些就不考虑了因为做了限制是不允许这种操作的,然后又一顿🍵一顿搞。。。。最终的解决方案来了!!!!!
在找的过程中发现了一个插件 callapp-lib
直接上代码吧:
npm install --save callapp-lib // install成功后页面直接引用 import CallApp from 'callapp-lib';
openApp() {
const options = {
scheme: {
protocol: ''//APP 协议,URL Scheme 的 scheme 字段,就是你要打开的 APP 的标识
},
appstore:'' ,//填写appstore的下载地址
yingyongbao: '',//填写应用宝的下载地址
fallback: '',//填写唤端失败后跳转的地址
//小技巧哈!要是仿照支付宝这种检测没有app后,点击打开app留在当前页面,appstore、yingyongbao、
//fallback都写当前地址就好了window.location.href获取一下就好了
timeout: 5000,
};
const callLib = new CallApp(options);
callLib.open({
param: '',
path: ''
});
//小技巧哈!这里因为后台直接返回没有Scheme的路径部分所以路由信息和参数是在
//一起我就懒得处理了就直接给到path也可以正常执行的比如:
// Scheme:///aaaa/bbbb?login=1 整体路径
// /aaaa/bbbb?login=1 path部分直接赋值上去就不用在处理参数问题了
console.log(callLib.generateScheme({
//打印最终路径。。。。
}));
},
然后就是mounted调用一下页面打开先执行一次,然后把这个openApp再绑定在 ‘打开app’ 的元素上面就ok了亲测好用!!!!省时省力
至于那些原理上面的东西就不多说了,,但是想了解的话百度那种手写的那种看看就有很大帮助的,能多学到一点,好啦。就这样。。下班下班!!!