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 相关文章推荐
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
webpack external模块的具体使用
Mar 10 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 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 5.5 新特性
2013/07/02 PHP
php解析url的三个示例
2014/01/20 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
django的csrf实现过程详解
2019/07/26 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
创建学习型党组织实施方案
2014/03/29 职场文书
研讨会主持词
2014/04/02 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL