uniapp学习

一、什么是uni-app?
Uni-app是一个跨平台开发框架，可以帮助开发者快速构建多端应用，包括Web、iOS、Android、H5、小程序等。Uni-app的特点是使用Vue.js作为开发语言，可以在不同的移动端平台上共享组件库和业务逻辑代码，大大提高了开发效率和代码重用率。同时，Uni-app提供了丰富的原生API和插件来实现更多功能。

二、uni-app的特点与优势
uni-app的特点

跨平台开发

uni-app可以实现一次编码，同时生成多个应用程序，包括iOS、Android、H5、小程序等。开发者只需要使用Vue.js框架进行开发，而不需要考虑不同平台的差异，大大降低了应用程序的开发难度和复杂度。

统一的开发语言和工具

uni-app的开发语言是Vue.js，它是一种基于组件化开发的前端框架，易于学习和使用。uni-app提供了一套完整的开发工具，包括Uni-app Cli、HBuilder X等，使得开发者可以在同一个环境下进行开发、调试和打包。

独特的基于条件编译的代码生成技术

uni-app采用了一种名为“基于条件编译的代码生成技术”，能够根据应用程序平台的不同，编译出特定的应用程序代码。开发者只需要编写一份代码，就可以生成多个应用程序，大大提高了开发效率。

多种组件库支持

uni-app支持多种UI组件库，包括Vant、Mint UI、uView等，开发者可以根据自己的需求选择适合的组件库，快速构建应用程序。

uni-app的优势

减少开发成本和时间、一次开发，多端部署、良好的性能和用户体验、开放的生态系统。

三、环境搭建

1.下载HBuildeX

HBuilderX-高效极客技巧

推荐官网HBuilderX，天然整合uniapp。

2.创建uniapp项目

HBuilderX下载下来后，直接双击运行HBuilderX.exe文件即可，它是免安装的。

然后我们新建一个uniapp项目，按照下图操作。

然后它会默认生成项目的基本结构。

3.在浏览器运行

然后第一次运行时，控制台会提示自动去下载相关的插件，下载完成后需要你再次重新运行。

四、介绍项目目录和文件作用
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue 是我们的根组件，所有页面都是在App.vue下进行切换，是页面入口文件，可以调用应用的生命周期函数。

main.js 是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批 scss 变量预置。

unpackage 就是打包目录，在这里有各个平台的打包文件

pages 所有的页面存放目录

static 静态资源目录，例如图片等

components 组件存放目录

五、开发规范概述
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：

页面文件遵循Vue单文件组件规范

组件标签靠近小程序规范，详细见uni-app组件规范

接口能力（js api）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范

数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期

为兼容多端运行，建议使用flex布局进行开发

六、全局配置文件（pages.json）

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

1.globalStyle(全局样式）

用于设置应用的状态栏、导航条、标题、窗口背景色等。

ps：以下我都只列举了个人认为比较常见的属性，如果有需要强烈建议去官网看，最全。

导航栏：背景颜色 、标题颜色、标题文本

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F8F8F8	导航栏背景颜色（同状态栏背景色）	APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	black	导航栏标题颜色及状态栏前景颜色，仅支持 black/white	支付宝小程序不支持，请使用 my.setNavigationBar
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）

导航栏：开启下拉刷新、下拉背景、下拉样式

属性	类型	默认值	描述	平台差异说明
backgroundColor	HexColor	#ffffff	下拉显示出来的窗口的背景色	微信小程序
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light	微信小程序
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

2.pages（页面路由）

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下： 

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考下方 pageStyle

Tips：

pages节点的第一项为应用入口页（即首页）

应用中新增/减少页面，都需要对 pages 数组进行修改

文件名不需要写后缀，框架会自动寻找路径下的页面资源

例如项目创建时默认生成的：

七、创建新页面和页面的配置

可以直接新建页面，也可以先创建目录，再创建文件

然后去pages.json文件中设置页面路径，同时也可以配置一下页面样式。

我们先通过浏览器打开看看，输入该路径即可看到刚刚创建的页面。