微信 h5页面 跳转微信小程序 wx-open-launch-weapp 的使用标签常出错的地方。

首先请阅读官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

文章中提到的，原则上这里不再提示。

1. 请确保小程序是已认证的非个人主体的小程序，或者已认证的服务号
2. “JS接口安全域名” 已经绑定。

问题：按照官方文档写的样式没有出现

文档用例：

<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>

使用内联样式可以解决这个问题。

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
  style="内联样式"
>
  <template>
    <button class="btn" style="内联样式">打开小程序</button>
  </template>
</wx-open-launch-weapp>

问题：静态h5页面好用，使用vue就没有效果。

解决办法：修改 标签。更换为 <script type="text/wxtag-template">

<script type="text/wxtag-template">
 	<button class="btn">打开小程序</button>
</script>

问题：按钮真机不出现 微信开发者工具里面出现点击没有作用
解决办法：

1. 检查config注入是否成功

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

   注意：所有必填项必须填写，否则无效

   如果你的config注入成功，debug: true, 时，会有弹窗提示注入成功。

2. 检查所有必填项 jsApiList 也为必填项，不能因为没有用到这项就不填写**，要在微信提供的 jsApiList所有可选项的表里面填一个，这个方法需要使用。在wx.ready{}中调用一下**

3. openTagList 这个值要是 wx-open-launch-weapp 不是 wx-open-launch-app。

   wx-open-launch-app 是 app 里面的用法。

4. 样式中的大小最好使用 px 单位。

5. 在jsApiList 中选择的方法要在这里使用下，结果不重要，没有使用可能会导致引入不正确。

   wx.ready(function () {
     // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
   });
   

6. 确定 config 注入的时候 所有必填项的值都正确。appId 是 以 wx 开头的值。

7. 跳转的页面需要有后缀 html

8. 不要使用 pc 的浏览器查看页面的效果，请用微信开发者工具查看，否则可能会有网络错误。

   出现 config：invalid url domain 错误的时候，放置在统一域名下运行。

问题：按钮不出现。
解决办法

1. 要在微信浏览器中打开，不要再 pc 的浏览器中打开。
2. 检查 config 是否注入成功。
3. 把页面放到小程序相同域名下。

根据手机微信页面弹出的错误提示进行查询。

希望有帮到你，有问题欢迎留言。