uni-app入门

1.uni-app的基本介绍

​​uni-app​​ 是一个使用 ​​Vue.js​​ 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微 信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

​即使不跨端，​​​uni-app​​​​也是更好的小程序开发框架（​​​​详见​​​）

具有vue和小程序开发经验，可快速上手uni-app

为什么要去学uni-app?

相对开发者来说，减少了学习的成本，因为只学会了uni-app之后，即可开发出IOS,Android,H5以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2.环境搭建

​开发者需先下载安装如下工具：

​

• HBuilderX：​​官方IDE下载地址​​

HBuilderX是通用的前端开发工具，但为​​uni-app​​做了特别强化。

下载App开发版，可开箱即用；如下载标准版，在运行或发行​​uni-app​​​时，会提示安装​​uni-app​​插件，插件下载完成后方可使用。

3.​​创建uni-app项目并运行​​

​在点击工具栏里的文件 -> 新建 -> 项目：

在微信开发者工具里运行：

​注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。

4.目录结构

一个uni-app工程，默认包含如下目录及文件：

5.开发规范

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

• 页面文件遵循 ​​Vue 单文件组件 (SFC) 规范​​
• 组件标签靠近小程序规范，详见​​uni-app 组件规范​​
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 ​​wx​​​ 替换为 ​​uni​​​，详见​​uni-app接口规范​​
• 数据绑定及事件处理同 ​​Vue.js​​ 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

6.globalStyle全局配置

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

​它类似微信小程序中​​​​app.json​​​​的页面管理部分。注意定位权限申请等原属于​​​​app.json​​​的内容，在uni-app中是在manifest中配置。

​​配置项列表​​

7.创建新页面

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

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

​

8.配置基本的tabbar

9.condition启动模式配置

示例：