前言：我使用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頁面，引入微信配置文件，我直接在body標(biāo)簽引入

We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.

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

然后在這個(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)前頁

},

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

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

created(){

var that = this;

var href = window.location.href;//當(dāng)前頁

//調(diào)用微信配置方法

this.$getWxApplets(href);

}

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

• .btn {

  width: 300px;

  height: 140px;

  }

  {{item.name}}

  {{item.briefIntroduction}}

第二種顯示方式，使用的是v-html，js顯示： html:

• class="icon"

  :style="{backgroundImage:'url(' + item.image + ')'}"

  style="background-repeat: no-repeat;background-size:cover;background-position: center center;"

  @click="linkJump(item)">

  class="icon"

  :style="{backgroundImage:'url(' + item.image + ')'}"

  style="background-repeat: no-repeat;background-size:cover;background-position: center center;">

  {{item.name}}

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

.btn {

width: 90px;

height: 90px;

}

`;

}

}

that.quickList = res.data;

}

}

})

最后由于微信版本問題就寫了個(gè)簡單的判斷，我測試過有的微信版本過低，跳轉(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)文章希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。