使用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解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php读取xml实例代码
2010/01/28 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
php支付宝APP支付功能
2020/07/29 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
js中document.write的那点事
2014/12/12 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
门卫班长岗位职责
2013/12/15 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
个人担保书范文
2014/05/20 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
文明家庭事迹材料
2014/12/20 职场文书
优秀党支部申报材料
2014/12/24 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
nginx搭建NFS网络文件系统
2022/04/14 Servers