使用vue編寫h5公眾號跳轉(zhuǎn)小程序的實現(xiàn)代碼
更新時間：2020年11月27日 09:49:42 作者：一只狂躁的兔子
這篇文章主要介紹了使用vue編寫h5公眾號跳轉(zhuǎn)小程序,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言：我使用vue編寫的h5公眾號，實現(xià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項目下public文件夾下的index.html頁面，引入微信配置文件，我直接在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>
第二步建一個js文件用來存放接下來要 配置的微信配置信息，需要用到微信功能的就可以在那個頁面引入就行， 定位地圖啥的，都可以，我建的是這樣的
然后在這個js文件里面寫如下代碼：
//獲取微信配置信息--跳轉(zhuǎn)小程序、獲取定位信息
export function getWxApplets(href){
var that = this;
this.$loading();//加載中
//調(diào)用微信方法跳轉(zhuǎn)小程序
this.$axios({//這里是我封裝的axios請求，代碼就不貼了，你知道這是請求方法就行
url:'這里是后端配置微信信息的接口url，這個沒辦法幫，找后端看文檔琢磨',
data:{
param: href,//當(dāng)前頁
},
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里面注冊這個標(biāo)簽，如下
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組件
第四步頁面顯示標(biāo)簽，點擊跳轉(zhuǎn)小程序，我寫 了兩種顯示方式，都可行，如下： 先調(diào)用方法
created(){
var that = this;
var href = window.location.href;//當(dāng)前頁
//調(diào)用微信配置方法
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=""/>
<!-- 點擊打開小程序 這里跳轉(zhuǎn)小程序是定位圖片上，所以用了個div包裹用于定位，wx-open-launch-weapp這個標(biāo)簽只作用里面的東西，里面的css不影響外面的操作，這個標(biāo)簽外面的css也不會作用在這個標(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;">
<!-- 點擊打開小程序 -->
<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){
//使用了反引號來將標(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;
}
}
})
最后由于微信版本問題就寫了個簡單的判斷，我測試過有的微信版本過低，跳轉(zhuǎn)小程序會沒有任何動靜，控制臺會報一個黃色的代碼錯誤說這個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('跳轉(zhuǎn)小程序僅支持微信7.0.12及以上版本');
}
}
},
還缺了啥我就不知道了，都是摸爬滾打，上面 有官方文檔，再仔細(xì)看看吧??！
到此這篇關(guān)于使用vue編寫h5公眾號跳轉(zhuǎn)小程序的文章就介紹到這了,更多相關(guān)vue跳轉(zhuǎn)小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項目中Eslint校驗代碼報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了vue.js 父向子組件傳參的實例代碼,需要的朋友可以參考下2017-10-10
Vue項目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
關(guān)于vue登錄注冊,并保持登錄狀態(tài),是vue玩家必經(jīng)之路,這篇文章主要給大家介紹了關(guān)于Vue項目如何保持用戶登錄狀態(tài)的相關(guān)資料,localStorage+vuex刷新頁面后狀態(tài)依然保持,需要的朋友可以參考下2022-05-05
KKFileView結(jié)合vue多格式文件在線預(yù)覽功能實現(xiàn)
kkFileView是git的開源在線文件預(yù)覽項目，這篇文章主要介紹了KKFileView結(jié)合vue多格式文件在線預(yù)覽功能，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue?Hook?封裝通用型表格,設(shè)計通用型表格組件首先,需要設(shè)計一個基礎(chǔ)的表格組件,它接受列配置、數(shù)據(jù)和分頁信息等參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue?element?ui用戶展示頁面的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的示例代碼
這篇文章主要詳細(xì)介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對象的方法步驟,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了在vite項目中使用@進(jìn)行文件的引入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11