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({});
	}
},

最后

以上就是诚心白猫为你收集整理的h5中打开app与app中打开的H5的全部内容，希望文章能够帮你解决h5中打开app与app中打开的H5所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。