如何确保你的小程序在各个平台都能正确运行？

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

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

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

小程序 platform 适配

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

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

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

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

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

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

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

// app.js
App({
    onLaunch() {
        // 小程序启动时直接存入全局变量
        this.device_info = getDeviceInfo()
    }
})
function getDeviceInfo() {
    const info = wx.getDeviceInfo()
    return{
        type: info.platform,// Platform 的值
        isAndroid: info.platform==='android',// 快速判断 Android
        isIos: info.platform==='ios',// 快速判断 iOS
        isOhos: info.platform==='ohos',// 快速判断 HarmonyOS Next
        isPc: info.platform==='windows'|| info.platform==='mac'|| info.platform==='ohos_pc',// 快速判断 PC 端
        isDevtool: info.platform==='devtools'// 快速判断开发者工具 （正常用户不会访问这个，仅开发者调试用）
    }
}

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

// 页面的 js 文件
const app = getApp()
Page({
    onLoad: function() {
        console.log('当前设备：', app.device_info.type)
        console.log('判断是否为 android：', app.device_info.isAndroid)
        // 写入 data，用于页面的判断逻辑
        this.setData({
            device_info: app.device_info
        })
    }
})

使用了 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 适配：

function getos() {
    const ua = window.navigator.userAgent.toLowerCase();

    const isWindows = ua.indexOf("windows") !== -1;

    const isHarmony = ua.indexOf("openharmony") !== -1;
    const isHarmonyPC = isHarmony && ua.indexOf("pc;") !== -1;

    const isRealIpadUA = ua.indexOf("ipad") !== -1;
    const isMaskedIpad = ua.indexOf("macintosh") !== -1 && navigator.maxTouchPoints > 1;  // 伪装 iPad: UA 包含 "macintosh" 但支持触控 (系统认为是桌面模式)
    const isMac = ua.indexOf("macintosh") !== -1;

    return {
        isWechat: ua.indexOf("micromessenger") !== -1,  // 是否为微信客户端浏览器

        isAndroid: ua.indexOf("android")!==-1 && !isHarmony,  // Android 手机，排除 Harmony
        isIphone: ua.indexOf("iphone")!==-1|| ua.indexOf("ipod")!==-1,  // Iphone 手机等移动设备
        isHarmony: isHarmony && !isHarmonyPC,  // Harmony 手机 (排除 Harmony PC)
        isIpad: isRealIpadUA || isMaskedIpad,  // iPad 或 伪装 Mac 的 iPad

        isWindows,      // Windows 电脑
        isHarmonyPC,    // 鸿蒙 PC
        isMac,          // Mac 电脑 (也包含桌面模式的 iPad)

        isPC: isMac || isWindows || isHarmonyPC  // 广义 PC：用于判断是否展示宽屏/桌面版 UI
    };
}

使用时：

const os  = getos()

if (os.isWechat) {}       // 微信客户端浏览器处理逻辑

// 移动端处理逻辑

if (os.isAndroid) {}      // Android 手机、平板处理逻辑
if (os.isHarmony) {}      // HarmonyOS 手机、平板处理逻辑
if (os.isIphone) {}       // Iphone 手机处理逻辑
if (os.isIpad) {}         // iPad 手机处理逻辑

// PC处理逻辑

if (os.isHarmonyPC) {}    // HarmonyOS PC处理逻辑
else if (os.isMac) {}     // Mac处理
else if (os.isWindows) {} // windows处理

if (os.isPC) {}           // 桌面版浏览器处理逻辑

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