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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
jquery 插件学习(三)
Aug 06 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
javascript解析json实例详解
Nov 05 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue实现底部菜单功能
Jul 24 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
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 mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
功能强大的php分页函数
2016/07/20 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
python读取和保存视频文件
2018/04/16 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python项目跨域问题解决方案
2020/06/22 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
10的分与合教学反思
2014/04/30 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
鼋头渚导游词
2015/02/05 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript