本文详细介绍了Uni-app，一种基于Vue.js的跨平台应用开发框架，其特点、基础使用（如pages文件夹、App.vue和配置文件）以及开发规范，涵盖了从开发环境到部署的全过程。
1.什么是Uni-app
Uni-app是一个基于Vue.js框架开发的跨平台应用开发框架，它可以让开发者使用Vue.js语法开发一次代码，然后通过编译工具生成可以运行在多个平台上的应用，包括但不限于微信小程序、H5、安卓应用和iOS应用等。Uni-app的特点是可以实现一套代码多端运行，大大提高了开发效率，同时也降低了维护成本。
Uni-app具有以下特点：
1. 跨平台开发：Uni-app支持一套代码同时运行在多个平台，大大提高了开发效率，减少了开发成本和维护成本。
2. 基于Vue.js：Uni-app使用Vue.js作为开发语言，开发者可以利用Vue.js的语法和特性来进行开发，对于熟悉Vue.js的开发者来说学习成本较低。
3. 丰富的组件库：Uni-app提供了丰富的组件库和开发工具，开发者可以快速构建出功能丰富、界面美观的应用。
4. 灵活的调试和发布：Uni-app提供了多种调试和发布方式，开发者可以在浏览器中进行H5预览，也可以在微信开发者工具中预览小程序效果，或者在真机上进行调试。
5. 社区支持和活跃度高：Uni-app拥有庞大的开发者社区和活跃的开发者生态，开发者可以在社区中获取到丰富的资源和支持。
2.Uni-app的基础使用以及基础文件的作用
新建选择项目，然后点击创建
pags文件夹：
在Uni-app中,pages文件夹是用于存放应用页面的目录。每个页面通常由一个文件夹组成，文件夹名即为页面的路径;
static文件夹
在Uni-app中，static文件夹是用于存放静态资源的目录。这些静态资源通常是不需要经过编译处 理的文件，例如图片、字体文件、音频文件等。当应用打包时，这些静态资源会被原样复制到最终的构建目录中，可以直接通过相对路径进行访问;
App.vue
App.vue是 Uni-app 中的应用级 Vue 组件，它是整个应用的根组件。在 Uni-app 中负责管理应用的整体布局和全局配置，并作为其他页面组件的容器。
通常情况下包含以下几个重要部分：
模板部分（Template）：模板部分包含了应用的整体布局结构，通常包括导航栏、底部标签栏以及其他全局组件。
样式部分（Style）：样式部分包含了应用的全局样式，例如全局的字体设置、颜色定义等。
脚本部分（Script）：脚本部分包含了对应用的一些全局配置和事件处理的 JavaScript 代码，例如路由配置、全局数据、生命周期钩子函数等。
在 Uni-app 中,index.html是应用的入口 HTML 文件。它是整个应用的起点，浏览器加载应用时首先会加载和解析index.html文件，然后再加载应用的 JavaScript、CSS、图片等资源。
index.html
index.html文件通常包含了应用的基本结构和一些重要的元信息，例如：
HTML 结构：index.html文件包含了 HTML 的基本结构，包括<html>,<head>和<body>等标签。
元信息：<head>标签中通常包含了一些元信息，如编码格式 <meta charset="UTF-8" />、视口设置'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'+(coverSupport ? ', viewport-fit=cover' : '') + '" />')等。
引入资源：<head> 或 <body> 标签中通常会引入应用所需的 JavaScript 文件、CSS 文件以及其他静态资源，例如样式表、图标等。在 Uni-app 中，这些资源通常是由构建工具自动生成和管理的。
根容器：<div id="app"></div>通常位于 <body> 标签中，作为 Vue 应用的根容器，所有的 Vue 组件都会被挂载到这个容器中。
main.js
在 Vue.js 应用中，main.js 是应用的入口 JavaScript 文件。在 Uni-app 中也是如此，main.js 扮演着 Uni-app 应用的启动和配置的角色。
主要作用包括：
1.Vue 实例的创建
2.插件和组件的注册
3.路由的配置
4.状态管理的配置
5.全局样式和资源的引入
manifest.json
在 Uni-app 中，manifest.json文件用于配置小程序或 H5 应用的基本信息和特性，其中包括但不限于以下内容：
1.应用基本信息： 包括应用的名称、描述、作者等信息。
2.图标配置：指定不同尺寸和类型的图标文件，用于在桌面、启动屏等位置显示应用图标。
3.启动页面配置：指定应用启动时显示的页面，可以是一个具体的 URL 或路由路径。
4.主题色配置：指定应用的主题颜色，用于在浏览器工具栏、状态栏等位置显示。
5.显示模式配置：指定应用的显示模式，如浏览器窗口模式、全屏模式等。
6.缓存配置：指定需要缓存的文件列表，以便在离线时仍然可以访问应用。
7.权限配置：指定应用需要的权限，如摄像头、地理位置等。
8.语言配置：指定应用的默认语言和支持的其他语言。
page.json
在 Uni-app 中，page.json是用于配置页面相关信息的文件，它是 Uni-app 框架特有的配置文件之一。每个页面都可以有一个对应的page.json文件，用于定义该页面的特性、样式和行为。
page.json文件包含了一系列配置项，用于指定页面的路由、导航栏、下拉刷新、页面样式等，具体内容根据需要可以灵活配置，一般包括以下几个方面：
-
页面路径和导航栏配置：指定页面的路径、页面导航栏的样式和行为，如是否显示导航栏、导航栏背景色、标题文字颜色等。
-
下拉刷新配置：指定页面是否支持下拉刷新功能，并配置下拉刷新时的样式和行为。
-
页面样式配置：指定页面的背景色、文字颜色、顶部状态栏的样式等。
-
页面权限配置：指定页面需要的权限，如摄像头、地理位置等。
-
页面生命周期钩子函数配置：**指定页面的生命周期钩子函数，如页面加载时执行的函数、页面隐藏时执行的函数等。
-
其他配置项：**根据需要，还可以配置其他页面相关的内容，如页面的动画效果、页面的透明度等。
3.Uni-app的配置
1.全局配置：
全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。
配置项列表
2.应用配置：
应用配置主要在manifest.json文件里进行配置，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
配置项列表
3.页面配置
页面配置主要配置页面的样式、标题、导航栏等等，主要在page.json文件中的pages节点进行页面的配置，页面配置的权重高于全局配置
pages属性表
4.uni-app开发规范
uni-app开发规范遵循以下原则：
1、页面文件遵循Vue单文件组件
2、组件标签规范类似于微信小程序规范。
3、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。
4、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。
5、为了更好的兼容多端运行，建议使用Flex布局进行开发。
更多详细可参考课表：P26~P31
除此以外，uni-app项目的开发还需遵循以下规范：
1、目录结构规范
-
-
-
-
-
建议按照 uni-app 默认的目录结构组织项目，以保持统一性和易读性。
-
将不同功能和模块的文件放置在对应的目录下，如 pages 存放页面，components 存放组件等。
-
-
-
-
2、命名规范
-
-
-
-
-
文件名、组件名、变量名等统一使用小写字母，多个单词之间可以使用中划线连接，例如：my-page.vue、login.vue等等
-
-
-
-
3、代码规范
-
-
-
-
遵循 Vue.js 官方的代码规范，保持代码风格的统一性。
-
注意代码的缩进和格式，提高代码的可读性。
-
避免在模板中直接编写过多逻辑，尽量将逻辑处理移到 JS 部分。
-
合理使用生命周期函数，避免在页面加载时做过多的初始化操作。
-
-
-
4、样式规范
-
-
-
-
推荐使用预处理器编写样式，如 Less、Sass 等，以提高样式代码的可维护性。
-
统一使用 rpx 作为尺寸单位，以便在不同设备上进行适配。
-
避免在样式中直接使用颜色值和尺寸值，建议提取出来作为变量统一管理
-
-
-
5、注释规范
-
-
-
-
在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。
-
注释应该清晰简洁，描述代码的功能、参数和返回值等信息。
-
-
-
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
