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 相关文章推荐
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JavaScript File分段上传
Mar 10 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
JavaScript反射与依赖注入实例详解
May 29 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
javascript实现倒计时效果
Feb 17 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
梳理一下vue中的生命周期
Dec 30 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php计算年龄精准到年月日
2015/11/17 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
js 事件小结 表格区别
2007/08/13 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
js获取form的方法
2015/05/06 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
python中self原理实例分析
2015/04/30 Python
python一键去抖音视频水印工具
2018/09/14 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
C语言基础笔试题
2013/04/27 面试题
桥梁工程专业求职信
2014/04/21 职场文书
五年级上册复习计划
2015/01/19 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
现货白银电话营销话术
2015/05/29 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server