微信开放标签 [wx-open-launch-app] 踩坑实录

微信开放标签 [wx-open-launch-app] 可以方便地将用户从微信内的 H5 页面跳转至 App。不过，在使用该标签的过程中，我踩了不少坑。本文将分享这些坑以及相应的解决方案，帮助其他开发者避免类似问题。

坑1：未配置AppID

这是最常见的坑之一。在使用 [wx-open-launch-app] 标签之前，必须先在微信开放平台上配置AppID。否则，标签将无法正常工作。

解决方案：

1. 登录微信开放平台，点击“开发” -> “开放能力” -> “接口权限”。
2. 在“网页授权”一栏中，点击“修改配置”。
3. 在“AppID”一栏中，填写你的AppID。
4. 点击“保存”。

坑2：未正确设置scheme

[wx-open-launch-app] 标签的scheme属性用于指定跳转至 App 时要使用的协议。如果scheme设置不正确，则无法正常跳转至 App。

解决方案：

1. 在你的App的Info.plist文件中，添加以下代码：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>你的scheme</string>
</array>

2. 在 [wx-open-launch-app] 标签中，将scheme属性设置为你的scheme。例如：

<wx-open-launch-app scheme="你的scheme"></wx-open-launch-app>

坑3：App未安装

如果App未安装，则无法正常跳转至 App。

解决方案：

1. 在你的H5页面中，使用以下代码检查App是否已安装：

if (window.navigator.userAgent.indexOf('MicroMessenger') > -1) {
  wx.ready(function() {
    wx.checkJsApi({
      jsApiList: ['launchApp'],
      success: function(res) {
        if (res.checkResult.launchApp) {
          // App已安装
        } else {
          // App未安装
        }
      }
    });
  });
}

2. 如果App未安装，则可以使用以下代码引导用户安装App：

wx.openLink({
  url: '你的App下载链接'
});

坑4：App版本过低

如果App版本过低，则可能无法正常跳转至 App。

解决方案：

1. 在你的H5页面中，使用以下代码检查App版本是否过低：

if (window.navigator.userAgent.indexOf('MicroMessenger') > -1) {
  wx.ready(function() {
    wx.checkJsApi({
      jsApiList: ['launchApp'],
      success: function(res) {
        if (res.checkResult.launchApp) {
          // 检查App版本
          wx.getInstallState({
            success: function(res) {
              if (res.errMsg == 'getInstallState:ok' && res.versionCode < 你的最低兼容版本号) {
                // App版本过低
              }
            }
          });
        } else {
          // App未安装
        }
      }
    });
  });
}

2. 如果App版本过低，则可以使用以下代码引导用户更新App：

wx.openLink({
  url: '你的App更新链接'
});

坑5：其他问题

除了上述四个坑之外，还有一些其他问题可能会导致 [wx-open-launch-app] 标签无法正常工作。这些问题包括：

• App未配置白名单
• App未注册相关URL Scheme
• App未在微信开放平台中配置相关权限

如果您在使用 [wx-open-launch-app] 标签时遇到问题，可以参考本文中的解决方案。如果您仍然无法解决问题，可以到微信开放平台的论坛中寻求帮助。