uni-app 框架超详细新手入门

uni-app 框架超详细新手入门

什么是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功能框架浏览图

工具安装

首先开发者需要下载安装

然后点击工具栏中的File-->New-->：

创建uni-app

项目结构介绍

目录结构与小程序的目录结构基本类似，只是多了一些基本组件的文件夹；

uni-app有自己的插件库，点击安装即可。 而且，它还支持npm包管理。 单击“工具>>插件安装”进行配置。

uni-app开发规范

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

页面文件遵循 Vue 单文件组件 (SFC) 规范

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

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

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

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的基础宽度是750px。

开发者只需根据设计稿确定框架样式中的px值即可。 设计稿1px与框架样式1px的换算公式如下：设计稿1px/设计稿底宽=框架样式1px/750px

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

例如：

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

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

风格导入

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

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

内联样式

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

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

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

class：用于指定样式规则。 它的属性值是样式规则中的类选择器名称（样式类名称）的集合。 样式类名不需要带.，样式类名之间用空格分隔。

<view class="normal_view" />

选择器

目前支持的选择器有：

.class .intro 选择所有 class="intro" 的组件

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

view 选择所有视图组件

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

::after view::after 在视图组件后插入内容，仅对微信小程序和5+应用有效

::view:: 在视图组件前面插入内容，仅对微信小程序和5+应用有效

全局样式和局部样式

App.vue 中定义的样式是全局样式，适用于每个页面。 在pages目录下的vue文件中定义的样式是部分样式，仅适用于相应的页面，并且会覆盖App.vue中相同的选择器。

注意：大纲样式可以通过App.vue中的@语句导入，这也适用于每个页面。

弹性布局

为了支持跨平台，框架推荐使用Flex布局。 Flex布局请参考外部文档A Guide to等。

注意

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

2、大纲样式可以通过App.vue中的@语句导入，同样适用于每个页面。

总结

本文介绍了uin-app框架的介绍、安装、创建以及基本样式和布局。 如有疑问请访问官方网站