揭秘uniApp开发微信公众号H5时在iOS上的困局

Android

2023-11-01 21:50:45

iOS环境下使用uniApp开发微信公众号H5应用遇到的问题及其解决方案

前言

uniApp是一个备受推崇的跨平台开发框架，它以其跨平台能力和组件库的丰富性而闻名。它允许开发者使用一套代码开发在多个平台上运行的应用，这极大地提高了开发效率。对于微信公众号H5应用的开发，uniApp尤其适用。

然而，在iOS环境下使用uniApp开发微信公众号H5应用时，开发者可能面临一些挑战，特别是涉及到微信开放标签<wx-open-subscribe>时，它在iOS和Android环境下的表现有所不同。

问题现象

在iOS手机端，使用<wx-open-subscribe>标签时，每次路由切换后，单页应用（SPA）的URL不会发生变化。这意味着用于发起签名请求的URL参数必须是当前页面的URL，即初始进入页面时的URL。

而在Android手机端，情况有所不同。每次路由切换后，SPA的URL会发生变化。这意味着用于发起签名请求的URL参数必须是当前页面的URL，而不是初始进入页面时的URL。

这种差异可能导致开发者在iOS环境中遇到签名请求失败的问题，因为发起签名请求时使用的URL参数与当前页面URL不一致。

解决方案

为了解决这个问题，开发者可以采用以下两种方法：

在iOS环境下使用window.location.href跳转页面

在iOS环境中，可以使用window.location.href来跳转页面，这可以确保发起签名请求时使用的URL参数与当前页面URL一致。

// 在iOS环境下，使用`window.location.href`跳转页面
uni.navigateTo({
  url: '/pages/index/index',
  success: function () {
    // 跳转成功后，发起签名请求
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
      data: {
        type: 'jsapi_ticket'
      },
      success: function (res) {
        // 签名请求成功，获取jsapi_ticket
        var jsapi_ticket = res.data.ticket;
      }
    });
  }
});

在iOS环境下使用原生页面跳转

除了使用window.location.href跳转页面外，开发者还可以使用原生页面跳转的方式来解决这个问题。原生页面跳转不会导致SPA的URL发生变化，因此可以确保发起签名请求时使用的URL参数与当前页面URL一致。

// 在iOS环境下，使用原生页面跳转
uni.redirectTo({
  url: '/pages/index/index',
  success: function () {
    // 跳转成功后，发起签名请求
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
      data: {
        type: 'jsapi_ticket'
      },
      success: function (res) {
        // 签名请求成功，获取jsapi_ticket
        var jsapi_ticket = res.data.ticket;
      }
    });
  }
});