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

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

      1. 检查config注入是否成功

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

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

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

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

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

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

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

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

appId

        是 以 

wx

      开头的值。

  • 跳转的页面需要有后缀 html

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

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

问题:按钮不出现。

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

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

posted @ 2021-01-09 11:57  axl234  阅读(4021)  评论(0编辑  收藏  举报