VUE使用 wx-open-launch-app 组件开发微信打开APP功能


Posted in Javascript onAugust 11, 2020

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

template

<template>
	<div class="beva-home">		
		<!-- ===== 微信浏览器打开贝瓦APP ===== -->
		<div class="weixin-open-app" v-if="openAppState">
			<img class="close-icon" :src="icon.close" alt="关闭" @click="handleCloseOpenAppMask">
			<div class="detail">微信端暂不支持音视频播放,请到APP观看收听。</div>
			<div class="open-btn" v-if="!wechatState" @click="handleOpenBevaApp">打开贝瓦儿歌APP</div>
			<div class="" v-else>
				<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn" appid="wxd8799b17ff675637" extinfo="这里是微信H5传递给APP的指定参数">
					<script type="text/wxtag-template">
						<style>.btn { display: flex;align-items: center; }</style>								
						<div class="btn" style="border-radius: 50px;font-size:15px;color:#ffffff;font-weight:700;padding: 0 50px;height:45px;line-height: 45px;background-color: #FF9700;margin: 0 auto;">前往贝瓦儿歌</div>					
					</script>
				</wx-open-launch-app>
			</div>			
		</div>
	</div>
</template>

script

<script>
	export default {
		data() {
			return {
				wechatState:false, // 是否显示微信打开app功能按钮			
				icon:{
					close:require("../../assets/close.png")
				},				
				openAppState:false, // 显示打开app 的按钮 
			}
		},
		methods: {
			/**
			 * 判断当前的环境是否为微信环境且版本大于指定版本
			 */
			handleJudgeWechat(){
			 let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;
			 let judgewechat = wechat[1].split('.')
			 if(judgewechat[0]>=7){
			 if(judgewechat[1]>=0){
			  if(judgewechat[2]>=12){
			  this.wechatState = true
			  console.log("当前符合 h5 打开指定app")   
			  }
			 }
			 }
			},
			/**
			 * 打开应用宝下载页面
			 */
			handleOpenBevaApp() {
				window.location.href = "https://a.app.qq.com/o/simple.jsp?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?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("open app")
				if(res.type){
					this.$data.openAppState = true
				}
			})
		}
	}
</script>

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

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

VUE使用 wx-open-launch-app 组件开发微信打开APP功能

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

VUE使用 wx-open-launch-app 组件开发微信打开APP功能

总结

到此这篇关于VUE使用 wx-open-launch-app 组件开发微信打开APP功能的文章就介绍到这了,更多相关vue开发微信打开APP内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实现图片按比例缩放问题操作
Aug 11 #Javascript
JavaScript中while循环的基础使用教程
Aug 11 #Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
js实现列表按字母排序
Aug 11 #Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
You might like
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python3实现UDP协议的服务器和客户端
2017/06/14 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
离职保密承诺书
2014/05/28 职场文书
经典团队口号
2014/06/06 职场文书
工作求职信
2014/07/04 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
离婚财产处理协议书
2014/09/30 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
Nginx 常用配置
2022/05/15 Servers