使用vue编写h5公众号跳转小程序
程序员文章站
2022-03-04 23:31:58
前言:我使用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页面,引入微信配...
前言:我使用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="https://res.wx.qq.com/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();
//配置参数
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="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"
: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及以上版本');
}
}
},
还缺了啥我就不知道了,都是摸爬滚打,上面 有官方文档,再仔细看看吧!!
本文地址:https://blog.csdn.net/qq_38337245/article/details/110120608