使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的實(shí)現(xiàn)代碼

更新時(shí)間：2020年11月27日 09:49:42 作者：一只狂躁的兔子

這篇文章主要介紹了使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言：我使用vue編寫的h5公眾號(hào)，實(shí)現(xiàn)點(diǎn)擊小程序入口，打開小程序，微信官方文檔：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 要求：微信版本要求為：7.0.12及以上。系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上。跳轉(zhuǎn)小程序主要的標(biāo)簽是 wx-open-launch-weapp 第一步在vue項(xiàng)目下public文件夾下的index.html頁(yè)面，引入微信配置文件，我直接在body標(biāo)簽引入

<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>

第二步建一個(gè)js文件用來存放接下來要配置的微信配置信息，需要用到微信功能的就可以在那個(gè)頁(yè)面引入就行，定位地圖啥的，都可以，我建的是這樣的

然后在這個(gè)js文件里面寫如下代碼：

//獲取微信配置信息--跳轉(zhuǎn)小程序、獲取定位信息
export function getWxApplets(href){
	var that = this;
	this.$loading();//加載中
	//調(diào)用微信方法跳轉(zhuǎn)小程序
	this.$axios({//這里是我封裝的axios請(qǐng)求，代碼就不貼了，你知道這是請(qǐng)求方法就行
		url:'這里是后端配置微信信息的接口url，這個(gè)沒辦法幫，找后端看文檔琢磨',
		data:{
			param: href,//當(dāng)前頁(yè)
		},
		callback(res){
			that.$loading.close();
			//配置參數(shù)
			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'],//跳轉(zhuǎn)小程序、獲取定位信息、導(dǎo)航
			 openTagList: ['wx-open-launch-weapp']//打開的標(biāo)簽名
			});
			wx.ready(function(){
				//微信獲取地理位置并拉取用戶列表（用戶允許獲取用戶的經(jīng)緯度）
				wx.getLocation({
					type: 'gcj02',
				 success: function (res) {
						console.log("--------------獲取經(jīng)緯度",res)
						if(res.errMsg == "getLocation:ok"){
							//緩存經(jīng)緯度信息
							that.$stor.Set("latitude",res.latitude);
							that.$stor.Set("longitude",res.longitude);
						}
				 }
				})
			})
		}
	})
}

第三步注意：需要在main.js里面注冊(cè)這個(gè)標(biāo)簽，如下

import {post,getWxApplets} from './common/js/auth.js';//引入工具文件
 
Vue.prototype.$axios = post;//post方法 請(qǐng)求----這個(gè)請(qǐng)求的封裝不貼了
Vue.prototype.$getWxApplets = getWxApplets;//獲取微信配置信息
Vue.config.ignoredElements = ['wx-open-launch-weapp'];//注冊(cè)wx-open-launch-weapp組件

第四步頁(yè)面顯示標(biāo)簽，點(diǎn)擊跳轉(zhuǎn)小程序，我寫了兩種顯示方式，都可行，如下：先調(diào)用方法

created(){
			var that = this;
			var href = window.location.href;//當(dāng)前頁(yè)
			//調(diào)用微信配置方法
			this.$getWxApplets(href);
}

第一種顯示方式，直接在頁(yè)面上寫：

<ul>
	<li v-for="(item,index) in shopInfo" :key="item.id">
  <!-- 點(diǎn)擊打開外部鏈接 -->
		<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=""/>
			<!-- 點(diǎn)擊打開小程序 這里跳轉(zhuǎn)小程序是定位圖片上，所以用了個(gè)div包裹用于定位，wx-open-launch-weapp這個(gè)標(biāo)簽只作用里面的東西，里面的css不影響外面的操作，這個(gè)標(biāo)簽外面的css也不會(huì)作用在這個(gè)標(biāo)簽里面-->
			<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">
		<!-- 跳轉(zhuǎn)外部鏈接-->
		<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>
		<!-- 跳轉(zhuǎn)小程序 -->
		<div v-else
			class="icon" 
			:style="{backgroundImage:'url(' + item.image + ')'}" 
			style="background-repeat: no-repeat;background-size:cover;background-position: center center;">
			<!-- 點(diǎn)擊打開小程序 -->
			<div class="wepp-btn" v-html="item.webApp"></div>
		</div>
		<p>{{item.name}}</p>
	</li>
</ul>

js:

//請(qǐng)求菜單列表--快捷入口
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){
     //使用了反引號(hào)來將標(biāo)簽轉(zhuǎn)成字符串，字段顯示直接用${}
					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;
		}
	}
})

最后由于微信版本問題就寫了個(gè)簡(jiǎn)單的判斷，我測(cè)試過有的微信版本過低，跳轉(zhuǎn)小程序會(huì)沒有任何動(dòng)靜，控制臺(tái)會(huì)報(bào)一個(gè)黃色的代碼錯(cuò)誤說這個(gè)wx-open-launch-weapp，也不知道是啥，還以為是ios不兼容，補(bǔ)充：

mounted() {
   //是否登錄
			if(this.ifLogin){
				//獲取微信版本號(hào)
				var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
				//判斷版本號(hào)是否匹配
				if(parseFloat(wechatInfo[1].split(".").slice(0,3).join("")) < parseFloat("7.0.12".split(".").join(""))){
				 this.$toast.center('跳轉(zhuǎn)小程序僅支持微信7.0.12及以上版本');
				}
			}
			
		},

還缺了啥我就不知道了，都是摸爬滾打，上面有官方文檔，再仔細(xì)看看吧??！

到此這篇關(guān)于使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: