微信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-weapp
         id="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开放标签按钮不显示问题