uni-app介绍⽂档总结
开发规范
基础组件
uni-app 为开发者提供了⼀系列基础组件，类似 HTML ⾥的基础标签元素。但 uni-app 的组件与 HTML 不同，⽽是与⼩程序相同，更适合⼿机端使⽤。
虽然不推荐使⽤ HTML 标签，但实际上如果开发者写了 div 等标签，在编译到⾮ H5 平台时也会被编译器转换为 view 标签，类似的还有span 转 text、a 转 navigator 等，包括 css ⾥的元素选择器也会转。但为了管理⽅便、策略统⼀，新写代码时仍然建议使⽤ view 等组件。Tips
所有组件与属性名都是⼩写，单词之间以连字符-连接。
根节点为<template> ，这个<template>下只能且必须有⼀个根<view>组件。这是vue单⽂件组件规范。
平台差异说明若⽆特殊说明，则表⽰所有平台均⽀持。
类型描述注解
Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型。
Number数字1, 2.5
String字符串"string"
Array数组[ 1, "string" ]
Object对象{ key: value }
EventHandler事件处理
handlerName是 methods 中定义的事件处理函数名
函数名
Any任意属性
组件列表
基础组件分为以下⼋⼤类：
视图容器（View Container）：
组件名说明
视图容器，类似于HTML中的div
可滚动视图容器
滑块视图容器
基础内容（Basic Content）：
组件名说明
图标
⽂字
富⽂本
进度条
表单组件（Form）：
标签名说明
按钮
表单
输⼊框
多项选择器
单项选择器
弹出式列表选择器
窗体内嵌式列表选择器
滑动选择器
开关选择器
标签
标签名
说明
vue json字符串转数组导航（Navigation ）：组件名
说明
页⾯链接。类似于HTML 中的a 标签
媒体组件（Media ）：组件名
说明⾳频相机图⽚视频直播播放
实时⾳视频录制，也称直播推流
地图（Map ）：组件名
说明地图
画布（Canvas ）：组件名
说明画布
webview （Web-view ）：组件名
说明
web 浏览器组件
⼀个uni-app ⼯程，默认包含如下⽬录及⽂件：
template 内引⼊静态资源，如image 、video 等标签的src 属性时，可以使⽤相对路径或者绝对路径，形式如下
注意
@开头的绝对路径以及相对路径会经过base64转换规则校验
引⼊的静态资源在⾮h5平台，均不转为base64。
H5平台，⼩于4kb 的资源会被转换成base64，其余不转。
⾃HBuilderX 2.6.6-alpha 起template 内⽀持@开头路径引⼊静态资源，旧版本不⽀持此⽅式
App 平台⾃HBuilderX 2.6.9-alpha 起template 节点中引⽤静态资源⽂件时（如：图⽚），调整查策略为【基于当前⽂件的路径搜索】，与其他平台保持⼀致
⽀付宝⼩程序组件内 image 标签不可使⽤相对路径
js ⽂件或script 标签内（包括renderjs 等）引⼊js ⽂件时，可以使⽤相对路径和绝对路径，形式如下
┌─components            uni-app 组件⽬录│  └─comp-a.vue        可复⽤的a 组件
├─hybrid                存放本地⽹页的⽬录，详见
├─platforms            存放各平台专⽤页⾯的⽬录，详见├─pages                业务页⾯⽂件存放的⽬录│  ├─index
│  │  └─index.vue      index 页⾯│  └─list
│    └─list.vue        list 页⾯
├─static                存放应⽤引⽤静态资源（如图⽚、视频等）的⽬录，注意：静态资源只能存放于此├
─wxcomponents          存放⼩程序组件的⽬录，详见├─main.js              Vue 初始化⼊⼝⽂件
├─App.vue              应⽤配置，⽤来配置App 全局样式以及监听 应⽤⽣命周期├─manifest.json        配置应⽤名称、appid 、logo 、版本等打包信息，详见└─pages.json            配置页⾯路由、导航条、选项卡等页⾯类信息，详见
<!-- 绝对路径，/static 指根⽬录下的static ⽬录，在cli 项⽬中/static 指src ⽬录下的static ⽬录 --><image class="logo" src="/static/logo.png"></image><image class="logo" src="@/static/logo.png"></image><!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
// 绝对路径，@指向项⽬根⽬录，在cli 项⽬中@指向src ⽬录
注意
js ⽂件不⽀持使⽤/开头的⽅式引⼊
css ⽂件或style 标签内引⼊css ⽂件时（scss 、less ⽂件同理），只能使⽤相对路径
注意
⾃HBuilderX 2.6.6-alpha 起⽀持绝对路径引⼊静态资源，旧版本不⽀持此⽅式
css ⽂件或style 标签内引⽤的图⽚路径可以使⽤相对路径也可以使⽤绝对路径，需要注意的是，有些⼩程序端css ⽂件不允许引⽤本
地⽂件（请看注意事项）。
Tips
引⼊字体图标请参考，
@开头的绝对路径以及相对路径会经过base64转换规则校验
不⽀持本地图⽚的平台，⼩于40kb ，⼀定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）h5平台，⼩于4kb 会转base64，超出4kb 时不转。其余平台不会转base64Tips
注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越⼤。如不想根据屏幕宽度缩放，则应该使⽤ px 单位。
如果开发者在字体或⾼度中也使⽤了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变⼤、⾼度会变⼤。如果你需要固定⾼度，则应该使⽤ px 。
设计师可以⽤ iPhone6 作为视觉稿的标准。
如果设计稿不是750px ，HBuilderX 提供了⾃动换算的⼯具，详见：早期 uni-app 提供了 upx ，⽬前已经推荐统⼀改为 rpx 了，在 uni-app  中不能使⽤ * 选择器。page  相当于 body  节点，例如：
uni-app 提供内置 CSS 变量CSS 变量描述
App
⼩程序H5--status-bar-height 系统状态栏⾼度
、nvue 注意见下25px 0
--window-top 内容区域距离顶部的距离00NavigationBar 的⾼度--window-bottom
内容区域距离底部的距离
TabBar 的⾼度
注意：
var(--status-bar-height) 此变量在⼩程序环境为固定 25px ，在 App ⾥为⼿机实际状态栏⾼度。
当设置 "navigationStyle":"custom" 取消原⽣导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使⽤⼀个⾼度为 var(--status-bar-height) 的 view 放在页⾯顶部，避免页⾯内容出现在状态栏。
// 绝对路径，@指向项⽬根⽬录，在cli 项⽬中@指向src ⽬录import add from '@/common/add.js'// 相对路径
import add from '../../common/add.js'
/* 绝对路径 */
@import url('/common/uni.css');@import url('@/common/uni.css');/* 相对路径 */
@import url('../../common/uni.css');
/* 绝对路径 */
background-image: url(/static/logo.png);background-image: url(@/static/logo.png);/* 相对路径 */
background-image: url(../../static/logo.png);
<!-- 设置页⾯背景颜⾊ -->page {
background-color:#ccc;}
.status_bar {
height: var(--status-bar-height);    width: 100%;}
由于在H5端，不存在原⽣导航栏和tabbar ，也是前端div 模拟。如果设置了⼀个固定位置的居底view ，在⼩程序和App 端是在tabbar 上⽅，但在H5端会与tabbar 重叠。此时可使⽤--window-bottom ，不管在哪个端，都是固定在tabbar 上⽅。
⽬前 nvue 在App 端，还不⽀持 --status-bar-height 变量，替代⽅案是在页⾯onLoad 时通过SystemInfoSync().statusBarHeight 获取状态栏⾼度，然后通过style 绑定⽅式给占位view 设定⾼度。下⽅提供了⽰例代码
uni-app  ⽀持使⽤在 css ⾥设置背景图⽚，使⽤⽅式与普通 web  项⽬⼤体相同，但需要注意以下⼏点：
⽀持 base64 格式图⽚。⽀持⽹络路径图⽚。
⼩程序不⽀持在css 中使⽤本地⽂件，包括本地的背景图和字体⽂件。需以base64⽅式⽅可使⽤。App
端在v3模式以前，也有相同限制。v3编译模式起⽀持直接使⽤本地背景图和字体。使⽤本地路径背景图⽚需注意：
1. 为⽅便开发者，在背景图⽚⼩于 40kb 时，uni-app  编译到不⽀持本地背景图的平台时，会⾃动将其转化为 base64 格式；
2. 图⽚⼤于等于 40kb ，会有性能问题，不建议使⽤太⼤的背景图，如开发者必须使⽤，则需⾃⼰将其转换为 base64 格式使⽤，或将其挪到服务器上，从⽹络地址引⽤。
3. 本地背景图⽚的引⽤路径推荐使⽤以 ~@ 开头的绝对路径。
注意
⼩程序不⽀持相对路径（真机不⽀持，开发⼯具⽀持）
<template/>和<block/>
uni-app  ⽀持在 template 模板中嵌套 和，⽤来进⾏ 和 。
和 并不是⼀个组件，它们仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性。
<template/>官⽅⽤于条件判断<block/>官⽅⽤于做循环
为节约性能，我们将 Class  与 Style  的表达式通过 compiler  硬编码到 uni-app  中，⽀持语法和转换效果如下：class ⽀持的语法:
style ⽀持的语法:
uni-app  ⽀持配置全局组件，需在 main.js  ⾥进⾏全局注册，注册后就可在所有页⾯⾥使⽤该组件。
注意
Vueponent  的第⼀个参数必须是静态的字符串。
nvue 页⾯暂不⽀持全局组件⽰例
main.js ⾥进⾏全局导⼊和注册
.test2 {
background-image: url('~@/static/logo.png'); }
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view><view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view><view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
<view v-bind:>666</view><view v-bind:>777</view>
import Vue from 'vue'
import pageHead from './components/page-head.vue'Vueponent('page-head',pageHead)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。