---
order: 1
navTitle: 新建移动App
---
# 新建移动App

新建一个移动App步骤如下：

<video controls muted playsinline width="100%">
  <source src="./images/new-app.mp4" type="video/mp4">
</video>

1. 进入项目的**应用**模块，点击新建，选择**移动分组**中的默认移动模板
2. 对应用进行命名，如`移动App`，进入[移动App设计器](#designer)
3. 接下来可以将**应用资源面板**或**项目资源区**中的移动页面拖入**内容区**，即可在首页中浏览该资源。具体操作可查看[添加资源到移动App](#add)
4. 保存后，在**应用**模块下点击即可查看，右键选择**编辑**可以继续修改该App应用
5. 也可以打开右上角的二维码，在同一局域网下，使用手机扫码查看该移动App

## 移动App设计器{#designer}

系统提供了所见即所得的移动App设计器，可以通过拖拉拽快速实现移动App，与[门户设计器](../portal-page/new-portal.md#designer)一致。App设计器界面如下图所示：

![新建移动app](./images/2021-07-25-17-11-00.png)

## 添加资源到移动App{#add}

移动App是门户的一种，可以引入各种资源（包括仪表板、报表、SuperPage等）组合成一个具有完整业务意义的移动App。只需将制作好的移动资源拖入到**App内容区**即可，具体方法可查看[添加资源到门户页面](../portal-page/new-portal.md#add)，也可以[调整资源顺序](../portal-page/new-portal.md#order)以及[移除资源](../portal-page/new-portal.md#delete)。

:::tip

移动App中需要引用移动资源，以保证移动上的效果适配。移动资源制作方法可查看[仪表板-移动](../../data-viz/dash/design/mobile/README.md)、[SuperPage-移动](../superpage/design/mobile.md)

:::

### 移动App内容属性设置{#attributes}

在App内容区下半部分，可以设置节点属性，包括**标题**、**图标**、**布局方式**以及其他一些**高级**设置，具体可查看[门户内容属性设置](../portal-page/new-portal.md#attributes)。移动App的布局可查看文档[移动App布局方式](./mobile-layout.md)

## 移动App页面属性设置{#settings}

在属性栏中，可设置App页面的样式及交互事件。

1. 在**属性栏**>**样式**下可设置移动App页面的标题栏背景，背景填充方式可参考[填充](../superpage/design/style/README.md#filling)样式。标题栏在App页面的顶端，如下图所示。
2. 在**属性栏**>**交互**下可设置移动App页面下拉刷新功能，下拉页面，即可在页面顶部时出现刷新数据，与[刷新数据](../superpage/design/action/refresh-data.md)交互功能一致。

![标题栏背景](./images/2021-07-26-14-48-34.png)