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

(编辑：jimmy 日期: 2024/11/9 浏览：2)

前言：我使用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="/UploadFiles/2021-04-02/jweixin-1.6.0.js">

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

然后在这个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="/UploadFiles/2021-04-02/item.image">

第二种显示方式，使用的是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及以上版本');
				}
			}
			
		},


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

上一篇：JavaScript字符串转数字的简单实现方法

下一篇：JavaScript中的Proxy对象