使用微信开放标签wx-open-launch-app实现从h5跳转至app

官方文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22

前期准备：在使用该标签之前，首先需要前往微信开放平台的管理中心 - 公众账号或小程序详情 - 接口信息 - 网页跳转移动应用 - 关联设置中绑定所需要跳转的App.

跳转app按钮封装：

<template><div class="openAppBtn"><wx-open-launch-app id="launch-btn" appid="上图的appID"><div v-is="'script'" type="text/wxtag-template"><button :style="btnStyle">{{btnText}}</button></div></wx-open-launch-app></div>
</template><script>
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {props: {btnStyle: { default: {} },btnText: { default: '' }},setup(props, { emit }) {const router = useRouter()const route = useRoute()
const isIos=()=>{return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
}onMounted(() => {var btn = document.getElementById('launch-btn')btn.addEventListener('launch', function (e) {console.log('success')})btn.addEventListener('error', function (e) {console.log('fail', e.detail)if (isIos()) {window.location.href ='ios下载地址'} else {emit('openAnApp');//安卓需要弹窗提示}})})}
}
</script><style>
</style>

使用跳转app按钮组件

<template><div class="wxPublicToApp"><div class="btn" v-if="data?.isInWexin&&data?.isIos"><WxOpenApp btnText="打开" :btnStyle="btnStyle"></WxOpenApp></div><div class="btn" v-else @click="gotoApp">打开</div><div class="modal" v-if="data.showModal">这里是安卓提示打开浏览器</div></div>
</template>
<script>
import { onMounted, reactive, ref } from 'vue'
import WxOpenApp from '/components/openAppBtn'
import { isInWexin, isIos } from '@/utils'import { useRoute, useRouter } from 'vue-router'
export default {
components: { WxOpenApp },setup() {const route = useRoute()const router = useRouter()const data = reactive({showModal: false,isInWexin: isInWexin(),isIos: isIos()})const btnStyle = ref({height: '88px',width: '340px',border: 'none',background: '#036EFF',textAlign: 'center',fontSize: '20px',lineHeight: '88px',borderRadius: '44px',color: '#FFF'})// 下载app的方法const gotoAppFunc = () => {if (isInWexin()) {data.showModal = true} else {//这里调用下载方法
if(安卓机){window.location.href = ' app地址'setTimeout(() => {window.location.href = 'app下载地址'}, 500)
}else{window.location.href = ' app地址'setTimeout(function () {let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHiddenif (typeof hidden == "undefined" || hidden == false) {//App store下载地址window.location.href = 'app下载地址';}}, 100);
}}}
}
}
</script>

实现效果：

iOS可以直接在微信中打开app，没有app的提示跳转appstore

我司安卓打不开。。。没实现效果

特别注意：

只有通过微信卡片，二维码扫码，公众号推送等方式wx-open-launch-app才生效。通过聊天对话框发送链接打开的不生效

使用微信开放标签wx-open-launch-app实现从h5跳转至app相关推荐

微信开放标签＜wx-open-launch-app＞之Vue项目H5唤醒APP
微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP 在微信开放标签出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link ...
微信开放标签wx-open-launch-app唤醒app踩坑记录,launch:fail问题解决
微信开放标签调试了一天,各方面都正常,但是一直报错launch:fail,百思不得其解,早网上搜答案,辛得指点,原来问题如下如果要唤醒app,必须使用sdk生成的卡片,或者使用微信开发者工具的浏览功 ...
微信开放标签--H5唤醒手机app/跳转微信小程序
木剑前提代码注意前提微信版本要求为:7.0.12及以上系统版本要求为:iOS 10.3及以上.Android 5.0及以上与微信小程序绑定的微信公众号必须为已认证的服务号让专门管理微信 ...
微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置
H5.微信.App唤端相关一.微信分享二.浏览器H5跳转到APP 三.微信H5跳转到APP 一.条件说明二.文档三.重要的设置四.注意点五.样式设置一.微信分享参看:微信分享:后端参数 ...
vue与微信开放标签，调起app
使用微信开放标签 <wx-open-launch-app></wx-open-launch-app>调起分享到微信网页中的app 此开放标签只能在线上显示,本地与测试环境均不显 ...
微信开放标签使用注意说明
先放上微信开放标签开发文档链接目录 | 微信开放文档开放对象已认证的服务号,服务号绑定"JS接口安全域名"下的网页可使用此标签跳转任意合法合规的小程序. 已认证的非个人主体的 ...
微信开放标签wx-open-launch-weapp实现点击跳转到微信小程序
一.微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤.如果是公众号身份的网页,需要绑定安全域名.具体参见微信开放文档二.vue.config.js配置因为在vue项目中,直接使 ...
微信开放标签踩坑记录
先上微信官方文档微信文档以下要注意的点: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 微信sdk版本需要在1.6.0以上,版本过低 ...
微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞
微信开放标签说明文档使用微信开放标签前置条件 1.绑定域名登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名" 2 ...
使用微信开放标签＜wx-open-launch-weapp＞的踩坑日记
最近在完成H5跳转小程序需求时,使用到了微信官方退出的开放标签<wx-open-launch-weapp>,来谈一谈使用的心得和不足. 1.适用环境微信版本要求为:7.0.12及以上. ...