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 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Less 安装及基本用法
May 05 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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 反射机制实现动态代理的代码
2008/10/22 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Vue.js用法详解
2017/11/13 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
在python中bool函数的取值方法
2018/11/01 Python
python3实现单目标粒子群算法
2019/11/14 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python入门之井字棋小游戏
2020/03/05 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
《藤野先生》教学反思
2014/02/19 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
商铺门面租房协议书
2014/10/21 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
MySQL池化框架学习接池自定义
2022/07/23 MySQL