uniapp

uni-app 使用 vue 的语法+小程序的标签和 API。

开发规范

组件标签靠近小程序规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni
flex 布局
在不同的平台表现存在一定差异，推荐统一使用 。

目录结构

├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js Vue 初始化入口文件
├─App.vue 应用配置，用来配置 App 全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路由、导航条、选项卡等页面类信息

css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

资源路径

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->

<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);

• 背景图片：微信小程序不支持相对路径（真机不支持，开发工具支持）

生命周期

应用生命周期

应用生命周期仅可在 App.vue 中监听，在其它页面监听无效。
onLaunch、onShow、onHide

页面生命周期

onLoad、onShow、onReady

组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。

路由

在 pages.json 里配置每个路由页面的路径及页面样式。

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

页面样式和布局

uni-app 有 vue 页面和 nvue 页面。vue 页面是 webview 渲染的、app 端的 nvue 页面是原生渲染的。在 nvue 页面里样式比 web 会限制更

尺寸单位

微信小程序设计了 rpx 解决这个问题。uni-app 在 App 端、H5 端都支持了 rpx，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx 计算配置。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
举例说明：

• 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 _ 100 / 750，结果为：100rpx。
• 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 _ 100 / 640，结果为：117rpx。
• 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

样式

在 uni-app 中不能使用 * 选择器。
page 相当于 body 节点。

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

NPM

为多端兼容考虑，建议优先从 uni-app 插件市场 获取插件。直接从 npm 下载库很容易只兼容 H5 端。

import package from 'packageName'
const package = require('packageName')