大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关利用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); }
第一种显示方式,直接在页面上写:
{{item.name}}
{{item.briefIntroduction}}
第二种显示方式,使用的是v-html,js显示: html:
{{item.name}}
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 =``; } } 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及以上版本'); } } },
以上就是利用vue怎么从h5公众号跳转小程序,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。