公众号h5跳转到小程序,微信公众号怎么直接跳转h5
本文主要介绍使用vue编写h5微信官方账号跳转小程序。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
我用vue写的h5微信官方账号，点击小程序入口，打开小程序。微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA _ web _ apps/微信_ open _ tag.html要求：微信版本应为7.0.12或以上。系统要求是：iOS 10.3及以上，Android 5.0及以上。跳转小程序的主选项卡是wx-打开-启动-weapp。第一步是在vue项目下的公共文件夹下的index.html页面介绍微信配置文件，我直接在body标签页介绍。
身体
定义在脚本未被执行时的替代内容
strongWe很抱歉，如果不启用JavaScript，默认设置将无法正常工作。请启用它以继续。/strong
/noscript
div id=app/div
！-生成的文件将被自动注入-
！-介绍微信配置文件-
script src= https://RES . wx . QQ . com/open/js/jweixin-1 . 6 . 0 . js /script
/body
第二步，建立一个js文件，存储下一步要配置的微信配置信息。如果需要使用微信功能，在那个页面介绍一下就可以了。你可以找到地图或者别的什么。我把它建成这样。
然后在这个js文件中编写以下代码：
//获取微信配置信息——跳转小程序，获取定位信息。
导出函数getWxApplets(href){
var that=this
这个。$ loading()；//正在加载
//调用微信方法跳转小程序
这个。$axios({//这里是我封装的axios请求，我就不贴代码了，只要你知道这是请求方法就行。
Url:这里是后台配置微信信息的界面url，没办法。找后端阅读文档并思考，
数据：{
Param: href，//当前页面
},
回拨(资源){
那个。$ loading . close()；
//配置参数
wx.config({
调试：假，
appId: res.data.appId，
时间戳：res.data.timestamp，
non centr:RES . data . non centr，
签名：res.data.signature，
JSAPI列表：[wx-open-launch-weapp ， getlocation ， openlocation]，//跳转小程序，获取定位信息，导航
Open taglist:[ wx-Open-launch-weapp ]//打开标记名
});
wx.ready(function(){
//微信获取地理位置，拉取用户列表(允许用户获取用户的经纬度)
wx.getLocation({
类型： gcj02 ，
成功：函数(res) {
Console.log ( -获取纬度和经度，res)
if(RES . errmsg== get location:ok ){
//缓存经纬度信息
那个。$stor。Set(纬度，RES . latitude)；
那个。$stor。Set(经度，res .经度)；
}
}
})
})
}
})
}
步骤3注意：您需要在main.js中注册这个标记，如下所示
从导入{post，getWxApplets}。/common/js/auth . js ；//导入工具文件
Vue.prototype. $ axios=post//post方法请求-不发布此请求的封装。
vue . prototype . $ getWxApplets=getWxApplets；//获取微信配置信息
vue . config . ignore elements=[ wx-open-launch-weapp ]；//注册wx-open-launch-weapp组件
第四步是在页面上显示选项卡，并单击跳转小程序。我写过两个显示方法，都是可行的，如下：先调用方法。
已创建(){
var that=this
var href=window . location . href；//当前页面
//调用微信配置方法
这个。$ getWxApplets(href)；
}
第一种显示方式，直接在页面上写：
保险商实验所
li v-for=(item，index) in shopInfo :key=item.id
！-单击打开外部链接-
div class= img v-if= item . jump type！=2
img:src= item . image alt= @ click= link jump(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
脚本类型=text/wxtag-template
风格。btn {
宽度：300px
高度：140px
}
/风格
div class=btn/div
/脚本
/wx-open-launch-weapp
/div
/div
p class=p1{{item.name}}/p
p class= p2 { { item。简要介绍} }/p
/李
/ul
第二种显示方式，使用的是虚拟html，js显示：html:
保险商实验所
li v-for=(item，index)in quick list :key= item。id
！-跳转外部链接-
div v-if=item.jumpType！=2
class=icon
:style=“{ background image: URL( item。图像))“}”
style=" background-repeat:不重复；背景-尺寸：封面；背景-位置：中心中心；
@click=linkJump(item)
/div
！-跳转小程序-
div-否则
class=icon
:style=“{ background image: URL( item。图像))“}”
style=" background-repeat:不重复；背景-尺寸：封面；背景-位置：中心中心；
！-点击打开小程序-
BTN v-html= item。web应用程序/div
/div
p{{item.name}}/p
/李
/ul
js:
//请求菜单列表-快捷入口
变那个=这个
那个. axios({
网址：“API/查找/快速录入”，
回拨（资源){
if(res.code==1){
对于(研究数据中的变量I){
if(res.data[i].jumpType==2){
//使用了反引号来将标签转成字符串，字段显示直接用${}
研究数据[i].web app= wx-open-launch-weapp id= launch-BTN username= $ { RES . data[I].appletsId }"path="$ { RES . data[I].链接}
模板
风格。btn {
宽度：90px
高度：90px
}
/风格
div class=btn/div
/模板
/wx-open-launch-weapp `；
}
}
这个。快速列表=研究数据；
}
}
})
最后由于微信版本问题就写了个简单的判断，我测试过有的微信版本过低，跳转小程序会没有任何动静，控制台会报一个黄色的代码错误说这个wx-开放-发射-威普，也不知道是啥，还以为是ios不兼容，补充：
已安装(){
//是否登录
if(this.ifLogin){
//获取微信版本号
var we聊天信息=导航器。用户代理。match(/micro messenger \/([\ d \ .])/I)；
//判断版本号是否匹配
if(parseFloat(wechatInfo[1]).拆分(.).切片(0，3).join(" ")分析float( 7。0 .12)。拆分(.).join(" "){
这个$toast.center(跳转小程序仅支持微信7.0.12及以上版本);
}
}
},
还缺了啥我就不知道了，都是摸爬滚打，上面有官方文档，再仔细看看吧！
到此这篇关于使用某视频剪辑软件编写h5公众号跳转小程序的文章就介绍到这了，更多相关某视频剪辑软件跳转小程序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。