使用vue编写h5公众号跳转小程序的实现代码


Posted in Vue.js onNovember 27, 2020

前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求:微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 跳转小程序主要的标签是 wx-open-launch-weapp 第一步在vue项目下public文件夹下的index.html页面,引入微信配置文件,我直接在body标签引入

<body>
 <noscript>
  <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
	<!-- 引入微信配置文件 -->
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 </body>

第二步建一个js文件用来存放接下来要 配置的微信配置信息,需要用到微信功能的就可以在那个页面引入就行, 定位地图啥的,都可以,我建的是这样的

使用vue编写h5公众号跳转小程序的实现代码

然后在这个js文件里面写如下代码:

//获取微信配置信息--跳转小程序、获取定位信息
export function getWxApplets(href){
	var that = this;
	this.$loading();//加载中
	//调用微信方法跳转小程序
	this.$axios({//这里是我封装的axios请求,代码就不贴了,你知道这是请求方法就行
		url:'这里是后端配置微信信息的接口url,这个没办法帮,找后端看文档琢磨',
		data:{
			param: href,//当前页
		},
		callback(res){
			that.$loading.close();
			//配置参数
			wx.config({
			 debug: false,
			 appId: res.data.appId,
			 timestamp: res.data.timestamp,
			 nonceStr: res.data.nonceStr,
			 signature: res.data.signature,
			 jsApiList: ['wx-open-launch-weapp','getLocation','openLocation'],//跳转小程序、获取定位信息、导航
			 openTagList: ['wx-open-launch-weapp']//打开的标签名
			});
			wx.ready(function(){
				//微信获取地理位置并拉取用户列表(用户允许获取用户的经纬度)
				wx.getLocation({
					type: 'gcj02',
				 success: function (res) {
						console.log("--------------获取经纬度",res)
						if(res.errMsg == "getLocation:ok"){
							//缓存经纬度信息
							that.$stor.Set("latitude",res.latitude);
							that.$stor.Set("longitude",res.longitude);
						}
				 }
				})
			})
		}
	})
}

第三步注意:需要在main.js里面注册这个标签,如下

import {post,getWxApplets} from './common/js/auth.js';//引入工具文件
 
Vue.prototype.$axios = post;//post方法 请求----这个请求的封装不贴了
Vue.prototype.$getWxApplets = getWxApplets;//获取微信配置信息
Vue.config.ignoredElements = ['wx-open-launch-weapp'];//注册wx-open-launch-weapp组件

第四步页面显示标签,点击跳转小程序,我写 了两种显示方式,都可行,如下: 先调用方法

created(){
			var that = this;
			var href = window.location.href;//当前页
			//调用微信配置方法
			this.$getWxApplets(href);
}

第一种显示方式,直接在页面上写:

<ul>
	<li v-for="(item,index) in shopInfo" :key="item.id">
  <!-- 点击打开外部链接 -->
		<div class="img" v-if="item.jumpType != 2">
			<img :src="item.image" alt="" @click="linkJump(item)"/>
		</div>
		<div class="img" v-else>
			<img :src="item.image" alt=""/>
			<!-- 点击打开小程序 这里跳转小程序是定位图片上,所以用了个div包裹用于定位,wx-open-launch-weapp这个标签只作用里面的东西,里面的css不影响外面的操作,这个标签外面的css也不会作用在这个标签里面-->
			<div class="wepp-btn">
				<wx-open-launch-weapp id="launch-btn" :username="item.appletsId" :path='item.link'>
					<script type="text/wxtag-template">
							<style>
								.btn {
									width: 300px;
									height: 140px;
								}
							</style>
							<div class="btn"></div>
					</script>
				</wx-open-launch-weapp>
			</div>
		</div>
		<p class="p1">{{item.name}}</p>
		<p class="p2">{{item.briefIntroduction}}</p>
	</li>
</ul>

第二种显示方式,使用的是v-html,js显示: html:

<ul>
	<li v-for="(item,index) in quickList" :key="item.id">
		<!-- 跳转外部链接-->
		<div v-if="item.jumpType != 2"
			class="icon" 
			:style="{backgroundImage:'url(' + item.image + ')'}" 
			style="background-repeat: no-repeat;background-size:cover;background-position: center center;"
			@click="linkJump(item)">
		</div>
		<!-- 跳转小程序 -->
		<div v-else
			class="icon" 
			:style="{backgroundImage:'url(' + item.image + ')'}" 
			style="background-repeat: no-repeat;background-size:cover;background-position: center center;">
			<!-- 点击打开小程序 -->
			<div class="wepp-btn" v-html="item.webApp"></div>
		</div>
		<p>{{item.name}}</p>
	</li>
</ul>

js:

//请求菜单列表--快捷入口
var that = this;
that.$axios({
	url:'api/find/quickEntry',
	callback(res){
		if(res.code == 1){
			for(var i in res.data){
				if(res.data[i].jumpType == 2){
     //使用了反引号来将标签转成字符串,字段显示直接用${}
					res.data[i].webApp =`<wx-open-launch-weapp id="launch-btn" username="${res.data[i].appletsId}" path="${res.data[i].link}">
										<template>
											<style>
												.btn {
													width: 90px;
													height: 90px;
												}
											</style>
											<div class="btn"></div>
										</template>
									</wx-open-launch-weapp>`;
					}
			}
			that.quickList = res.data;
		}
	}
})

最后由于微信版本问题就写了个简单的判断,我测试过有的微信版本过低,跳转小程序会没有任何动静,控制台会报一个黄色的代码错误说这个wx-open-launch-weapp,也不知道是啥,还以为是ios不兼容,补充:

mounted() {
   //是否登录
			if(this.ifLogin){
				//获取微信版本号
				var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
				//判断版本号是否匹配
				if(parseFloat(wechatInfo[1].split(".").slice(0,3).join("")) < parseFloat("7.0.12".split(".").join(""))){
				 this.$toast.center('跳转小程序仅支持微信7.0.12及以上版本');
				}
			}
			
		},

还缺了啥我就不知道了,都是摸爬滚打,上面 有官方文档,再仔细看看吧!!

到此这篇关于使用vue编写h5公众号跳转小程序的文章就介绍到这了,更多相关vue跳转小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
You might like
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PDO::query讲解
2019/01/29 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python网络编程详解
2017/10/31 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
求职面试个人自我评价
2014/02/28 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
教师求职自荐书
2014/06/14 职场文书
公司活动总结范文
2014/07/01 职场文书
湘江北去观后感
2015/06/15 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python