小编给大家分享一下VUE使用wx-open-launch-app组件如何开发微信打开APP的功能，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

在微信中开发使用vue框架，通过 wx-open-launch-app 微信自定义注册组件开发 微信H5打开app功能

template

<template><divclass="beva-home"><!--=====微信浏览器打开贝瓦APP=====--><divclass="weixin-open-app"v-if="openAppState"><imgclass="close-icon":src="icon.close"alt="关闭"@click="handleCloseOpenAppMask"><divclass="detail">微信端暂不支持音视频播放，请到APP观看收听。</div><divclass="open-btn"v-if="!wechatState"@click="handleOpenBevaApp">打开贝瓦儿歌APP</div><divclass=""v-else><wx-open-launch-appid="launch-btn"@error="handleErrorFn"@launch="handleLaunchFn"appid="wxd8799b17ff675637"extinfo="这里是微信H5传递给APP的指定参数"><scripttype="text/wxtag-template"><style>.btn{display:flex;align-items:center;}</style><divclass="btn">前往贝瓦儿歌</div></script></wx-open-launch-app></div></div></div></template>

script

<script>exportdefault{data(){return{wechatState:false,//是否显示微信打开app功能按钮icon:{close:require("../../assets/close.png")},openAppState:false,//显示打开app的按钮}},methods:{/***判断当前的环境是否为微信环境且版本大于指定版本*/handleJudgeWechat(){letwechat=navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);letjudgewechat=wechat[1].split('.')if(judgewechat[0]>=7){if(judgewechat[1]>=0){if(judgewechat[2]>=12){this.wechatState=trueconsole.log("当前符合h6打开指定app")}}}},/***打开应用宝下载页面*/handleOpenBevaApp(){window.location.href="https://a.app.qq.com/o/simple.jsp&#63;pkgname=com.slanissue.apps.mobile.erge&g_f=******"},/***监听error函数*/handleErrorFn(e){this.$data.wechatOpenAppData="【这里是error函数】"+JSON.stringify(e)if(e.isTrusted==false){//alert("跳转失败")window.open("https://a.app.qq.com/o/simple.jsp&#63;pkgname=com.slanissue.apps.mobile.erge&g_f=******")}},/***监听launch函数*/handleLaunchFn(e){this.$data.wechatOpenAppData="【这里是launch函数】"+JSON.stringify(e)},/***配置当前页面分享信息*/handleWeixinShare(){this.$weixin.share({imgUrl:window.location.origin+require("../../assets/logo.png"),title:"贝瓦儿歌-推荐首页",desc:"海量精品课程，尽在贝瓦儿歌APP！",link:window.location.href})},/***关闭弹框打开贝瓦儿歌app*/handleCloseOpenAppMask(){this.$data.openAppState=false},},mounted(){this.handleWeixinShare()console.log("【贝瓦首页初始化】")this.handleJudgeWechat()//获取homelist组件传递过来的打开app的显示状态this.bus.$on("openAPP",res=>{console.log("openapp")if(res.type){this.$data.openAppState=true}})}}</script>

现在只是再做一个笔记，后续等现阶段开发完毕了，在详细梳理一下教程。可以看一下效果图。

在微信开发者工具上显示：开发者工具由于不满足微信打开app的版本信息，所以显示的自己写的一个默认样式。

在真机上显示：
在真机上因为当前环境版本支持打开app功能，所以当前展示的真实的情况。

看完了这篇文章，相信你对VUE使用wx-open-launch-app组件如何开发微信打开APP的功能有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！