h5中打开app与app中打开的H5

这里主要是解决h5开发配合app时遇到的问题,如何判断在app中打开了我们的项目
在vue开发中

npm install ua-device -D

装好后在App.vue中
import UA from "ua-device";


isApp(){
  let str="Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0    (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3";
  let ua = window.navigator.userAgent.toLowerCase();
  let out = new UA(str);
  //这里的qbjk属性是安卓/ios在userAgent中自定义的,我们去判断一下有没有这个属性就知道是不是从app打开的了
  if (out.qbjk!=undefined) {
		//是app内部
  } else {
		//非app内部
  }
}

在h5中如何打开app,未安装时自动跳转下载
先安装好这个组件“callapp-lib”


import CallApp from "callapp-lib";
//参数解析说明
data() {
		return {
			website: {
			  appMark:"",//要打开的APP的标识-数据提供来自苹果
			  appStore:"",//苹果应用商店地址-数据提供来自苹果
			  packageName:"",//包名-数据提供来自安卓
			  appAddr:"",//应用宝地址-数据提供来自安卓
			},
		};
},
//
is_weixn() {
	let ua = window.navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		return true;
	} else {
		return false;
	}
},
openApp() {
    // 微信浏览器貌似无法直接打开app所以在微信浏览器中打开时做好提示让其在其他浏览器打开
	if (this.is_weixn()) {
		this.getIsOpenDownTig(true);//这是我自己写的一个公用微信浏览器提示弹窗,不用在意
	} else {
		const options = {
		  scheme: { protocol: this.website.appMark }, //要打开的 APP 的标识
		  intent: {
				package: this.website.packageName, //包名
				scheme: "weixin",
		  },
		  //apple store
		  appstore: this.website.appStore,
		  //应用宝
		  yinyongbao: this.website.appAddr,
		  fallback:"https://a.app.qq.com/o/simple.jsp?pkgname=" +
						this.website.packageName, //唤端失败后跳转的地址
		};
		const callLib = new CallApp(options);
		callLib.open({});
	}
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值