如何确保你的小程序在各个平台都能正确运行？看完这篇就够了

微信小程序和网页应用在跨平台运行时，常因系统版本和设备差异导致功能失效或界面错乱，这带来了很多负面的用户体验，进而影响产品的口碑。

作为开发者，我们应该如何确保自己的应用能在各个平台中都能正确运行？

本文将为你系统梳理常见的设备兼容问题，并提供一套行之有效的解决方案。

小程序 platform 适配

在微信小程序中，platform 是系统信息（systemInfo）中的一个重要字段，用于表示当前运行环境的平台类型。开发者通常利用这一字段来识别不同设备或系统，进行针对性适配，让同一小程序在  Android、HarmonyOS Next、iOS 等不同平台上展现出符合各平台特性的用户体验。

例如，根据不同平台调整 Tabbar 的 bottom 值，避免与系统导航栏产生冲突等。

• 在手机场景，完整的判断逻辑应该包含 android、ohos 和 ios 这三种常见的手机设备。
• 在电脑场景，完整的判断逻辑应该包含 windows、ohos_pc 和 mac 这三种常见的电脑设备。

如果开发者在代码中未能正确适配 platform 字段，可能会在对应设备上出现白屏等严重问题，阻塞使用。

小程序platform适配导致的接口报错示例

小程序platform适配导致的UI紊乱示例

建议开发时参考如下代码进行 platform 适配。

首先在小程序 app.js 文件中写入如下代码，将设备信息存入全局变量：

后续在各个页面使用时可直接引用 getApp() 的全局变量来做逻辑判断，或 setData 用于页面判断：

使用了 platform 的开发者可以参考上述方法优化，确保自己开发的小程序在  Android、HarmonyOS Next、iOS 等不同操作系统上或设备上都能以预期的方式运行。

网页应用UA适配

UA 的全称是 User-Agent（用户代理标识），是浏览器或客户端在发送 HTTP 请求时，通过请求头传递给服务器的一个标识字符串，用于描述客户端的信息。 

例如，在不同设备的微信中访问网页时对应的 UA 字符串：

iOS：

Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.65(0x1800412f) NetType/WIFI Language/zh_CN

Android：

Mozilla/5.0 (Linux; Android 12; Pixel 4 XL Build/SQ3A.220705.003.A1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/142.0.7444.102 Mobile Safari/537.36 MMWEBID/4681 MicroMessenger/8.0.65.2941(0x28004141) WeChat/arm64 Weixin GPVersion/1 NetType/WIFI Language/zh_CN ABI/arm64

HarmonyOS Next：

Mozilla/5.0 (Phone; OpenHarmony 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile MicroMessenger/8.0.13.33(0xf3800d21) Weixin NetType/WIFI Language/zh_CN MMWEBID/7944 MMWEBSDK/202511100006 XWEB/1140363

HarmonyOS Next PC：

Mozilla/5.0 (PC; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090a13) UnifiedPCOHOSWechat(0xf2b4100d) XWEB/2532 Flue

Windows PC：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x63090a13) UnifiedPCWindowsWechat(0xf2541510) XWEB/17071 Flue

Mac PC：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) MacWechat/3.8.7(0x13080712) UnifiedPCMacWechat(0xf26412f0) XWEB/16816 Flue

微信客户端浏览器的 UA 字符串包含设备类型：iPhone/OpenHarmony/Android 信息，通过 UA 适配，开发者可以根据不同设备类型加载相应的资源文件，调整界面布局或交互方式，从而提供最适合当前设备的用户体验。

• 在手机场景，完整的判断逻辑应该包含 isAndroid、isHarmony和 isIOS这三种常见的手机设备类型。
• 在电脑场景，完整的判断逻辑应该包含 isWindows、isHarmonyPC和 isMAC 这三种常见的电脑设备类型。

如果开发者在代码中未能正确适配 UA 字段，可能会在部分设备上出现交互无响应、显示错误页面等严重问题。

例如下面 2 个例子，就是没有包含 isHarmony 的处理逻辑，造成用户明明是在手机端使用，却出现了 PC 版的页面，提示"请在移动端访问"的问题。

未正确 UA 适配导致手机端显示 PC 页面

未正确 UA 适配导致无法使用问题

建议开发时参考如下代码进行 UA 适配：

使用时：

使用了 UA 的开发者可以参考上述方法优化，确保自己开发的小程序、网页应用，在 Android、HarmonyOS Next、iOS 等不同操作系统上，以及手机、PC 等不同设备上都能以符合预期的方式运行。