主页对应于所有页面的第一页。如果您在设计过程中，可以拖动页面对其进行排序。

2.3.2 页面属性设置

在属性管理中，可以设置页面导航背景、导航字体颜色、页面背景图片颜色、页面整体字体大小、页面字体颜色等。

2.3.3 基本组件设计页面

点击左侧的基础组件，包括常用的基础组件、容器组件、表单组件、图表组件。您只需手动选择组件进入设计区，然后在属性中修改组件对应的属性即可设计出您想要的效果。

例如，如果我拖动一个文本内容组件，请选择该组件并按住鼠标左键并将其拖动到设计区域中。右侧的属性可用于有针对性地设置组件属性和组件样式。所见即所得。

2.3.4 组件模板设计页面

系统内置了一系列常用的组件模板。如果您认为哪个模板适合您，只需点击它即可。整个组件模板将添加到设计区域。您可以拖动整个组件模板来调整顺序。也可以通过右侧的属性进行调整。可以相应地设置组件属性和组件样式。

2.3.5 页面模板设计页面

页面模板设计页面相当于页面级模板复用。系统内置了一系列常用的页面模板。如果您认为哪个模板适合您，您只需点击它，整个页面就会被该页面模板替换。

2.4 全局设置

全局设置主要是针对应用级底部菜单的设置，包括设置底部菜单的默认图标、选中图标、菜单标题、页面链接地址、默认标题颜色、选中标题颜色。如果用户设置了，代码最终会在.json下生成相关属性。如果不设置，则不会生成相关的底部菜单配置。

2.5 查看代码

点击工具栏查看源代码区域可以查看当前页面的代码。用户可以快速将当前页面的代码复制到现有项目中进行替换或创建新页面进行开发。

2.6 出口申请

点击工具栏区域，导出源代码，输入应用ID，这里我们选择导出源代码，设置完成后点击确定，即可下载源代码。下载的代码会以压缩包的形式下载。

2.7 生成应用程序 2.7.1 环境搭建

下载

下载地址：-高效极客技巧

它是一个通用的前端开发工具，但是专门针对uni-app进行了增强。

下载后默认不包含uni-app插件。运行或发布uni-app时，会提示安装uni-app插件，下载插件后才能使用。

2.7.2 项目建设

解压并导出应用压缩包文件，打开前端开发工具，点击文件——导入——从本地目录导入——选择解压目录——然后点击选择目录。

2.7.3H5运行与发布

2.7.3.1 本地应用与调试

中，共有三个运行入口：顶部菜单、运行按钮、快捷键。

1. 顶部菜单运行

2. 工具栏上的运行按钮

3. 快捷键应该有效

运行快捷键是[Ctrl+r]

2.7.3.2 内置浏览器应该可以工作

打开uni-app项目页面，点击右上角预览按钮可以在内置浏览器中打开Web运行结果，或者右键打开控制台调试。

修改并保存项目源代码时，右侧浏览器内容可以自动刷新。

当然，我们也可以回到DIY可视化来设计相应的页面。设计完成后，点击查看源代码，然后复制源代码并替换。

2.7.3.3 发布

发行准备

点击.json中的基本配置，生成uni-app应用标识。在获取ID之前，您需要先绑定用户账号。

H5发布

点击菜单栏--发布--网站PC Web或手机H5（适用uni-app）。单击释放。如果没有配置发布准备，发布时会出现调试窗口提示。释放成功后，根目录下会生成\dist\\h5文件夹。该文件对应于发布版本。如果你已经有自己的网站，只需要将这个目录下的所有文件复制到自己的服务器上，然后通过自己的域名访问即可。

2.7.4 微信小程序运营与分发

2.7.4.1 下载微信开发者工具

微信开发者工具下载地址：

稳定版 |微信开放文档

下载完成后，安装微信小程序开发者工具。

2.7.4.2 微信小程序调试

点击运行图标——微信开发者工具，会自动与开发者工具建立关系，自动创建应用并用微信开发者工具打开。如果您尚未登录微信开发者工具，系统会提示您使用微信登录。请使用微信扫码登录，登录后重新发出。如果成功，微信小程序会自动打开主页。

2.7.4.3 发布

点击菜单栏-发布-小程序微信（仅适用于uni-app），会弹出一个窗口，在窗口中输入小程序。从wx开始，如果您没有自己的微信小程序，请到微信公众平台申请自己的微信小程序来获取。

点击后，程序将重新编译。编译完成后，使用微信开发者工具将代码上传到公众平台。