微信公众号内嵌跳转微信小程序方案总结

微信公众号内嵌跳转微信小程序方案总结

1.需求背景

• 最近有个需求是在微信公众号的H5页面里面展示出跳转微信公众号的入口，并且在点击之后跳转到指定的微信小程序页面去。

2.解决方案

• 这里主要要用到微信开放能力的wx-open-launch-weapp。

• 微信版本限： 7.0.12及以上 。

• 系统版本限： iOS 10.3及以上、Android 5.0及以上 。

• 要满足的条件是：

  • 限已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序，并且要保证开放了相关权限。
  • 在使用该标签之前，首先需要前往微信开放平台的管理中心 - 公众账号或小程序详情 - 接口信息 - 网页跳转移动应用 - 关联设置中绑定所需要跳转的App。详细配置规则参考文档《微信内网页跳转 APP 功能》。

• 步骤如下：

• 
  // 1.安装微信SDK：
  npm i weixin-js-sdk --save
  
  // 2.wx权限验证：
       wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "XXXXXXXXXXX", // 必填，公众号的唯一标识
            timestamp: this.timestamp, // 必填，生成签名的时间戳
            nonceStr: this.nonceStr, // 必填，生成签名的随机串
            signature: this.signautre, // 必填，签名
            jsApiList: [ // 必填，需要使用的JS接口列表
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "checkJsApi",
              "scanQRCode"
            ],
            openTagList:['wx-open-launch-weapp'] // 开放标签
          });
          wx.ready(function() {
            //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
          });
          wx.error(function(res) {
            console.log('res',res);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          });
  
  // 3.前往要使用的vue文件，引用：
  /*
  参数说明：
  username：所需跳转的小程序原始id，即小程序对应的以gh_开头的id（必填）。
  path：所需跳转的小程序内页面路径及参数。
  launch(e)：用户点击跳转按钮并对确认弹窗进行操作。
  error(e)）：用户点击跳转按钮后出现错误。
  */
     <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx"  path="pages/login/login/main.html" @error="handleErrorFn" @launch="handleLaunchFn">
          <script type="text/wxtag-template">
              <style>.btn { display: flex;align-items: center; }</style>				
              <div> <button class="wx-btn">跳转小程序</button>	</div>			
          </script>
      </wx-open-launch-weapp>