利用vue怎么从h5公众号跳转小程序-创新互联
本篇文章给大家分享的是有关利用vue怎么从h5公众号跳转小程序，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
index.html页面
第二步建一个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);
}第一种显示方式，直接在页面上写：