什么是uni-app？（简介）

uni-app 是一个使用 Vue.js 开发跨平台应用程序的前端框架。

开发者编写Vue.js代码，uni-app将其编译到iOS、微信小程序等多个平台，保证正确运行并提供优良的体验。

uni-app继承自Vue.js，提供完整的Vue.js开发体验。

uni-app组件规范、扩展API与微信小程序基本一致。

有一定Vue.js、微信小程序开发经验的开发者，可以快速上手uni-app，开发出兼容多终端的应用程序。

uni-app提供条件编译优化，可以让你优雅地为某一平台编写个性化代码，调用专有能力，而不影响其他平台。

uni-app打包进App时依然采用5+引擎，5+所有能力在uni-app中都可以使用，App端的运行性能与微信小程序基本一致。

对于技术人员来说：没必要学习那么多平台开发技术，研究那么多前端框架，学习基于vue的uni-app就足够了。

对于企业来说：降低成本，增加用户，uni-app 是一个高效的工具

uni-app的优势uni-app是一个可以应用于多终端的开源框架，一套代码可以同时生成ios、H5、微信小程序、支付宝小程序、百度小程序等。uni-app对前端开发者比较友好，学习成本比较低。首先uni-app是基于vue.js实现的，其次封装的组件和微信小程序一模一样，所以对于现在主流的前端人员来说，学习成本几乎为零。如果你是前端，没有接触过vue和微信小程序，那么建议你多加练习。uni-app采用HBX进行开发，HBX对vue语法的支持可以说是比较齐全的，使用HBX进行开发可以说是非常快的，开发速度比较快。uni-app扩展能力强，封装了H5+，支持nvue，还支持原生和ios开发。 原来的移动应用、H5应用都可以转为uni-app应用，uni-app是国货，我们一定要支持国货。

uni-app的缺点：uni-app才出来没多久，还有很多不完善的地方，坑也不少，建议不喜欢爬坑的朋友少用uni-app，对于使用中的一些bug和问题，官方的响应不是很及时。

uni-app功能框架浏览图

工具安装

首先，开发者需要下载并安装

然后点击工具栏中的文件->新建->项目：

创建 uni-app

项目结构介绍

目录结构和小程序类似，但是多了一个基础组件文件夹。

uni-app 有自带的插件库，点击安装即可，还支持 npm 包管理，点击工具>>插件安装进行配置。

uni-app开发规范

为了实现微信小程序与原生APP跨终端兼容，uni-app考虑到编译速度、运行性能等因素，约定了如下开发规范：

页面文件遵循Vue单文件组件（SFC）规范

每个 .vue 文件包含三种类型的顶级语言块：

1. 最多包含一个模板模块

2.最多包含一个脚本模块

3. 可以包含一个或多个样式模块，标签可以有 或 属性，同一个组件中可以混合多种封装方式，比如可以包含css、sass、less等多种封装方式。

提示：允许您添加可选的自定义块，并支持导入自定义块。请注意，src 导入遵循与模块请求相同的路径解析规则，这意味着相对路径需要以 ./ 开头

组件标签都贴近微信小程序规范，所以如果你有微信开发经验，那么使用uni-app就能快速上手。没有经验也不要怕，即使不懂微信小程序也能快速上手。

注意：不能使用标准HTML标签，也不能使用js来操作DOM。

接口能力（JS API）接近微信小程序规范，但前缀wx需要替换为uni

数据绑定和事件处理接近Vue.js规范，补充了App和页面的生命周期，为了兼容多端操作，建议使用flex布局进行开发

uni-app 风格和布局

注意:请删除 app.vue 中的全局样式：view{display:flex;} 在需要flex的时候使用flex即可。

测量单位

uni-app框架目前只支持长度单位px和%。与传统网页不同，px是相对于基准宽度的单位，已适配移动端屏幕，其原理与rem类似。

PS:uni-app的基准宽度为。

开发者只需要根据设计稿确定框架样式中的px值即可，设计稿中的1px与框架样式中的1px的换算公式为：设计稿中的1px/设计稿基准宽度=框架样式中的1px/

也就是说，uni-app 中页面元素的宽度计算公式为：*设计稿中元素的宽度/设计稿基准宽度

例如：

假如设计稿的宽度为 ，设计稿上元素A的宽度为 ，则uni-app中元素A的宽度应该设置为：750*100/640 ，结果为： 。

假如设计稿的宽度为 ，设计稿上元素B的宽度为 ，则uni-app中元素B的宽度应该设置为：750*200/375 ，结果为： 。

样式导入

使用@语句来导入外部样式表，@后面是需要导入的外部样式表的相对路径，;表示语句的结束。

示例代码： <style> @import "../../common/uni.css"; .uni-card { box-shadow: none; } </style>

内联样式

框架组件支持使用和属性来控制组件的样式。

：静态样式均写入 ，动态样式在运行时接收并解析，请尽量避免将静态样式写入 ，以免影响渲染速度。

<view style="color:{{color}};" />

：用于指定样式规则。其属性值为样式规则中的类选择器名称（样式类名）的集合。样式类名前面不需要加.，样式类名之间以空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：

. . 选择所有带有 ="" 的组件

#id # 选择 id="" 的组件

视图选择所有视图组件

，视图，选择视图组件和所有文档的所有组件

::view:: 在view组件后插入内容，仅适用于微信小程序及5+应用

::view:: 在视图组件前插入内容。仅适用于微信小程序及 5+ 款应用

全局和本地风格

App.vue 中定义的样式是全局样式，会应用到每一个页面，而目录中的 vue 文件中定义的样式是局部样式，只会应用到相应的页面，并且会覆盖 App.vue 中相同的选择器。

注意：你可以在App.vue中通过@语句导入外部样式，并且它会在每个页面上起作用。

弹性布局

为了支持跨平台，框架建议使用 Flex 布局，关于 Flex 布局的更多信息可以参考 A to 等外部文档。

注意

1.请删除app.vue中的全局样式：view{:flex;}，需要flex时就使用flex。

2.在App.vue中可以通过@语句引入外部样式，这个样式也会作用于每一个页面。

总结

本文介绍了uin-app框架的介绍、安装、创建以及基本样式布局，如有疑问请前往官网