uniapp添加mqtt支持在手机端运行白屏问题

Question

如图所示，在电脑端运行都正常，能连接到mqtt服务器，也能订阅发消息，只要一运行到手机端就白屏，我测试来测试去，发现就是这两行代码的问题，只要注释掉手机端就不白屏，但同时不能使用mqtt功能了，很奇怪

Answer 1

引自免费微信小程序：皆我百晓生

从描述来看，问题出现在将createSSRApp引入并使用时，这导致了手机端白屏的问题。在uniapp中，SSR（Server Side Rendering）相关代码可能并不适用于所有移动设备，尤其是当设备的浏览器环境不支持某些现代JavaScript特性时。

解决方案

1. 检查浏览器兼容性

首先，确认AbortController是否被所有目标设备支持。AbortController是用于取消请求或异步操作的一个接口，它在较新的浏览器中广泛支持，但在一些旧设备上可能缺失。

2. 使用polyfill

为了解决兼容性问题，可以考虑使用polyfill来补全AbortController的支持。Polyfill是一种脚本，用于在浏览器不支持某些原生API的情况下提供回退实现。对于AbortController，可以使用abortcontroller-polyfill库。

安装polyfill

npm install abortcontroller-polyfill

在代码中引入并使用

import { AbortController } from 'abortcontroller-polyfill/dist/cjs-ponyfill';

// 确保AbortController在全局环境中可用
if (!globalThis.AbortController) {
    globalThis.AbortController = AbortController;
}

将这段代码放在项目的入口文件中，例如main.js，确保在引入createSSRApp之前执行。

3. 调整应用构建策略

对于uniapp，还可以尝试调整构建策略，确保最终的代码包对所有目标设备都是友好的。这可能包括使用更广泛的JavaScript标准进行编译，避免使用某些实验性或不兼容的API。

检查编译配置

在项目根目录下的uni.config.json文件中，确认是否有针对不同平台的构建设置。例如，可以设置不同的JavaScript版本或特定的polyfills。

{
  "build": {
    "mp-weixin": {
      "postcss": {
        "pxtransform": true,
        "autoprefixer": true,
        "cssModules": false,
        "minimize": true,
        "esModules": false // 这里可以尝试设置为false，以兼容更多设备
      }
    }
  }
}

4. 分支代码逻辑

另一种方法是在代码中根据运行环境动态引入createSSRApp或其替代品。例如，对于不支持SSR的环境，可以使用createApp作为备选。

let app;

if (/* 检查设备是否支持SSR */) {
    ({ createSSRApp } from 'vue');
    app = createSSRApp(App);
} else {
    ({ createApp } from 'vue');
    app = createApp(App);
}

// 其他初始化代码...

通过以上步骤，应该能够解决手机端白屏的问题，同时保持mqtt功能的正常使用。如果问题仍然存在，可能需要进一步检查其他代码依赖或uniapp的特定配置。