uniapp怎么在H5页面打开小程序

在微信SDK里面你会发现，微信新增了开发标签的列表，通过这个我们可以在网页打开同个商务号下的小程序和商务绑定的APP

这个两个方法，这里我们用的是从网页打开小程序

第一步，获取SDK配置，在配置里面添加一个

  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']

这个字段有两个选择 wx-open-launch-weapp 打开小程序和 wx-open-launch-app 打开APP 可以两个都填写或者是两选一，看你项目需求

第二步绑定按钮在页面上

1. 普通html页面的话就是这种 template这个不能漏掉

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

2.vue页面或者其他的MVC页面上，因为会跟template冲突所以要用成script来代替，样式的话在script 加个style 写入

<wx-open-launch-weapp id="launch-btn" username="gh_原始ID" path="/pages/index/index.html?参数=1&参数=12456">
 <script type="text/wxtag-template">
  <style>.btn { width: 129rpx;height: 44rpx;font-size: 22rpx; color: #fff; background-color: #2D8BFF; border: none; border-radius: 100rpx; margin-top: 30rpx; }</style>
  <button class="btn"  type="default">打开直播</button>
 </script>
</wx-open-launch-weapp>

第三步调用微信SDK微信配置参数，记得要在回调成功后，不然的会显示不出来，还有的话安全接口，请求域名都要配置一致，加入对应的白名单

debug

在配置的时候有时候会出现这个错误加载小程序信息超时无法启动这个问题

是因为参数username造成的这里 gh_后面加入的原始ID 而不是小程序的APPID，换好之前就可以直接打开了