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，换好之前就可以直接打开了