百度amis框架移动端适配指南

束辉煊Darian

于 2025-06-02 09:02:33 发布

阅读量429

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00728/article/details/148375080

百度amis框架移动端适配指南

amis 前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/gh_mirrors/am/amis

百度amis作为一个优秀的前端低代码框架，提供了强大的移动端适配能力。本文将详细介绍amis在移动端的展现方式、配置方法以及最佳实践。

移动端原生UI体验

从1.6.0版本开始，amis默认在移动端下使用仿原生UI的展现方式。这种设计理念让移动端用户获得更接近原生应用的交互体验，例如：

日期选择器会从底部弹出
下拉选择采用全屏或半屏模式
表单输入更符合移动端操作习惯

这种仿原生UI的实现是基于移动端特性全新开发的组件，虽然提供了更好的用户体验，但目前可能不支持某些PC端的高级功能（如select组件的搜索过滤等）。

如何控制移动端UI

全局关闭移动端UI

如果你需要在整个应用中禁用移动端UI，可以在初始化时配置：

amis.embed(
  '#root',
  {
    // amis schema配置
  },
  {
    // 初始props
  },
  {
    theme: 'antd',
    useMobileUI: false // 禁用移动端UI
  }
);

组件级关闭移动端UI

如果只想对特定组件禁用移动端UI，可以直接在组件配置中设置：

{
  "type": "select",
  "useMobileUI": false
}

移动端专属配置

amis提供了强大的移动端差异化配置能力，通过mobile属性可以针对移动端覆盖默认配置。

基础用法

{
  "type": "form",
  "body": [{
    "name": "email",
    "type": "input-email",
    "label": "邮箱：",
    "mobile": {
      "name": "phone",
      "type": "text",
      "label": "电话：",
      "validations": {
        "isPhoneNumber": true
      }
    }
  }]
}

在这个例子中，PC端会显示邮箱输入框，而移动端会显示电话输入框并自动添加电话号码验证。

高级用法

mobile属性可以出现在任何配置层级，支持替换父节点的任意属性：

{
  "type": "form",
  "body": [{
    "name": "email",
    "type": "input-email",
    "label": "邮箱："
  }],
  "mobile": {
    "body": [{
      "name": "phone",
      "type": "input-text",
      "label": "电话：",
      "validations": {
        "isPhoneNumber": true
      }
    }]
  }
}

这种配置方式特别适合需要在移动端完全改变布局的场景。