uni-app 开发标准与文件组织

uni-app 开发标准与文件组织

为了确保应用在多个终端上的兼容性，并考虑到编译速度和运行性能等因素，uni-app 设计了一套全面的开发标准。

页面文件组织

页面文件应遵循一套明确的组织原则，以方便维护和扩展。组件标签的设计尽可能贴近小程序的标准，以便开发者能够快速上手。

接口功能（JS API）

接口功能（JS API）的设计也尽量与微信小程序保持一致，但是前缀从“wx”改成了“uni”，这一改动使得开发者可以在不同的平台上无缝切换。

数据绑定与事件处理

数据绑定和事件处理遵循 Vue 的模式，同时增加了对 App 和页面生命周期的支持，从而增强了应用的功能性和灵活性。

兼容性开发

为了支持多终端的操作，推荐使用 flex 布局来开发页面，这样可以更好地适应不同设备的屏幕尺寸。

项目目录结构

uni-app 项目的默认目录结构如下：

├─ components - 符合 Vue 组件规范的 uni-app 组件目录
│ └─ comp-a.vue - 可重用的 Vue 组件
├─ pages - 存储业务页面文件的目录
│ ├─ index
│ │ └─ index.vue - 索引页
│ └─ list
│ └─ list.vue - 列表页
├─ static - 存储静态资源（如图片、视频等）的目录
├─ wxcomponents - 存储小程序组件的目录
├─ main.js - Vue 初始化入口文件
├─ App.vue - 用于配置全局样式并监控 App 生命周期
├─ manifest.json - 配置 App 名称、appid、徽标、版本等打包信息
└─ pages.json - 配置页面路径、导航栏、选项卡等页面信息