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 相关文章推荐
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
js制作提示框插件
Dec 24 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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抓取页面的几种方法详解
2013/06/17 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
php获取远程文件大小
2015/10/20 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
vue实现微信获取用户信息的方法
2019/03/21 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
Java编程面试题
2016/04/04 面试题
一年级家长会邀请函
2014/01/25 职场文书
军训学生自我鉴定
2014/02/12 职场文书
汉语言文学职业规划
2014/02/14 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
车辆工程专业求职信
2014/06/14 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
检讨书怎么写
2015/05/07 职场文书