uniapp心得收获

简介

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

优点

`uni-app`在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

框架

`uni-app`在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

能运行到多个平台

`uni-app`实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具。

实际运行效果

 

开发规范

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

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

`.vue`文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个`.vue`文件包含三种类型的顶级语言块`<template>`、`<script>`和`<style>`，还允许添加可选的自定义块：模块可自己上百度搜 太多了 这里就掠过了。

目录结构

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

 

资源路径

`template`内引入静态资源，如`image`、`video`等标签的`src`属性时，可以使用相对路径或者绝对路径。

 

生命周期

1，应用生命周期

`uni-app`支持`onLaunch`、`onShow`、`onHide`等应用生命周期函数。

 

2，页面生命周期

`uni-app`支持`onLoad`、`onShow`、`onReady`等生命周期函数。

 

路由

`uni-app`页面路由为框架统一管理，开发者需要在`pages.json`里配置每个路由页面的路径及页面样式。

所以`uni-app`的路由用法与`Vue Router`不同。

路由跳转

`uni-app`有两种页面路由跳转方式：使用`navigator`组件跳转、调用API跳转。

组件跳转：

<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">

    <button type="default">跳转到新页面</button>

</navigator>```

API跳转：

```js

uni.navigateTo({

    url: 'test?id=1&name=uniapp'

});

新建`navigator.vue`文件，添加组件跳转和API跳转，跳转到主页。

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以`#ifdef`或`#ifndef`加`%PLATFORM%`开头，以`#endif`结尾。

支持的文件

 

页面样式与布局

`uni-app`的`css`与`web`的`css`基本一致。

1，尺寸单位

用下图演示

这个设计稿的宽度为375px，其中组件宽度为330px，所以组件在`uni-app`中应该是`750 * 330 / 375` = `660rpx`。

`vue`页面支持下面这些普通H5单位：

- `rem`，根字体大小可以通过`page-meta`配置；

- `vh`，`viewpoint height`，视窗高度，`1vh`等于视窗高度的`1%`；

- `vw`，`viewpoint width`，视窗宽度，`1vw`等于视窗宽度的`1%`。

新建`style.vue`文件，添加`page-meta`来设置根字体大小。

在`style.vue`中添加块，通过`vw`、`vh`来设置宽高。

2，样式导入

使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。

在`style.vue`中添加块，添加样式表文件，设置块的宽高和背景颜色。

3，内联样式

框架组件上支持使用style、class属性来控制组件的样式。

- `style`：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。

在`style.vue`中添加块，通过内联样式，设置块的宽高和背景颜色。

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

4，选择器

目前支持的选择器有：

5，全局样式与局部样式

定义在`App.vue`中的样式为全局样式，作用于每一个页面。

在`pages`目录下 的`vue`文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖`App.vue`中相同的选择器。

6，css变量

uniapp提供内置CSS变量：

7，固定值

uniapp中以下组件的高度是固定的，不可修改：

8，Flex布局

为支持跨平台，框架建议使用`Flex`布局。

9，背景图片

uniapp支持使用在css里设置背景图片，使用方式与普通`web`项目大体相同，但需要注意以下几点：

- 支持`base64`格式图片。

- 支持网络路径图片。

- 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以`base64`方式方可使用。

- 使用本地路径背景图片时，尽量保证图片小于`40kb`。如果图片太大，需自行将其转换为`base64`格式使用，或挪到服务器上。

- 本地背景图片的引用路径推荐使用以`~@`开头的绝对路径。

- 微信小程序不支持相对路径。

10,字体图标

uniapp支持使用字体图标，使用方式与普通`web`项目相同，需要注意以下几点：

- 支持`base64`格式字体图标。

- 支持网络路径字体图标。

- 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以`base64`方式方可使用。

- 网络路径必须加协议头`https`。

- 使用本地路径图标字体时，尽量保证字体文件小于`40kb`。如果字体文件太大，需自行将其转换为`base64`格式使用，或挪到服务器上。

- 本地字体文件的引用路径推荐使用以`~@`开头的绝对路径。

 

字体使用示例：

新建`iconfont.vue`文件，添加字体图标。

11，NPM支持

uniapp支持使用npm安装第三方包