微信 h5页面跳转微信小程序 wx-open-launch-weapp注意事项

请确保小程序是已认证的非个人主体的小程序，已认证的服务号“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>

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

检查config注入是否成功

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

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

如果你的config注入成功，debug: true, 时，会有弹窗提示注入成功。
检查所有必填项 jsApiList 也为必填项，不能因为没有用到这项就不填写**，要在微信提供的 jsApiList所有可选项的表里面填一个，这个方法需要使用。在wx.ready{}中调用一下**
openTagList 这个值要是 wx-open-launch-weapp 不是 wx-open-launch-app。

wx-open-launch-app 是 app 里面的用法。
样式中的大小最好使用 px 单位。

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

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

appId

是以

wx

开头的值。

跳转的页面需要有后缀 html

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

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

问题：按钮不出现。

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

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

微信 h5页面 跳转微信小程序 wx-open-launch-weapp注意事项

微信 h5页面跳转微信小程序 wx-open-launch-weapp注意事项