H5唤起 uniapp 版的app 端

1. 在 uniapp 中的manifest.json中配置UrlSchemes（相当于给app 留下个 key，可以在别的地方访问这个 key 就实现打开 APP 功能）

参考文档：https://uniapp.dcloud.net.cn/tutorial/app-android-schemes.html

2. 在vue 开发的h5中访问 app

2.1 检查当前环境是都是微信环境，如果是微信环境提示让他打开浏览器；

2.2 检查当前环境是安卓浏览器还是 ios 浏览器；

2.1 监测能直接打开 app 么，打不开就下载，能打开跳转到 app

<template><div class="goods" :style="background"><div class="header"><h4>共力生态APP</h4><h5>共商 | 共建 | 共享 | 共赢</h5></div><!-- 拼团商品 --><div class="login"><div class="login-hint"><van-imagewidth="80"height="80"radius="6"fit="cover":src="goods.cover"/><div class="goods-info" v-if="goods.active"><h4>{{ goods.name }}</h4><div class="has_pin"><div class="has_pined" v-if="goods.sales > 0"><van-iconname="fire"size="14"class="fire"color="#d81e06"/>已拼{{ goods.sales }}件</div><p>{{ goods.active.number }}人团</p></div><div class="money">{{ goods.active.price }}<span>DT积分</span></div></div></div></div><!-- 该团状态 --><div class="active"><!-- 注册成功 --><div class="active-top"><div class="title">一起拼团</div><div class="des">拼单成功后返等额DT积分</div></div><div class="active-avatars"><van-imagev-for="(item, index) in share.details":key="index"class="avatar"width="40"height="40"roundfit="cover":src="item.cover"/><div class="plus"><van-icon name="plus" color="#666" /></div></div><button class="login-button" @click="openapp">参与拼团</button></div><!-- 底部公司信息 --><div class="dowApp-flotter">共力生态 © 毗魅（海南）数字科技有限公司</div><!-- 弹窗提示用浏览器打开 --><van-popup v-model="show" class="popup-content" position="top" duration="0"><van-imageclass="popup-content-img":src="require('@/assets/prompt-icon.png')"/><div>请使用手机浏览器打开并下载</div></van-popup></div>
</template><script>
export default {name: "dowApp",data() {return {show: false,isLogin: false,phone: "",invitation: "",code: "",codeText: "获取验证码",codeState: false,background: {backgroundImage: "url(" + require("@/assets/code_back.png") + ")",backgroundSize: "cover",backgroundPosition: "center",},goods: {},share: {},};},created() {//获取携带的邀请码if (this.$route.query.invitation_code)this.invitation = this.$route.query.invitation_code;//禁止微信浏览器改变字体大小let WeixinJSBridge;if (typeof WeixinJSBridge == "object" &&typeof WeixinJSBridge.invoke == "function") {handleFontSize();} else {document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);}function handleFontSize() {// 设置网页字体为默认大小WeixinJSBridge.invoke("setFontSizeCallback", {fontSize: 0,});// 重写设置网页字体大小的事件WeixinJSBridge.on("menu:setfont", function () {WeixinJSBridge.invoke("setFontSizeCallback", {fontSize: 0,});});}},mounted() {let that = this;document.addEventListener("visibilitychange",function () {if (that.timer) {that.opening = false;clearTimeout(that.timer);}},false);that.getShareInfo();},methods: {// 获取当前页面数据getShareInfo() {let collage;if (this.$route.params.id && this.$route.params.id !== "") {collage = this.$route.params.id.split("invitation")[0];this.invitation = this.$route.params.id;}// http://api.gl.shangkelian.cn/api/ //测试// https://api.gongli.vip/api/  // 正式this.axios.get("http://api.gl.shangkelian.cn/api/mall/collages/" +collage +"/repages").then((res) => {this.goods = res.data.data.goods;this.share = res.data.data.share;});},// 监测是否是微信环境及监测当前是否是安卓环境openapp() {// 检查是否为微信浏览器let ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {this.show = true;return;}this.$copyText(this.$route.params.id);var u = navigator.userAgent;var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+ Mac OS X/);if (isAndroid) {this.android();}if (isIOS) {alert("IOS 系统努力开发中~耐心等待~");}},// 安卓环境 安装了 app  直接打开，未安装 app 直接跳转下载 appandroid() {var _clickTime = new Date().getTime();window.location.href = "gldao://pages/auth/auth?" + this.invitation;var _count = 0,intHandle;intHandle = setInterval(() => {_count++;var elsTime = new Date().getTime() - _clickTime;if (_count >= 100 || elsTime > 5000) {clearInterval(intHandle);if (document.hidden || document.webkitHidden) {window.location.href = "gldao://pages/auth/auth?" + this.invitation;window.close();// return;} else {// 安卓下载appthis.$toast.loading("获取版本地址...");this.dowApp();}}}, 20);},//下载AppdowApp() {//有邀请码和邀请码if (this.$route.query.invite && this.$route.query.invite !== "") {let code = this.$route.query.invite;this.$copyText(code);}this.axios.post("https://api.gongli.vip/api/app/version/androidurl", {}).then((res) => {if (res.data.data.url) {let appDowLink = document.createElement("a");appDowLink.style.display = "none";appDowLink.href = res.data.data.url;appDowLink.click();this.$toast.clear();} else {this.$toast("获取版本失败，请联系管理员");}});},},
};
</script><style scoped>
.goods {text-align: center;min-height: 100vh;display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-pack: center;background: #0a045b;position: relative;
}.header {text-align: center;color: white;font-size: 30px;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);padding-bottom: 50px;
}
.header h5,
.header h4 {margin: 0;
}
.header h5 {font-size: 16px;
}.login {z-index: 2;background: rgba(255, 255, 255, 0.9);width: 80vw;margin-left: 10vw;border-radius: 10px;padding: 20px 20px 30px;box-sizing: border-box;
}.login-title {font-weight: bold;font-size: 18px;line-height: 40px;color: #1d2473;
}.login-input {color: #1d2473;width: 100%;background: transparent;border: solid 2px #1d2473;height: 50px;border-radius: 25px;padding: 0 15px;box-sizing: border-box;font-size: 16px;margin-top: 15px;
}.login-button {margin-top: 20px;width: 100%;height: 50px;border-radius: 25px;border: none;font-weight: bold;color: white;background: #1d2473;
}.login-button.null {border: solid 2px #1d2473;background: transparent;box-sizing: border-box;color: #1d2473;
}.login-code {position: relative;background: transparent;border: solid 2px #1d2473;height: 50px;border-radius: 25px;margin-top: 15px;padding-right: 150px;padding-left: 15px;box-sizing: border-box;
}.login-code-btn {position: absolute;right: 3px;top: 3px;height: 40px;border-radius: 20px;border: none;width: 120px;font-size: 14px;color: white;background: #1d2473;
}
button.login-code-btn[disabled] {background: transparent;color: gray;
}
.login-code-input {width: 100%;height: 46px;padding: 0;border: none;background: transparent;font-size: 16px;
}
.active {margin-top: 15px;z-index: 2;background: rgba(255, 255, 255, 0.9);width: 80vw;margin-left: 10vw;border-radius: 10px;padding: 20px 20px 30px;box-sizing: border-box;
}
.active-top {display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;
}
.active-top .title {font-size: 18px;font-weight: bold;
}
.active-top .des {color: gray;font-size: 12px;padding-top: 2px;
}.active-avatars {display: flex;flex-direction: row;align-items: center;justify-content: center;box-sizing: border-box;margin-top: 15px;
}
.active-avatars .avatar {margin-right: 10px;
}.active-avatars .plus {background-color: #b6b6b649;border-radius: 50%;width: 40px;height: 40px;line-height: 40px;text-align: center;
}
/*app下载*/
.login-hint {/* height: 200px; */display: flex;flex-direction: row;justify-content: center;box-sizing: border-box;align-items: center;/* padding-top: 20px;background: pink; */
}.goods-info {display: flex;flex-direction: column;align-items: center;justify-content: flex-start;box-sizing: border-box;flex: 1;margin-left: 10px;
}
.goods-info .has_pin {width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: flex-start;box-sizing: border-box;
}
.has_pined {font-size: 10px;background-color: rgba(255, 0, 0, 0.1);padding: 2px 10px;border-radius: 10px;margin-top: 4px;color: #d81e06;
}
.has_pined .fire {padding-right: 4px;
}
.goods-info h4 {font-size: 16px;margin: 10px 0 0 0;text-align: left;font-weight: normal;overflow: hidden;width: 100%;max-width: 180px;white-space: nowrap;text-overflow: ellipsis;
}
.goods-info p {margin: 0;margin-left: 10px;padding: 4px 0 0;font-size: 13px;color: gray;text-align: left;
}
.goods-info .money {width: 100%;flex: row;display: flex;align-items: center;justify-content: flex-start;box-sizing: border-box;padding: 10px 0 0;font-size: 18px;font-weight: bold;color: #d81e06;
}
.goods-info .money span {padding-left: 6px;font-size: 10px !important;font-weight: normal;padding-top: 2px;
}
.dowApp-flotter {text-align: center;padding-top: 40px;font-size: 14px;color: white;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}/* 微信提示 */
.popup-content {background: transparent;text-align: right;color: white;font-size: 14px;padding: 15px;box-sizing: border-box;
}.popup-content-img {width: 100px;margin-bottom: 20px;
}
</style>

H5唤起 uniapp 版的app 端相关推荐

关于实现uni-app项目在APP端使用微信支付功能
首先在对项目开启支付功能,在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块,并将需要的信息填写完整,如下图除此之外还需要其他的一些配置,下面开结合图片来一步步的详 ...
uniapp全局弹窗(APP端)
uniapp自带的提示框不符合我们的要求,需要自己写一个提示框,且全局通用. 解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听. 官方文档 1. 首先创建一个整个屏幕的控件 ...
uni-app 如何在app端查看输入结果
Hbuilder编辑器->设置->运行配置->打开真机运行时打开调试视图
uni-app框架+app端+ethers.js库+以太坊开发+常见错误
uni-app框架常见错误解决方案: app端如果不使用兼容的ethers.js库,uni-app框架会报错: * reportJSException > ...
宝藏级UI组件库：FirstUI，微信小程序版+uniapp版双版至V1.5.0，完美支持vue3
First UI(https://www.firstui.cn/)是一套超高性能.超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库.强大的功能库.丰富精美的模板库,提供uni-app(完美支持n ...
uniapp+canvas实现app在线电子签名
项目基于uniapp做的app端,需要实现在线签名功能,找了很多文档学习参考,特此记录. template中, <view class="onevalue">// 展示 ...
uni-app 滑到一定位置固定某个元素在顶部吸顶解决方案 APP端 H5端
uni-app 滑到一定位置固定某个元素在顶部吸顶实例 APP端吸顶完美吸顶方案 uView uniapp组件库 //通过offset-top参数设置组件在吸顶时与顶部的距离 <u-stic ...
uni-app图片选择转base64问题，H5与APP端相关实现
前言本文章是基于uni-app的uView去实现的. <u-upload ref="uUpload" :max-size="5 * 1024 * 1024&quo ...
uniApp 新闻详情页语音播报，百度语音合成app端、H5端语音播报实例
非常轻便的语音合成接口,可以用于新闻详情页语音播报,实例功能: 点击"播放"按钮播放新闻详情页面的内容,播放按钮文字也图标变为"暂停",再点击重新播放. 实例用 ...
uniapp proxy配置代理在h5端和app端
proxy代理uniapp官网明确指出配置是在h5属性下进行配置,由于app端是不存在跨域的情况,不存在跨域的情况,所以不需要考虑app端代理,只需要将配置信息配对就可以了我是用的uview封装的请 ...

H5唤起 uniapp 版的app 端

1. 在 uniapp 中的manifest.json中配置UrlSchemes（相当于给app 留下个 key，可以在别的地方访问这个 key 就实现打开 APP 功能）

2. 在vue 开发的h5中访问 app

2.1 检查当前环境是都是微信环境，如果是微信环境提示让他打开浏览器；

2.2 检查当前环境是安卓浏览器还是 ios 浏览器；

2.1 监测能直接打开 app 么，打不开就下载，能打开跳转到 app

H5唤起 uniapp 版的app 端相关推荐

最新文章

热门文章

H5唤起 uniapp 版的app 端

1. 在 uniapp 中的manifest.json中配置UrlSchemes（相当于给app 留下个 key，可以在别的地方访问这个 key 就实现打开 APP 功能）

2. 在vue 开发的h5中访问 app

2.1 检查当前环境是都是微信环境，如果是微信环境 提示让他打开浏览器；

2.2 检查当前环境是安卓浏览器还是 ios 浏览器；

2.1 监测能直接打开 app 么 ，打不开就下载，能打开跳转到 app

H5唤起 uniapp 版的app 端相关推荐

最新文章

热门文章

2.1 检查当前环境是都是微信环境，如果是微信环境提示让他打开浏览器；

2.1 监测能直接打开 app 么，打不开就下载，能打开跳转到 app