h5网页跳转微信小程序的方法，wx-open-launch-weapp按钮不显示

最新推荐文章于 2024-06-30 00:09:04 发布

xyphf_和派孔明

最新推荐文章于 2024-06-30 00:09:04 发布

阅读量8.5k

点赞数 5

分类专栏：微信小程序

本文链接：https://blog.csdn.net/xyphf/article/details/115193299

版权

微信小程序专栏收录该内容

13 篇文章 1 订阅

订阅专栏

最近踩了一条大坑啊，h5页面跳转微信小程序wx-open-launch-weapp下面的按钮一直不显示，琢磨了好久，查看微信开发者社区差不多有30页同问？

微信h5页面是怎么跳转微信小程序的？

1、打开微信开发者jssdk文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

2、看 2.1 跳转小程序：wx-open-launch-weapp

3、我在看一下JS-SDK的说明文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

如何绑定域名、引入JS文件等大家自己在文档看了

下面说一下获取附录1-JS-SDK使用权限签名算法 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

这其中遇到了一个非常大的坑，就是wx-open-launch-weapp标签里面的按钮在IOS下面显示，在安卓下面就是不显示？

下面我来说一下我是怎么解决的，贴上我的小demo

<html>
  <head>
    <title>打开小程序</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
    <script src="./jquery-1.8.0.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div id="wechat-web-container" style="width: 100%;height: 100vh;display: flex; align-items: center;">
      <wx-open-launch-weapp id="launch-btn" username="所需跳转的小程序原始id，即小程序对应的以gh_开头的id" path="所需跳转的小程序内页面路径及参数">
        <template>
          <style>.btn {
            width: 100% !important;
            padding: 12px !important;
            font-size: 30px !important;
            background-color: #07c160 !important;
            text-align: center !important;
            border: 0;color: #ffffff !important;
          }</style>
          <div class="btn" >打开微信小程序</div>
        </template>
      </wx-open-launch-weapp>
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
          function dff(){
            $.ajax({
              url: `公司后端写的 获取wx.config参数接口?appId=公众号的appId&weixinId=要跳转的微信小程序的appId&url=${encodeURIComponent(window.location.href)}`,
              type: 'GET',
              success:function(result){
                wx.config({
                  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                  appId: '', // 必填，公众号的唯一标识
                  timestamp: result.timestamp, // 必填，生成签名的时间戳
                  nonceStr: result.nonceStr, // 必填，生成签名的随机串
                  signature: result.signature,// 必填，签名
                  jsApiList: ['chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
                  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表
                });
            }});
          }
          dff();

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

              var btn = document.getElementById('launch-btn');
              btn.addEventListener('launch', function (e) {
                console.log('success');
                // alert('success')
              });
              btn.addEventListener('error', function (e) {
                console.log('fail', e.detail);
                alert('fail', e.detail)
                // alert('fail', e.detail)
              });
          });
      });
    </script>
  </body>
</html>

这里在找重强调一下，如果是想实现微信内部H5跳小程序，wx.config中的jsApiList: ['chooseImage', 'previewImage']是必须要写的，如果不写的话，IOS可能不影响，但是不少安卓是显示不出来按钮的

xyphf_和派孔明

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
10
评论
h5网页跳转微信小程序的方法，wx-open-launch-weapp按钮不显示

最近踩了一条大坑啊，h5页面跳转微信小程序wx-open-launch-weapp下面的按钮一直不显示，琢磨了好久，查看微信开发者社区差不多有30页同问？微信h5页面是怎么跳转微信小程序的？1、打开微信开发者jssdk文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#212、看 2.1 跳转小程序：wx-open-launch-weapp3、我在看一下JS-SDK的说明文
复制链接

扫一扫