uniapp

深碍√TFBOYSˉ_ 2022-08-31 06:59 254阅读 0赞

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 目录下。

### 资源路径 ###

<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')