使⽤vue编写h5跳转⼩程序的实现代码
<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="res.wx.qq/open/js/jweixin-1.6.0.js"></script>
</body>
第⼆步建⼀个js⽂件⽤来存放接下来要配置的配置信息，需要⽤到功能的就可以在那个页⾯引⼊就⾏，定位地图啥的，都可以，我建的是这样的
然后在这个js⽂件⾥⾯写如下代码：
//获取配置信息--跳转⼩程序、获取定位信息
export function getWxApplets(href){
var that = this;
this.$loading();//加载中
//调⽤⽅法跳转⼩程序
this.$axios({//这⾥是我封装的axios请求，代码就不贴了，你知道这是请求⽅法就⾏
url:'这⾥是后端配置信息的接⼝url，这个没办法帮，后端看⽂档琢磨',
data:{
param: href,//当前页
},
callback(res){
that.$loading.close();
//配置参数
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: Str,
signature: res.data.signature,
jsApiList: ['wx-open-launch-weapp','getLocation','openLocation'],//跳转⼩程序、获取定位信息、导航
openTagList: ['wx-open-launch-weapp']//打开的标签名
});
//获取地理位置并拉取⽤户列表（⽤户允许获取⽤户的经纬度）
type: 'gcj02',
success: function (res) {
console.log("--------------获取经纬度",res)
Msg == "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;//获取配置信息
第四步页⾯显⽰标签，点击跳转⼩程序，我写了两种显⽰⽅式，都可⾏，如下：先调⽤⽅法
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"
:
@click="linkJump(item)">
</div>
<!-- 跳转⼩程序 -->
<div v-else
class="icon"
:
>
<!-- 点击打开⼩程序 -->
<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){
de == 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.$('跳转⼩程序仅⽀持7.0.12及以上版本');
}
}
},
还缺了啥我就不知道了，都是摸爬滚打，上⾯有官⽅⽂档，再仔细看看吧！！
到此这篇关于使⽤vue编写h5跳转⼩程序的⽂章就介绍到这了，更多相关vue跳转⼩程序内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。