Cao Note

外观

UniApp 条件编译与跨平台 ​

跨平台兼容 ​

平台差异 ​

  • H5 端：有跨域限制；支持 v-html；导航栏和 tabbar 是 div 模拟
  • 小程序端：强制 https；需配置服务器白名单；不支持 v-html
  • App 端：iOS 隐私和虚拟支付控制严格；Android 国产 rom 兼容性差异

传统 Web 开发注意 ​

  • JS：非 H5 端不能使用 document、window、localstorage 等浏览器对象。App 端通过 renderjs 操作
  • Tag：div → view，span → text，a → navigator，img → image
  • CSS：推荐 flex 布局；单位使用 rpx

H5 开发注意 ​

  • 发行路径配置 manifest.json → h5 → router → base
  • 第三方 JS 引入：npm 或 manifest.json 的 template 配 html 模板
  • --window-top 和 --window-bottom 解决导航栏定位问题
  • 组件内不支持 onLoad、onShow 等页面生命周期

小程序开发注意 ​

  • vendor.js 过大：运行时勾选压缩代码，或使用分包优化
  • 自定义组件名称不能以 wx 开头

平台判断 ​

编译期判断（条件编译） ​

js
// #ifdef H5
alert('只有h5平台才有alert方法')
// #endif
// #ifdef H5
alert('只有h5平台才有alert方法')
// #endif

运行期判断 ​

js
switch (uni.getSystemInfoSync().platform) {
  case 'android': console.log('运行Android上'); break
  case 'ios': console.log('运行iOS上'); break
  default: console.log('运行在开发者工具上')
}
switch (uni.getSystemInfoSync().platform) {
  case 'android': console.log('运行Android上'); break
  case 'ios': console.log('运行iOS上'); break
  default: console.log('运行在开发者工具上')
}

条件编译 ​

条件编译是用特殊注释作为标记，编译时根据注释将代码编译到不同平台。

语法 ​

  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除某平台均存在

平台参数 ​

值生效条件
VUE3Vue3
APP-PLUSApp
APP-PLUS-NVUE / APP-NVUEApp nvue
APP-ANDROIDApp Android（仅 uts）
APP-IOSApp iOS（仅 uts）
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-LARK飞书小程序
MP-QQQQ 小程序
MP-KUAISHOU快手小程序
MP-JD京东小程序
MP-360360 小程序
MP所有小程序
QUICKAPP-WEBVIEW所有快应用

API 条件编译 ​

js
// #ifdef APP-PLUS
平台特有的API实现
// #endif

// #ifdef H5 || MP-WEIXIN
多平台支持
// #endif
// #ifdef APP-PLUS
平台特有的API实现
// #endif

// #ifdef H5 || MP-WEIXIN
多平台支持
// #endif

组件条件编译 ​

html
<!-- #ifdef MP-WEIXIN -->
<official-account></official-account>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<official-account></official-account>
<!-- #endif -->

样式条件编译 ​

css
/* #ifdef APP-PLUS */
平台特有样式
/* #endif */
/* #ifdef APP-PLUS */
平台特有样式
/* #endif */

必须使用 /* */ 注释写法

pages.json 条件编译 ​

json
{
  "pages": [
    /* #ifdef APP-PLUS */
    { "path": "pages/app-only-page" }
    /* #endif */
  ]
}
{
  "pages": [
    /* #ifdef APP-PLUS */
    { "path": "pages/app-only-page" }
    /* #endif */
  ]
}

static 目录条件编译 ​

┌─static
│  ├─mp-weixin
│  │  └─a.png     // 仅微信小程序
│  └─b.png         // 所有平台
┌─static
│  ├─mp-weixin
│  │  └─a.png     // 仅微信小程序
│  └─b.png         // 所有平台

整体目录条件编译 ​

在根目录创建 platforms 目录，下建 app-plus、mp-weixin 等子目录。

宽屏适配 ​

leftWindow / rightWindow / topWindow ​

在 pages.json 中配置：

json
{
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": { "height": "44px" }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": { "width": 300 }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": { "width": "calc(100vw - 400px)" },
    "matchMedia": { "minWidth": 768 }
  }
}
{
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": { "height": "44px" }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": { "width": 300 }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": { "width": "calc(100vw - 400px)" },
    "matchMedia": { "minWidth": 768 }
  }
}

适用场景：新闻列表（左侧列表 + rightWindow 详情）、PC Admin（leftWindow 导航）。

match-media 组件 ​

媒体查询适配组件，满足条件时展示，否则隐藏：

html
<match-media :min-width="768">
  <view>宽屏下显示</view>
</match-media>
<match-media :min-width="768">
  <view>宽屏下显示</view>
</match-media>

rpx 在宽屏下的控制 ​

在 pages.json 中限制 rpx 最大适配宽度：

json
{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 960,
    "rpxCalcBaseDeviceWidth": 375,
    "rpxCalcIncludeWidth": 750
  }
}
{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 960,
    "rpxCalcBaseDeviceWidth": 375,
    "rpxCalcIncludeWidth": 750
  }
}

Copyright © 2024-present xiaocao