微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞

微信开放标签说明文档

使用微信开放标签前置条件

1、绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

2、开放对象

1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

开发过程中发现测试环境标签都不生效，只有在正式环境可以使用

3、Vue中使用-项目配置

开放标签属于自定义标签，Vue会给予未知标签的警告在main.js中配置 Vue.config.ignoredElements 忽略Vue对开放标签的警告

页面开发

1、引入JS文件

在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

2、通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [], // 必填，需要使用的JS接口列表openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

用例

贴代码：

<div class="wx-open-launch-container"><wx-open-launch-weappid="launch-btn"username="gh_123123123"path="/pages/index/index.html"@ready="wxReady"@launch="wxLaunch"@error="wxWeapperror"><script type="text/wxtag-template"><style>.btn {width:130px;height:48px;}</style><div class="btn" id="btnopooiu"></div></script></wx-open-launch-weapp><!-- <div class="btn" style="width:130px;height:48px;background:#eee"></div> --></div>

css样式：

.wx-open-launch-container{width: 130px;height: 48px;position: absolute;right: 0;top: 0;// background:#aaa;border-radius: 30px;overflow: hidden;}

注意

1、username属性：跳转小程序原始id
2、path属性，跳转小程序页面路径开头需加‘/’
3、开发工具是无法测试的，只能使用手机测试

参考文档：
vue中使用wx-open-launch-weapp开放标签按钮不显示问题

微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞相关推荐

微信h5页面跳转小程序及微信开放标签加载过慢问题
近期因项目需求,需要在原本的h5页面跳转到小程序页.分享一下步骤及避坑点. 微信的官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_W ...
前端实现微信公众号h5页面跳转小程序-成功案例
微信公众号h5页面跳转小程序-成功案例微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序官网说可以,不是我说的文章目录微信公众号h5页面跳转小程序-成功案 ...
微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
H5页面跳转小程序分享-山东标梵互动
最近,非个人主体的认证的小程序,可以直接在html页面中打开,这个权限还挺有用的,不仅适用于微信内部的浏览器,而且还可以在外部浏览器或者app中打开,比如UC浏览器.华为浏览器等.这里注意一下,官方特 ...
微信小程序嵌套h5页面怎么实现小程序支付
微信小程序嵌套h5页面怎么实现小程序支付小程序嵌套h5页面怎么实现小程序支付小程序中嵌套h5页面,但是不能再h5页面拉起小程序支付,这时是需要小程序方拉起支付目前的流程,外链发送订单请求拿到预支付 ...
小程序内嵌H5、H5回跳至小程序、小程序打开公众号中的文章
一.小程序内嵌H5 1.前期准备:在微信公众平台小程序开发 --> 开发管理 --> 开发设置中配置业务域名. 2.语句: <web-view src="&quo ...
小程序开发过程中常见问题[微信小程序、支付宝小程序]
小程序开发过程中常见问题[微信小程序.支付宝小程序] 正文一.样式中如何使用background-image呢? background-image支持网络的图片链接或者base64 二.使用自适应单 ...
本文是对优雅草蜻蜓C影视便捷追剧小程序微信支付配置教程-大部分小程序支付通用,从微信配置到后台的详解，其他小程序系统均可参考
本文是对优雅草蜻蜓C影视便捷追剧小程序微信支付配置教程-大部分小程序支付通用,从微信配置到后台的详解,其他小程序系统均可参考微信支付配置 1,下载工具编辑切换为居中添加图片注释,不超过 14 ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...