uniapp_uniapp swiper

uniapp介绍

什么是uniapp

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

uniapp已经支持一套代码打包到 Android、IOS、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序 10个平台。

为什么要学习Uniapp

• 开发者/案例数量众多

  • 华为荣耀亲选商城
  • 中国银联云闪付、招商银行、平安银行等多家银行APP
  • 等等等等…

• 平台能力不受限

  • 支持条件编译，可以为某个平台写个性化代码，调用专有功能而不影响其他平台
  • 支持原生代码混合开发以及原生SDK集成

• 生态丰富

  • 插件市场数千款插件
  • 支持Npm、小程序组件和SDK、兼容mpvue、兼容weex
  • 微信生态各种sdk可直接用于跨平台App

• 开发成本低

  • 一份代码跨10端
  • 招聘、管理成本低
  • 官方提供HBuilderX，提高开发效率

• 学习成本低

  • 基于Vue语法和小程序api，几乎没有额外的学习成本

• 性能体验优秀

  • 页面加载速度快
  • 支持Weex原生渲染，更加流畅
  • 小程序性能比其他框架高。

• 随着手机性能的提高，WebView渲染方式的性能差距越来越低，2000元左右或者以上的中高端手机甚至感知不到WebView渲染和原生渲染的性能差别。

目录结构

一个uniapp工程，默认包含以下目录和文件

┌─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            配置页面路由、导航条、选项卡等页面类信息，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

static文件下的资源不会被编译，因此js文件如果包含es6的代码，会无法转换，导致项目运行报错

css、less、scss等资源也不要放到static目录下

为了保证小程序的正常发布，图片、视频等大资源，以及较大的三方库，请使用外部依赖的方式引入，如CDN。

依赖的第三方组件只要在components目录下，并符合 components/组件名称/组件名称.vue 格式的目录结构，就可以不用引用、注册，直接使用即可，

不管components下安装了多少组件，uniapp打包后都会自动剔除没有使用的组件，因此components下不需要顾虑组件过多而导致App包过大的情况。

起步-flex布局

uniapp支持 .vue 和 .nvue 两种后缀类型的代码文件。使用 vue 时，页面 使用WebView渲染，而使用 nvue 时，页面 采用原生渲染。nvue支持的css样式特别少，其中在布局上，nvue 仅支持flex布局，因此在学习 uniapp 之前，我们需要学习一下flex布局。

基本概念

flex是flexible box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为flex布局。

采用Flex布局的元素，称为 Flex容器 ，它的所有子元素自动成为容器的成员，称为 Flex项目。

容器默认存在两根轴，主轴和交叉轴。主轴的开始位置叫做 main start，结束位置叫做 main end。交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end

Flex布局允许嵌套，即一个元素既可以是Flex容器，也可以是Flex项目 。

容器的属性

以下6个属性设置在容器上

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction 属性决定了主轴的方向

.box {
    flex-direction: row | row-reverse | column | column-reverse
}
1
2
3

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse：主轴视为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

默认情况下，项目都排在一条轴线上。flex-wrap 定义如果一条轴线排不下，如何换行。

.box {
    flex-wrap: nowrap | wrap | wrap-reverse
}
1
2
3

nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，默认为 row nowrap

.box {
    flex-flow: <flex-direction> <flex-wrap>
}
1
2
3

justify-content

justify-content 属性定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
1
2
3

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
   align-items: flex-start | flex-end | center | baseline | stretch;
}
1
2
3

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
1
2
3

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

项目的属性

以下6个属性设置在项目上。

• order
• flex-grow
• flex-shrint
• flex-basis
• flex
• align-self

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
    order: <integer>;
}
1
2
3

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
    flex-grow: <number>; /* default 0 */
}
1
2
3

如果所有项目的该属性都为1，则他们等分剩余空间。如果一个项目的该属性为2，其他的都为1，则前者占据的剩余空间将比其他项目多1倍

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
    flex-shrink: <number>; /* default 1 */
}
1
2
3

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
    flex-basis: <length> | auto; /* default auto */
}
1
2
3

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
1
2
3

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性，默认值为 auto，表示继承父元素的 align-items 属性。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3

样式

尺寸单位

uniapp支持 px 和 rpx 两种通用的尺寸单位

px：屏幕像素，web开发最常见的单位

rpx：响应式px。一种根据屏幕宽度自适应的动态单位，以750rpx为基准，750rpx刚好是100%宽度。

nvue中不支持 rem、vh、vw、百分比这几种尺寸单位，因此在开发中极不建议使用这几种单位

选择器

目前支持的选择器有：

uniapp中不能使用 * 选择器

uniapp中 page 就相当于 body

nvue 中只支持 class 选择器，因此开发中应当尽可能只使用class选择器

路由

uniapp 路由通过框架去统一管理，只需要在 pages.json 中配置每个路由页面的路径以及页面的样式。路由的管理方式与 VueRouter 不同，如果习惯VueRouter的风格，可以去插件市场搜索。

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/test/test",
            "style" : {}
        }
    ],
1
2
3
4
5
6
7
8
9
10
11
12

NVUE

介绍

uni-app App端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此。

虽然nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

适用场景

在App端某些vue页面表现不佳的场景下使用 nvue 作为强化补充。这些场景如下：

• 需要高性能的区域长列表或瀑布流滚动。webview的页面级长列表滚动时没有性能问题的（就是滚动条覆盖webview整体高度），但页面中某个区域做长列表滚动，则需要使用nvue的list、recycle-list、waterfall等组件。这些组件的性能要高于vue页面里的区域滚动组件scroll-view。
• 复杂高性能的自定义下拉刷新。uni-app的pages.json里可以配置原生下拉刷新，但引擎内置的下拉刷新样式只有雪花和circle圈2种样式。如果你需要自己做复杂的下拉刷新，推荐使用nvue的refresh组件。当然插件市场里也有很多vue下的自定义下拉刷新插件，只要是基于renderjs或wxs的，性能也可以商用，只是没有nvue的refresh组件更极致。
• 左右拖动的长列表。在webview里，通过swiper+scroll-view实现左右拖动的长列表，前端模拟下拉刷新，这套方案的性能不好。此时推荐使用nvue，比如新建uni-app项目时的新闻示例模板，就采用了nvue，切换很流畅。
• 实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果，效果可参考hello uni-app模板里的swiper-list
• 如需要将软键盘右下角按钮文字改为“发送”，则需要使用nvue。比如聊天场景，除了软键盘右下角的按钮文字处理外，还涉及聊天记录区域长列表滚动，适合nvue来做。
• 解决前端控件无法覆盖原生控件的层级问题。当你使用map、video、live-pusher等原生组件时，会发现前端写的view等组件无法覆盖原生组件，层级问题处理比较麻烦，此时使用nvue更好。或者在vue页面上也可以覆盖一个subnvue（一种非全屏的nvue页面覆盖在webview上），以解决App上的原生控件层级问题
• 如深度使用map组件，建议使用nvue。除了层级问题，App端nvue文件的map功能更完善，和小程序拉齐度更高，多端一致性更好。
• 如深度使用video，建议使用nvue。比如如下2个场景：video内嵌到swiper中，以实现抖音式视频滑动切换；nvue的视频全屏后，通过cover-view实现内容覆盖，比如增加文字标题、分享按钮。
• 直播推流：nvue下有live-pusher组件，和小程序对齐，功能更完善，也没有层级问题。
• 对App启动速度要求极致化。App端v3编译器模式下，如果首页使用nvue且在manifest里配置fast模式，那么App的启动速度可以控制在1秒左右。而使用vue页面的话，App的启动速度一般是3秒起，取决于你的代码性能和体积。

不足之处

nvue的写法限制较多，具体如下：

• nvue 页面控制显隐只可以使用v-if不可以使用v-show
• nvue 页面只能使用 flex 布局，不支持其他布局方式。页面开发前，首先想清楚这个页面的纵向内容有什么，哪些是要滚动的，然后每个纵向内容的横轴排布有什么，按 flex 布局设计好界面。
• 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfall、scroll-view/scroller），要滚得内容需要套在可滚动组件下。这不符合前端开发的习惯，所以在 nvue 编译为 uni-app模式时，给页面外层自动套了一个 scroller，页面内容过高会自动滚动。（组件不会套，页面有recycle-list时也不会套）。后续会提供配置，可以设置不自动套。
• 文字内容，必须、只能在<text>组件下。不能在<div>、<view>的text区域里直接写文字。否则即使渲染了，也无法绑定js里的变量。
• 只有text标签可以设置字体大小，字体颜色。
• 布局不能使用百分比、没有媒体查询。
• nvue 切换横竖屏时可能导致样式出现问题，建议有 nvue 的页面锁定手机方向。
• 支持的css有限，不过并不影响布局出你需要的界面，flex还是非常强大的。详见
• 不支持背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
• css选择器支持的比较少，只能使用 class 选择器。详见weex的样式文档
• class 进行绑定时只支持数组语法。
• nvue页面没有bounce回弹效果，只有几个列表组件有bounce效果，包括 list、recycle-list、waterfall。
• Android端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
• nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题。
• 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData和vuex是生效的。
• App.vue 中定义的全局css，对nvue和vue页面同时生效。如果全局css中有些css在nvue下不支持，编译时控制台会报警，建议把这些不支持的css包裹在条件编译里，APP-PLUS-NVUE
• 不能在 style 中引入字体文件，nvue 中字体图标的使用参考：weex 加载自定义字体。如果是本地字体，可以用plus.io的API转换路径。
• 目前不支持在 nvue 页面使用 typescript/ts。
• nvue 页面关闭原生导航栏时，想要模拟状态栏，可以参考：https://ask.dcloud.net.cn/article/35111。但是，仍然强烈建议在nvue页面使用原生导航栏。nvue的渲染速度再快，也没有原生导航栏快。原生排版引擎解析json绘制原生导航栏耗时很少，而解析nvue的js绘制整个页面的耗时要大的多，尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。
• nvue 页面的布局排列方向默认为竖排（column），如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。详情。
• nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。因为weex渲染引擎只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，默认不是flex，并且设置display:flex后，它的flex方向默认是水平而不是垂直的。所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。

常用组件

视图容器

视图容器（view）

视图容器，类似于html中的 div，用来包裹各种元素内容。

如果使用nvue，需要注意不能用该组件包裹文字，否则文字样式将不生效。

如果你使用 <div> 标签，编译时会被转换为 <view> ，但是不建议使用div

代码演示

<template>
	<view>
		<view>我是view</view>
		<view class="view-container">
			<view class="view-item" hover-class="click-view">1</view>
			<view class="view-item" hover-class="click-view">2</view>
			<view class="view-item" hover-class="click-view">3</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.view-container {
	width: 750rpx;
	height: 300rpx;
	background-color: #007AFF;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.view-item {
	width: 200rpx;
	height: 200rpx;
	background-color: #F0AD4E;
}
.click-view {
	background-color: #DD524D;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

可滚动视图（scroll-view）

可滚动视图区域，用于区域滚动。

该组件性能较差，建议只用于导航栏横向滚动场景，竖向滚动请不要使用。

代码演示

<template>
	<view>
		<scroll-view scroll-x="true" >
			<view class="scroll-container">
				<view class="scroll-item">首页</view>
				<view class="scroll-item">Java</view>
				<view class="scroll-item">数据结构</view>
				<view class="scroll-item">Vue</view>
				<view class="scroll-item">PHP</view>
				<view class="scroll-item">C++</view>
				<view class="scroll-item">Golang</view>
				<view class="scroll-item">MySQL</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.scroll-container {
	width: 750rpx;
	white-space: nowrap;
}

.scroll-item {
	display: inline-block;
	width: 150rpx;
	margin-right: 20rpx;
	background-color: #007AFF;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

滑块视图（swiper）

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

swiper-item 是swiper组件的子组件，只能用到swiper中，只有一个 item-id 属性，标识一个 swiper-item 的唯一性

<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item1">1</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2">2</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item3">3</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.swiper-item1 {
	background-color: #007AFF;
	height: 300rpx;
}
.swiper-item2 {
	background-color: #4CD964;
	height: 300rpx;
}
.swiper-item3 {
	background-color: #F0AD4E;
	height: 300rpx;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

可拖动区域（movable）

movable-area

可拖动区域组件。 movable-area 指代可拖动的范围，在其中内嵌 movable-view 组件用于指示可拖动的区域。

即手指/鼠标按住 movable-view 拖动或双指缩放，但拖不出 movable-area 规定的范围。

movable-area 必须设置 width 和 height 属性，不设置默认为 10px

movable-area app-nvue平台 暂不支持手势缩放，并且和滚动冲突。

movable-view

可移动的视图容器，在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

movable-view 必须设置width和height属性，不设置默认为10px

movable-view 默认为绝对定位，top和left属性为0px

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

代码演示

<template>
	<view>
		<movable-area class="movable-area">
			<movable-view direction="all" inertia="true" class="movable-view" scale="true">
				拖我
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.movable-area {
	width: 750rpx;
	height: 400rpx;
	background-color: #007AFF;
}
.movable-view {
	width: 200rpx;
	height: 200rpx;
	background-color: #4CD964;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

覆盖视图（cover-view）

尽管app-vue和小程序是使用webview渲染，但是为了优化体验，像map、video等组件是使用原生渲染的，因此无法通过z-index设置层级。此时就需要使用cover-view组件，该组件可以覆盖到原生组件上。用法和view一样

基础内容

图标（icon）

默认提供的图标功能不够强大，因此建议使用 iconfont 来进行弥补

代码演示

<template>
	<view>
		<view v-for="item in icons" :key="item">
			<icon :type="item"></icon>
			<text>{{item}}</text>
		</view>
		<view class="">
			以下是iconfont
		</view>
		<text class="icon success">&#xe600;</text>
		<text class="icon info">&#xe60f;</text>
		<text class="icon warning">&#xe658;</text>
		<text class="icon danger">&#xe6e6;</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icons: [
					"success", "success_no_circle", "info", "warn", "waiting", "cancel", "download", "search", "clear"
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
/* 以下配置最好在App.vue中设置 */
@font-face {
      font-family: 'iconfont';  /* project id 2032489 */
      src: url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.eot');
      src: url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.eot?#iefix') format('embedded-opentype'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.woff2') format('woff2'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.woff') format('woff'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.ttf') format('truetype'),
      url('https://at.alicdn.com/t/font_2032489_e9daxwhbrpi.svg#iconfont') format('svg');
 }

.icon {
    font-family: iconfont;
    margin-left: 20rpx;
}
.success {
	color: #4CD964;
}
.info {
	color: #999999;
}
.warning {
	color: #F0AD4E;
}

.danger {
	color: #DD524D;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

使用iconfont

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

• 支持 base64 格式字体图标。

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

• 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。

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

• 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。

• 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。

• 使用本地路径图标字体需注意：

  1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
  2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；

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

  @font-face {
       font-family: 'iconfont';
       src: url('https://...') format('truetype');
   }
  
  .icon {
      font-family: iconfont;
      margin-left: 20rpx;
  }
  
  <text class="icon">&#xe600;</text>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

nvue中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "iconfont",
  'src': "url('https://...')"
})
1
2
3
4
5

文本组件（text）

用于包裹文本。

• <text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
• 在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
• 除了文本节点以外的其他节点都无法长按选中。
• 支持 \n 方式换行。
• 如果使用 <span> 组件编译时会被转换为 <text>。

代码演示

<template>
	<view>
		<view class="text-container">
			<text class="item">哈哈</text>
			<text class="item">呵呵</text>
			<text class="item">嘎嘎</text>
			<text class="item">呀呀</text>
			<text class="item">么么</text>
			<text class="item">鸡哥</text>
		</view>
		<view>
			<!-- 如果nvue中，必须给文字包上一层text -->
			<text class="view-item">我是view组件</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.text-container {
	display: flex;
	flex-direction: row;
}
.item {
	/* nvue中，边框不能缩写 */
	/* border: 1px solid #808080; */
	border-color: #808080;
	border-width: 1px;
	border-style: solid;
	margin-right: 10px;
	color: #F0AD4E;
}

.view-item {
	color: #007AFF;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

富文本（rich-text）

该组件的作用是展示富文本，而非富文本编辑器

元素节点为node

即使元素节点使用String，在渲染时也会转成node去渲染，这样会有性能损耗因此建议使用 html-parser 进行转换

代码演示

<template>
	<view>
		<rich-text :nodes="strings"></rich-text>
		<rich-text :nodes="nodes"></rich-text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strings: `
				<ul>
					<li>1</li>
					<li style="color: red">点我</li>
				</ul>
				`,
				nodes: [{
					name: "ul",
					children: [{
							name: "li",
							children: [{
								type: 'text',
								text: "1"
							}]
						},
						{
							name: "li",
							children: [{
								type: "text",
								text: "点我"
							}],
							attrs: {
								style: "color: red",
								"class": "myli"
							},
						}
					]
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

进度条（progress）

代码演示

<template>
	<view>
		 <progress percent="75" show-info active border-radius="3"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

表单组件

按钮（button）

open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

open-type 有效值

• 在小程序中，开发者可以登录 微信小程序管理后台 、QQ小程序后台后，进入菜单“客服反馈”页面获取反馈内容。
• 在 App 中，开发者登录 DCloud开发者中心 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。
• 点击 share 分享按钮时会触发 onShareAppMessage
• 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，参考

代码演示

<template>
	<view>
		<view>
			普通大小
			<button type="default">default</button>
			<button type="primary">primary</button>
			<button type="warn">warn</button>
		</view>
		<view>
			mini大小
			<button size="mini" type="default">default</button>
			<button size="mini" type="primary">primary</button>
			<button size="mini" type="warn">warn</button>
		</view>
		<view>
			镂空效果
			<button plain type="default">default</button>
			<button plain type="primary">primary</button>
			<button plain type="warn">warn</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
button {
	margin-top: 10px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

单选框（radio）

radio-group

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

属性说明

radio

单选项目。

属性说明

代码演示

<template>
	<view>
		<radio-group name="enable" @change="changeRadio">
			<label>
				<radio value="1" /><text>启用</text>
			</label>
			<label>
				<radio value="0" /><text>不启用</text>
			</label>
		</radio-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			changeRadio(e) {
				console.log(e)
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

多选框（checkbox）

checkbox-group

多项选择器，内部由多个 checkbox 组成。

属性说明

checkbox

多选项目。

属性说明

代码演示

<template>
	<view>
		<checkbox-group name="hobby">
			<checkbox value="1" /><text>唱</text>
			<checkbox value="2" /><text>跳</text>
			<checkbox value="3" /><text>rap</text>
			<checkbox value="4" /><text>篮球</text>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

表单（form）

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

代码演示

<template>
	<view>
		<form @submit="submit" @reset="reset">
			<input type="text" name="username" confirm-type="search" placeholder="请输入用户名" />
			<input type="number" name="age" placeholder="请输入年龄" />
			<checkbox-group name="hobby">
				<label for="aaa"><checkbox id="aaa" value="1" /><text>唱</text></label>
				<checkbox value="2" /><text>跳</text>
				<checkbox value="3" /><text>rap</text>
				<checkbox value="4" /><text>篮球</text>
			</checkbox-group>
			<radio-group name="enable">
				<label>
					<radio value="1" /><text>启用</text>
				</label>
				<label>
					<radio value="0" /><text>不启用</text>
				</label>
			</radio-group>
			<slider show-value="true" backgroundColor="#333333" activeColor="#4CD964" value="1" min="1" max="20" block-color="#F0AD4E"/>
			
			<button form-type="submit">Submit</button>
			<button form-type="reset">Reset</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			submit(e) {
				console.log(e)
			},
			reset(e) {
				console.log(e)
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

输入框（input）

type 有效值

confirm-type 有效值

代码演示

<template>
	<view>
		<input type="text" confirm-type="search" @input="inputUsername" placeholder="请输入用户名" />
		<input type="number" placeholder="请输入年龄" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			inputUsername(e) {
				console.log(e)
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

文本域（textarea）

代码演示

<template>
	<view>
		<textarea auto-height="true" class="area" maxlength="-1" placeholder="备注" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.area {
	border: 1px solid #007AFF;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

富文本编辑器（editor）

富文本编辑器，可以对图片、文字格式进行编辑和混排。只支持App-vue、H5、微信小程序。如果需要兼容全端，请上插件市场。

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。

代码演示

<template>
	<view>
		<editor class="area" placeholder="请输入" @input="inputContent"></editor>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			inputContent(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
.area {
	border: 1px solid #007AFF;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。

不支持app-nvue

代码演示

<label for="aaa"><checkbox id="aaa" value="1" /><text>唱</text></label>
1

滑块（slider）

代码演示

<template>
	<view>
		<slider @change="change" @changing="changing" show-value="true" backgroundColor="#333333" activeColor="#4CD964" value="1" min="1" max="20" block-color="#F0AD4E"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			change(e) {
				console.log('change事件触发了', e)
			},
			changing(e) {
				console.log('changing事件触发了', e)
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

开关（switch）

代码演示

<template>
	<view>
		<switch checked="true" @change="change" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			change(e) {
				console.log(e)
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

滚动选择器（picker）

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是 普通选择器(selector)，多列选择器（multiSelector），时间选择器（time），日期选择器（date），省市区选择器（region），默认是普通选择器。

普通选择器（selector）

代码演示

1

多列选择器（multiSelector）

代码演示

1

时间选择器（time）

代码演示

1

日期选择器（date）

<template>
	<view>
		<picker mode="date" @change="change">
			<button>见我</button>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			change({detail}) {
				console.log(detail)
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

省市区选择器（region）

因数据量较大，不是所有项目都需要，需要的公司都会自己维护省市区，因此uniapp取消了对省市区选择器的维护，可以上插件市场寻找。

嵌入页面的滚动选择器（picker-view）

相对于picker组件，picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view。

代码演示

1

导航

页面链接（navigator）

类似于HTML中的 a 标签

open-type 有效值

代码演示

<template>
	<view>
		<navigator url="/pages/base/index" hover-class="click">基础组件</navigator>
		<navigator url="/pages/form/form" hover-class="click">表单组件</navigator>
		<navigator url="/pages/view/view" hover-class="click">视图组件</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.click {
		background-color: #007AFF;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

媒体组件

音频（audio）

该组件兼容性较差，官方不推荐使用，请自行阅读官方文档

音频链接

https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/%E6%99%AF%E5%B2%97%E5%B1%B1%20-%20%E5%AE%88%E4%B8%9A%E6%9B%B4%E6%AF%94%E5%88%9B%E4%B8%9A%E9%9A%BE.mp3
1

<template>
	<view>
		<!-- audio兼容性较差，并且官方不再维护 -->
		<audio :src="url" name="我是音频" author="佚名"  controls></audio>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: "https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/%E6%99%AF%E5%B2%97%E5%B1%B1%20-%20%E5%AE%88%E4%B8%9A%E6%9B%B4%E6%AF%94%E5%88%9B%E4%B8%9A%E9%9A%BE.mp3"
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

图片（image）

mode的有效值

代码演示

<template>
	<view>
		<image src="/static/logo.png"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

视频（video）

视频链接：

https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/video/a88711e041b5492ba2d1609723e6c008.mp4
1

direction 的合法值

object-fit 的合法值

play-btn-position 的合法值

danmu-list 对象属性

代码演示

<template>
	<view>
		<video :src="url" controls></video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: "https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/video/a88711e041b5492ba2d1609723e6c008.mp4"
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

地图

地图（map）

markers

标记点用于在地图上显示标记的位置

marker 上的气泡 callout

marker 上的标签 label

polyline

指定一系列坐标点，从数组第一项连线至最后一项

polygon
指定一系列坐标点，根据 points 坐标数据生成闭合多边形

circles

在地图上显示圆

controls

在地图上显示控件，控件不随着地图移动

position

地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。

小程序和app-vue中，map组件是由引擎创建的原生组件，级别最高，无法使用z-index设置层级。如果想有在map上显式的元素，可以使用marker、controls设置，也可以使用 cover-view 组件

APP端地图组件使用的时候需要上高德或者百度等三方服务商申请地图SDK资质，获取AppKey，打包时在mainfest勾选相应的模块，填写AppKey。

代码演示

<template>
	<view>
		<map :polyline="polyline" :markers="markers" class="mymap" :latitude="39.56" :longitude="117.30"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [ // 标记点
					{
						id: 1,
						latitude: 39.56,
						longitude: 117.30
					},
					{
						id: 2,
						latitude: 40.56,
						longitude: 118.30
					},
					{
						id: 3,
						latitude: 39.86,
						longitude: 119.30
					}
				],
				polyline: [ // 路线，每条线是一个对象里包含一个坐标点数组，地图中可以有多条线
					{
						color: "#a55310",
						points: [
							{
								latitude: 39.56,
								longitude: 117.30
							},
							{
								latitude: 40.56,
								longitude: 118.30
							},
							{
								latitude: 39.86,
								longitude: 119.30
							}
						]
					},
					{
						color: "#3b64a5",
						points: [
							{
								latitude: 42.56,
								longitude: 127.30
							},
							{
								latitude: 42.56,
								longitude: 128.30
							},
							{
								latitude: 42.86,
								longitude: 129.30
							}
						]
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.mymap {
	width: 750rpx;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

小程序开放能力

公众号关注组件（official-account）

微信公众号关注组件，当用户扫小程序码打开小程序时，可以配置该组件方便用户快速关注公众号

开放平台数据组件（open-data）

支付宝和字节跳动小程序不具备该组件。

type 有效值

代码演示

<template>
	<view>
		<open-data type="userNickName"></open-data>
		<open-data type="userAvatarUrl"></open-data>
		<open-data type="userGender"></open-data>
		<open-data type="userCity"></open-data>
		<open-data type="userProvince"></open-data>
		<open-data type="userCountry"></open-data>
		<open-data type="userLanguage"></open-data>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

AppNvue专用组件

扫码组件（Barcode）

app-nvue专用的扫码组件，其他端请使用扫码API uni.scanCode

组件方法

以下方法是组件内部的方法，需要通过 this.$refs 去调用

开始扫码——start(object)

取消扫码——cancel()

字面意思

操作闪光灯——setFlash(boolean)

组件事件

识别成功——marked(e)

识别错误——error(e)

代码演示

<template>
	<view>
		<barcode autostart="true" class="barcode" ref="barcode" @marked="success" @error="error"></barcode>
		<button type="default" @click="barcode">点我扫码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			success(e) {
				console.log("扫码成功", e)
				this.$refs.barcode.cancel()
			},
			error(e) {
				console.log("扫码失败", e)
				this.$refs.barcode.cancel()
			},
			barcode() {
				this.$refs.barcode.start({
					vibrate: true,
					sound: true
				})
			}
		}
	}
</script>

<style>
.barcode {
	width: 750rpx;
	height: 500rpx;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

列表组件（list）

App-nvue下，对于长列表，view和scroll-view的性能较差，建议使用list。list在不可见部分的渲染资源回收有特殊的优化处理。

而webview渲染的页面，只要不使用scroll-view，则不会存在资源回收性能问题。

**该组件无法跨端，可以使用uni-list组件来完成跨端，否则就需要使用条件编译功能 **

子组件

单独的使用list，对性能的提高并不大，甚至还会影响性能，结合子组件使用，则可以提高性能。

cell：定义列表中的每一项，类似于 ul 中的 li ，使用该组件可以大大提高list的性能

header：当header到达屏幕顶部时，吸附在屏幕顶部

refresh：list组件默认无法触发下拉刷新，该组件可以为列表添加下拉刷新功能

loading：list组件默认无法触发上拉加载功能，该组件可以为列表添加上拉加载功能，该组件和refresh都拥有同名的事件，表示 下拉/上拉时触发。

代码演示

<template>
	<view>
		<!-- <view v-for="item in 100000">{{'我是view组件渲染出来的列表' + item}}</view> -->
		<list>
		<cell v-for="item in 100000">{{'我是view组件渲染出来的列表' + item}}</cell>
		</list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

扩展组件

uni-ui 是uniapp官方提供的一个跨端ui跨库，是基于vue组件的，flex布局的，无dom的跨全端ui框架。。

uni-ui包含了日历、卡片、倒计时、抽屉、宫格等多个扩展组件，可以大大的提高开发效率。当你的项目跨端较多时，建议使用uni-ui

<template>
	<view>
		<button type="default" @click="open">点我打开</button>
		<uni-drawer ref="drawer">
			<view style="padding:30rpx;">
				我是从抽屉
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			open() {
				this.$refs.drawer.open()
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行环境判断

在HBuilderX中，点击运行编译出来的代码是开发环境，点击发行编译出来的是生产环境

可以使用 process.env.NODE_ENV 来获取运行环境

development 是开发环境

production 是生产环境

条件编译

尽管uniapp已经提供了大量的跨平台组件和API，满足了大部分业务场景，但是每个平台依然有自己的一些特性，这些特性从根本上就无法跨平台，传统的解决思路就是通过一大堆 if...else 去进行判断，不同的环境执行不同的代码，但是这样性能较差，而且难以管理。

uniapp提供了 条件编译 功能，可以通过特定的标记来标识某些代码只属于或者不属于某些平台。

条件编译是一种特殊的注释标记，在编译时会根据注释把对应的代码编译到不同的平台。

语法：

#ifdef 平台：只在某平台出现
#ifndef 平台 除了某平台以外都出现
以 #endif 结尾
1
2
3

平台有以下值

不同的文件里写法不同，但是原理上都是使用注释去实现条件编译，因此在不同的文件中，可能写法是 // 注释，/* 注释 */ 或者 <!–注释–> 等等 。

在HBuilderX中，只需要输入 ifdef 或者 ifndef 就可以快速生成条件编译，会自动根据不同的语言来生成不同的条件编译代码块。

代码演示

	<view>
		<navigator url="/pages/base/index" hover-class="click">基础组件</navigator>
		<!-- #ifndef MP -->
		<navigator url="/pages/form/index" hover-class="click">表单组件</navigator>
		<!-- #endif -->
		<navigator url="/pages/view/index" hover-class="click">视图组件</navigator>
		<navigator url="/pages/media/index">媒体组件</navigator>
		<navigator url="/pages/map/map">地图组件</navigator>
		<!-- #ifdef MP-WEIXIN -->
		<navigator url="/pages/mp/mp">小程序开放能力</navigator>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<navigator url="/pages/nvue/index">nvue专用组件</navigator>
		<!-- #endif -->
		<navigator url="/pages/ext/index">扩展组件</navigator>
		<navigator url="/pages/env/env">运行环境</navigator>
	</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

生命周期

uniapp支持vue的生命周期函数，除此之外，uniapp还新增了大量的生命周期函数。

uniapp的生命周期分为 应用生命周期 和 页面生命周期

应用生命周期

应用生命周期是针对一整个应用去触发的，如应用启动、初始化、报错等。

应用生命周期只能在 App.vue 中监听，其他页面无法监听

代码演示

<script>
	export default {
		onLaunch() {
			console.log("app初始化完成")
		},
		onShow() {
			console.log("app启动")
		},
		onHide() {
			console.log("App进入后台")
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

页面生命周期

页面生命周期就类似于Vue中的生命周期，在每个页面加载、进入、渲染、销毁等场景触发

onPageScroll 参数说明：

onTabItemTap 参数说明：

onNavigationBarButtonTap 参数说明：

onBackPress 回调参数对象说明：

代码演示

<template>
	<view>
		<view v-for="item in arr">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [
					1,2,3,4,5,6,7,12312,5413,423,213,14,235,23,412,312,3125,8,9,10,11,12,12,131,41,123,412,412,321,5123,41,12,312,154,3,4312,32
				]
			}
		},
		onLoad(e) {
			console.log("页面加载", e)
		},
		onShow() {
			console.log("页面显示")
		},
		onPullDownRefresh() {
			this.arr = [
					1,2,3,4,5,6,7,12312,5413,423,213,14,235,23,412,312,3125,8,9,10,11,12,12,131,41,123,412,412,321,5123,41,12,312,154,3,4312,32
				]
			console.log("下拉刷新")
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onReachBottom() {
			this.arr.push(...[
				1,2,34,4,5,6
			])
			console.log("触底加载")
		},
		onShareAppMessage() {
			console.log("点击了分享")
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

API

网络请求

发起请求（uni.request(Object)）

发起网络请求。

参数说明：

method 仅支持 GET、POST、PUT、DELETE、CONNECT、HEAD、OPTIONS、TRACE这些值，必须大写。常用的四个请求方式中，支付宝小程序仅支持GET和POST，字节跳动小程序仅支持GET、POST、PUT

success参数说明

代码演示

<template>
	<view>
		<button type="default" @click="getData()">点我发送请求</button>
		<button type="default" @click="download()">点我下载</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			getData() {
				uni.request({
					url:"http://47.102.115.146:8080/department/departmentList",
					method:"GET",
					success(e) {
						console.log("请求成功", e)
					},
					fail(e) {
						console.log("请求失败", e)
					}
				})
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

文件上传（uni.uploadFile(Object)）

App支持多文件上传，小程序只支持单文件，如需上传多个文件，需要多次调用

files参数说明

files 参数是一个 file 对象的数组，file 对象的结构如下：

Tip:

• 如果 name 不填或填的值相同，可能导致服务端读取文件时只能读取到一个文件。

success 返回参数说明

代码演示

1

监听上传

该api返回一个uploadTask，用于监听上传进度。如需返回uploadTask，至少要传入 success/fail/complete 其中之一

				const task = uni.downloadFile({
					url:"https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/%E6%99%AF%E5%B2%97%E5%B1%B1%20-%20%E5%AE%88%E4%B8%9A%E6%9B%B4%E6%AF%94%E5%88%9B%E4%B8%9A%E9%9A%BE.mp3",
					success(e) {
						console.log("下载成功！", e)
					},
					fail(e) {
						console.log("下载失败！", e)
					}
				})
1
2
3
4
5
6
7
8
9

uploadTask对象中有以下方法

onProgressUpdate 返回参数说明

代码演示

1

文件下载（uni.downloadFile(Object)）

OBJECT 参数说明

注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，才能在应用下次启动时访问得到。

success 返回参数说明

代码演示

<template>
	<view>
		<button type="default" @click="getData()">点我发送请求</button>
		<button type="default" @click="download()">点我下载</button>
		 <progress :percent="percent" show-info />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percent: 0
			}
		},
		methods: {
			getData() {
				uni.request({
					url:"http://47.102.115.146:8080/department/departmentList",
					method:"GET",
					success(e) {
						console.log("请求成功", e)
					},
					fail(e) {
						console.log("请求失败", e)
					}
				})
			},
			download() {
				const task = uni.downloadFile({
					url:"https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/%E6%99%AF%E5%B2%97%E5%B1%B1%20-%20%E5%AE%88%E4%B8%9A%E6%9B%B4%E6%AF%94%E5%88%9B%E4%B8%9A%E9%9A%BE.mp3",
					success(e) {
						console.log("下载成功！", e)
					},
					fail(e) {
						console.log("下载失败！", e)
					}
				})
				task.onProgressUpdate((e) => {
					this.percent = e.progress
				})
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

文件下载同样可以监听，用法和上传一样。

路由跳转

uni.navigateTo(object)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

object.success 回调函数

参数

Object res

<template>
	<view>
		我是首页
		<button type="default" @click="navigateToPage">navigateTo</button>
		<button type="default" @click="redirectToPage">redirectTo</button>
		<button type="default" @click="reLaunchPage">reLaunch</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pages: "one"
			}
		},
		methods: {
			navigateToPage() {
				uni.navigateTo({
					url:`/pages/api/navigate/${this.pages}?name=张三&age=23`,
					animationType:"fade-in"
				})
			},
			redirectToPage() {
				uni.redirectTo({
					url:"/pages/api/navigate/" + this.pages
				})
			},
			reLaunchPage() {
				uni.reLaunch({
					url:"/pages/api/navigate/" + this.pages
				})
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

uni.redirectTo(object)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明

uni.reLaunch(object)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT参数说明

uni.switchTab(object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT参数说明

uni.navigateBack(Object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明

uni.preloadPage(Object)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

平台差异说明

H5 平台

预加载 /pages/test/test 对应的js文件，不执行页面预渲染逻辑

uni.preloadPage({url: "/pages/test/test"});
1

App-nvue 平台

预加载nvue页面 /pages/test/test

uni.preloadPage({url: "/pages/test/test"});
1

注意事项

1. App平台仅支持预加载 nvue 页面，执行页面预渲染，预载时触发生命周期 onLoad，onReady，不触发 onShow
2. 打开新页面时，url 完全相同（包含参数）时，优先使用预加载页面，触发生命周期 onShow
3. tabbar页面，仅支持预加载尚未显示过的页面，否者返回 fail，提示 already exists
4. 同一时间，相同 url 仅 preloadPage 一次
5. 当同一个预载页面已被打开(在路由栈)，再次打开相同url时，不再使用该预加载页面，而是打开新的非预载页面
6. uni.reLanuch, uni.switchTab, uni.navigateBack(含Android返回键) 切换页面时，预加载页面不会被销毁，仅触发生命周期 onHide
7. 在预载页面使用 uni.redirectTo 时，预加载页面会被销毁，触发生命周期 onUnload

示例

uni.preloadPage({url: "/pages/test/test"}); // 预加载 /pages/test/test 页面（仅触发onLoad，onReady)
uni.navigateTo({url: "/pages/test/test"}); // url匹配，跳转预加载页面（仅触发onShow)
uni.navigateTo({url: "/pages/test/test?a=b"}); // url不匹配，正常打开新页面
1
2
3

窗口动画

本API仅App支持

窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json。

API

有效的路由 API

• navigateTo
• navigateBack

uni.navigateTo({
    url: '../test/test',
    animationType: 'pop-in',
    animationDuration: 200
});
uni.navigateBack({
    delta: 1,
    animationType: 'pop-out',
    animationDuration: 200
});
1
2
3
4
5
6
7
8
9
10

组件

open-type 有效值

• navigateTo
• navigateBack

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>
1
2

pages.json

pages.json 中配置的是窗口显示的动画

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}
1
2
3
4
5
6

显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

数据缓存

uni-app的Storage在不同端的实现不同：

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度、字节跳动小程序文档未说明大小限制

uni.setStorage(Object)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT 参数说明

uni.setStorageSync(key, data)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

uni.getStorage(Object)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

success 返回参数说明

uni.getStorageSync(key)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

uni.getStorageInfo(Object)

异步获取当前 storage 的相关信息。

平台差异说明

OBJECT 参数说明

success 返回参数说明

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

平台差异说明

uni.removeStorage(Object)

从本地缓存中异步移除指定 key。

OBJECT 参数说明

uni.removeStorageSync(key)

从本地缓存中同步移除指定 key。

参数说明

uni.clearStorage()

清理本地数据缓存。

uni.clearStorageSync()

同步清理本地数据缓存。

<template>
	<view>
		<button type="default" @click="setData">异步set</button>
		<button type="default" @click="setDataSync">同步set</button>
		<button type="default" @click="getData">异步get</button>
		<button type="default" @click="getDataSync">同步get</button>
		<button type="default" @click="removeData">异步remove</button>
		<button type="default" @click="removeDataSync">同步remove</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			setData() {
				console.log("调用前")
				uni.setStorage({
					key: "token",
					data: "56678484113483212",
					success(e) {
						console.log("set成功", e)
					}
				})
				console.log("调用后")
			},
			setDataSync() {
				console.log("调用前")
				uni.setStorageSync("username", "张三")
				console.log("调用后")
			},
			getData() {
				console.log("调用前")
				uni.getStorage({
					key: "token",
					success(e) {
						console.log("get成功", e)
					}
				})
				console.log("调用后")
			},
			getDataSync() {
				const data = uni.getStorageSync("username", "")
				console.log(data)
			},
			removeData() {
				console.log("调用前")
				uni.removeStorage({
					key:"username",
					success(e) {
						console.log("删除成功！", e)
					}
				})
				console.log("调用后")
			},
			removeDataSync() {
				uni.removeStorageSync("token")
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

位置

uni.getLocation(Object)

获取当前的地理位置、速度。 在微信小程序中，当用户离开应用后，此接口无法调用，除非申请后台持续定位权限；当用户点击“显示在聊天顶部”时，此接口可继续调用。

OBJECT 参数说明

success 返回参数说明

address 地址信息说明

• H5：在较新的浏览器上，H5 端获取定位信息，要求部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
• H5：国产安卓手机上，H5若无法定位，检查手机是否开通位置服务、GPS，ROM是否给该浏览器位置权限、浏览器是否对网页弹出请求给予定位的询问框。
• H5：安卓手机在原生App内嵌H5时，无法定位需要原生App处理Webview。
• H5：移动端浏览器普遍仅支持GPS定位，在GPS信号弱的地方可能定位失败。
• H5：PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
• H5：使用坐标类型为 gcj02 时，需要配置腾讯地图 sdk 信息（manifest.json -> h5）。
• H5：微信公众号可使用微信js sdk，详见
• App：Android由于谷歌服务被墙，或者手机上没有GMS，想正常定位就需要向高德等三方服务商申请SDK资质，获取AppKey。否则打包后定位就会不准。云打包时需要在manifest的SDK配置中填写Appkey。在manifest可视化界面有详细申请指南，详见：https://ask.dcloud.net.cn/article/29。离线打包自行在原生工程中配置。注意包名、appkey、证书信息必须匹配。真机运行可以正常定位，是因为真机运行基座使用了DCloud向高德申请的sdk配置，打包后必须由开发者自己申请。如果手机自带GMS且网络环境可以正常访问google定位服务器，此时无需在manifest填写高德定位的sdk配置。
• App：<map> 组件默认为国测局坐标gcj02，调用 uni.getLocation 返回结果传递给 <map> 组件时，需指定 type 为 gcj02。
• App：定位和map是2个东西。通过getLocation得到位置坐标后，可以在任意map地图上展示，比如定位使用高德，地图使用google的webview版地图。如果坐标系不同时，注意转换坐标系。
• App：如果使用web-view加载地图，无需在manifest里配地图的sdk配置。
• App：持续定位方案：iOS端可以申请持续定位权限，参考。Android如果进程被杀，代码无法执行。可以使用unipush，通过服务器激活App，执行透传消息，让App启动然后采集位置。Android上，即使自己写原生插件做后台进程，也很容易被杀，unipush是更合适的方案
• 小程序：api默认不返回详细地址中文描述。需要中文地址有2种方式：1、使用高德地图小程序sdk，在app和微信上都可以获得中文地址，参考。2、只考虑app，使用plus.geolocation也可以获取中文地址。manifest里的App SDK配置仅用于app，小程序无需在这里配置。
• 可以通过用户授权API来判断用户是否给应用授予定位权限https://uniapp.dcloud.io/api/other/authorize

<template>
	<view>
		<button type="default" @click="getLocation">点我获取位置</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.authorize({
				scope:"scope.userLocation",
				complete(e) {
					console.log(e)
				}
			})
			// #endif
		},
		methods: {
			getLocation() {
				uni.getLocation({
					success(e) {
						console.log(e)
					},
					fail(e) {
						console.log("获取失败", e)
					}
				})
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

uni.chooseLocation(Object)

打开地图选择位置。

平台差异说明

OBJECT 参数说明

注意

• 因平台差异，如果SDK配置百度地图，需要设置keyword，才能显示相关地点
• nvue下只支持高德地图，不支持百度地图
• HBuilderX 2.4.0+ 非 weex 编译模式仅支持高德地图

success 返回参数说明

• 不同端，使用地图选择时基于的底层地图引擎不一样，如微信小程序和H5是腾讯地图，App和阿里小程序是高德地图，百度小程序是百度地图，详见地图map组件的使用注意事项。app中也可以使用百度定位，在manifest中配置，打包后生效。但app-nvue里只能用百度定位，不能用百度地图。另外选择地图、查看地图位置的API也仅支持高德地图。所以App端如无特殊必要，建议使用高德地图。
• 微信内置浏览器中可使用微信js sdk
• chooseLocation属于封装型API，开发者若觉得不够灵活，可自行基于原始的map组件进行封装。插件市场已经有各种封装样例了。
• 若Android App端位置不准，见上文uni.getLocation的注意事项

<template>
	<view>
		<button type="default" @click="choose">点我选择位置</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			choose() {
				uni.chooseLocation({
					complete(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

uni.openLocation(object)

使用应用内置地图查看位置。

平台差异说明

OBJECT 参数说明

媒体

图片

uni.chooseImage(object)

从本地相册选择图片或使用相机拍照。

• count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
• sourceType 在H5端对应input的capture属性，设置为['album']无效，依然可以使用相机。
• 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限https://uniapp.dcloud.io/api/other/authorize
• App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。
• 文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，在应用下次启动时才能访问得到。

success 返回参数说明

File 对象结构如下

			selectImage() {
				uni.chooseImage({
					success(e) {
						console.log("选择完毕", e)
					}
				})
			}
1
2
3
4
5
6
7

uni.previewImage(object)

预览图片

current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。App平台在 1.9.5至1.9.8之间，current为必填。不填会报错

注意，当 urls 中有重复的图片链接时：

• 传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。
• 传索引值，在微信/百度/字节跳动小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。

举例说明：

一组图片 [A, B1, C, B2, D]，其中 B1 与 B2 的图片链接是一样的。

• 传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。
• 传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/字节跳动小程序平台，最终传入的 urls 是 [A, C, B2, D]，过滤掉了与 B2 重复的 B1。

longPressActions 参数说明

success 返回参数说明

uni.getImageInfo(object)

获取图片信息。

小程序下获取网络图片信息需先配置download域名白名单才能生效。

平台差异说明

OBJECT 参数说明

success 返回参数说明

orientation 参数说明

			getInfo() {
				uni.getImageInfo({
					src:"https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/md/20200815001548.png",
					success(e) {
						console.log("获取成功", e)
					}
				})
			}
1
2
3
4
5
6
7
8

uni.saveImageToPhotosAlbum(object)

保存图片到系统相册。

平台差异说明

OBJECT 参数说明

success 返回参数说明

注意

• 可以通过用户授权API来判断用户是否给应用授予相册的访问权限https://uniapp.dcloud.io/api/other/authorize
• H5没有API可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。

uni.compressImage(object)

压缩图片接口，可选压缩质量

平台差异说明

OBJECT 参数说明

success 返回参数说明

录音

uni.getRecorderManager()

获取全局唯一的录音管理器 recorderManager。

平台差异说明

recorderManager 对象的方法列表

start(options) 说明

其中，采样率和码率有一定要求，具体有效值如下：

onStop(callback) 回调结果说明

onFrameRecorded(callback) 回调结果说明

onError(callback) 回调结果说明

背景音频播放器

uni.getBackgroundAudioManager()

获取全局唯一的背景音频管理器 backgroundAudioManager。

背景音频，不是游戏的背景音乐，而是类似QQ音乐那样，App在后台时，仍然在播放音乐。这个API很费电

平台差异说明

backgroundAudioManager 对象的属性列表

backgroundAudioManager 对象的方法列表

errCode 说明

<template>
	<view>
		<button type="default" @click="openBgm">点我播放背景音乐</button>
		<button type="default" @click="closeBgm">点我关闭</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audio: null
			}
		},
		methods: {
			openBgm() {
				this.audio = uni.getBackgroundAudioManager()
				this.audio.src="https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/audio/%E6%99%AF%E5%B2%97%E5%B1%B1%20-%20%E5%AE%88%E4%B8%9A%E6%9B%B4%E6%AF%94%E5%88%9B%E4%B8%9A%E9%9A%BE.mp3"
				this.audio.play()
			},
			closeBgm() {
				this.audio.close()
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

音频

uni.createInnerAudioContext()

创建并返回内部 audio 上下文 innerAudioContext 对象。

平台差异说明

innerAudioContext 对象的属性列表

innerAudioContext 对象的方法列表

errCode 说明

支持格式

视频

uni.chooseVideo(object)

拍摄视频或从手机相册中选视频，返回视频的临时文件路径。

平台差异说明

OBJECT 参数说明

success 返回参数说明

uni.chooseMedia(object)

拍摄或从手机相册中选择图片或视频。

平台差异说明

OBJECT 参数说明

OBJECT.mediaType 合法值

OBJECT.sourceType 合法值

OBJECT.camera 合法值

success 返回参数说明

res.tempFiles 的结构

uni.saveVideoToPhotosAlbum(object)

保存视频到系统相册。

平台差异说明

OBJECT 参数说明

success 返回参数说明

uni.getVideoInfo(object)

获取视频详细信息

平台差异说明

OBJECT 参数说明

success 返回参数说明

res.orientation参数说明

视频组件控制

uni.createVideoContext(object)

创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。

平台差异说明

videoContext 对象的方法列表

• app-nvue 平台 2.2.5+ 支持 uni.createVideoContext(videoId, this)
• app-nvue 平台 2.2.5以下使用本API，需同时设置组件属性id和ref <video id="video1" ref="video1"></video>，或者直接使用 ref，例如 this.$refs.video1

<template>
	<view>
		<video class="video" @play="play" id="myVideo" :enable-danmu="true" :danmu-list="danmu" :src="url" controls></video>
		<input type="text" v-model="content" placeholder="请输入弹幕内容" />
		<button type="default" @click="sendDanmu">点我发送弹幕</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				video: null,
				danmu: [{
						text: "稽哥简直帅炸了",
						color: "#063ea5",
						time: 1
					},
					{

						text: "雷哥也可以帅，但是没必要",
						color: "#FFF",
						time: 4
					}
				],
				url: "https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/video/a88711e041b5492ba2d1609723e6c008.mp4"
			}
		},
		methods: {
			play() {
				this.video = uni.createVideoContext("myVideo")
			},
			sendDanmu() {
				this.video.sendDanmu({
					text: this.content,
					color: "#FFF"
				})
				// 清除内容
				this.content = ''
				console.log(this.danmu)
			}
		}
	}
</script>

<style>
	.video {
		width: 750rpx;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

相机组件控制

uni.createCameraContext()

创建并返回 camera 组件的上下文 cameraContext 对象。

平台差异说明

本API为 camera 组件配套的js API，与 camera 组件的平台兼容性相同，可实现非全屏摄像头。App端可通过plus.camera实现全屏摄像头。

cameraContext 对象的方法列表

cameraContext.tackPhoto(object)

cameraContext.setZoom()

cameraContext.startRecord(object)

cameraContext.stopRecord(object)

设备

因为某些原因不方便全部演示，这里只演示获取系统信息

uni.getSystemInfo(object)

获取系统信息。

OBJECT 参数说明：

success 返回参数说明：

Tips

• 屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度
• windowHeight不包含NavigationBar和TabBar的高度
• H5端，windowTop等于NavigationBar高度，windowBottom等于TabBar高度
• App端，windowTop等于透明状态NavigationBar高度，windowBottom等于透明状态TabBar高度

safeArea 的结构

safeAreaInsets 的结构

代码

<template>
	<view>
		<button type="default" @click="getSysInfo">点我获取</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			getSysInfo() {
				uni.getSystemInfo({
					success(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

界面

交互反馈

uni.showToast(object)

显示消息提示框。

OBJECT参数说明

icon 值说明

position 值说明（仅App生效）

showToast() {
uni.showToast({
title:"操作成功"
})
}
1
2
3
4
5

uni.hideToast()

隐藏消息提示框

uni.showLoading(object)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

OBJECT参数说明

			showLoad() {
				uni.showLoading({
					title:"加载中..."
				})
				setTimeout(()=>{
					uni.hideLoading()
				}, 2000)
			}
1
2
3
4
5
6
7
8

uni.hideLoading()

隐藏 loading 提示框。

uni.showModal(object)

显示模态弹窗，类似于标准 html 的消息框：alert、confirm。

OBJECT参数说明

注意

• 钉钉小程序真机与模拟器表现有差异，真机title，content均为必填项

success返回参数说明

			showModal() {
				uni.showModal({
					title:"提示",
					content:"哈哈哈哈哈哈哈哈",
					success(e) {
						if(e.confirm) {
							uni.showToast({
								title:"操作成功"
							})
						}
						if(e.cancel) {
							uni.showToast({
								title:"用户已取消"
							})
						}
					}
				})
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

uni.showActionSheet(object)

显示操作菜单

OBJECT参数说明

popover 值说明（仅App生效）

success返回参数说明

设置导航条

uni.setNavigationBarTitle(Object)

动态设置当前页面的标题。

OBJECT参数说明

uni.setNavigationBarColor(object)

设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖

平台差异说明

OBJECT参数说明

注意

• Android 上的 backgroundColor 参数有限制，黑色大于 rgb(30,30,30), 白色小于 rgb(235,235,235)
• 如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

animation 结构

animation.timingFunc 有效值

success返回参数说明

uni.showNavigationBarLoading(object)

在当前页面显示导航条加载动画。

平台差异说明

App平台调用此API时会在屏幕中间悬浮显示loading

OBJECT参数说明

uni.hideNavigationBarLoading(object)

在当前页面隐藏导航条加载动画。

平台差异说明

App平台调用此API时会关闭屏幕中间悬浮显示的loading

OBJECT参数说明

uni.hideHomeButton(object)

隐藏返回首页按钮。

平台差异说明

OBJECT参数说明

设置TabBar

uni.showTabBarRedDot(object)

显示 tabBar 某一项的右上角的红点。

平台差异说明

OBJECT参数说明：

		onLoad() {
			uni.showTabBarRedDot({
				index:3,
				success(e) {
					console.log(e)
				}
			})
		},
1
2
3
4
5
6
7
8

uni.hideTabBarRedDot(object)

隐藏 tabBar 某一项的右上角的红点。

平台差异说明

OBJECT参数说明：

			uni.hideTabBarRedDot({
				index:3,
				success(e) {
					console.log()
				}
			})
1
2
3
4
5
6

滚动

uni.pageScrollTo(object)

将页面滚动到目标位置。

OBJECT参数说明

selector 语法 selector类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

下拉刷新

onPullDownRefrech()

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(object)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

OBJECT 参数说明

success 返回参数说明

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

页面和窗体

页面通讯

uni.$emit(eventName, object)

触发全局的自定事件。附加参数都会传给监听器回调。

handleParent() {
				uni.$emit('method2')
			}
1
2
3

uni.$on(eventName, callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

		onLoad(e) {
			uni.$on("method2", () => {
				console.log("事件被调用了")
			})
		},
1
2
3
4
5

uni.$once(eventName, callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

uni.$off([eventName, callback])

移除全局自定义事件监听器。

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

第三方服务

获取服务供应商

uni.getProvider(object)

获取服务供应商。

在App平台，可用的服务商，是打包环境中配置的服务商，与手机端是否安装了该服务商的App没有关系。

云打包在manifest中配置相关模块和SDK信息，离线打包在原生工程中配置。某个服务商配置被打包进去，运行时就能得到相应的服务供应商。

平台差异说明

OBJECT 参数说明

service 值说明

success 返回参数说明

provider 在不同服务类型下可能的取值说明

			getProvider() {
				uni.getProvider({
					service:"oauth",
					complete(e) {
						console.log(e)
					}
				})
			}
1
2
3
4
5
6
7
8

登录

uni.login(object)

登录

平台差异说明

H5平台登陆注意事项：

• 微信内嵌浏览器运行H5版时，可通过js sdk实现微信登陆，需要引入一个单独的js，详见
• 普通浏览器上实现微信登陆，并非开放API，需要向微信申请，仅个别开发者有此权限
• H5平台的其他登陆，比如QQ登陆、微博登陆，uni-app未封装，请在条件编译里按普通H5写法编写。

OBJECT 参数说明

success 返回参数说明

各个平台的登录流程存在差异，详细请参考相关平台的文档说明：

				uni.login({
					provider:"weixin",
					success(e) {
						// 一般情况下这里获取的都是code
						// 通过code请求后台，后台请求微信服务器
						// 根据code获取openid或者unionid，处理自己的业务逻辑进行登录
						console.log(e)
					}
				})
1
2
3
4
5
6
7
8
9

uni.checkSession()

检查登录状态是否过期

1.6.0 新增

平台差异说明

			checkLogin() {
				uni.checkSession({
					complete(e) {
						console.log(e)
					}
				})
			}
1
2
3
4
5
6
7

uni.getUserInfo(object)

获取用户信息。

平台差异说明

注意： 微信小程序端，在用户未授权过的情况下调用此接口，不会出现授权弹窗，会直接进入 fail 回调（详见《微信小程序公告》）。在用户已授权的情况下调用此接口，可成功获取用户信息。

OBJECT 参数说明

lang 值说明

**注意：**在小程序 withCredentials 为 true 时或是在 App 调用 uni.getUserInfo，要求此前有调用过 uni.login 且登录态尚未过期。

success 返回参数说明

userInfo 参数说明

<button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo">opentype获取用户信息</button>
			getUserInfo(e) {
				console.log(e)
			},
1
2
3
4

分享

uni.share(object)

uni-app的App引擎已经封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。

可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。

可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。

平台差异说明

OBJECT 参数说明

type 值说明

scene 值说明

miniProgram 值说明

			share() {
				uni.share({
					provider:"weixin",
					type: 1,
					scene:"WXSenceTimeline",
					summary:"测试微信分享",
					complete(e) {
						console.log(e)
					}
				})
			}
1
2
3
4
5
6
7
8
9
10
11

支付

uni.requestPayment(object)

支付

uni.requestPayment是一个统一各平台的客户端支付API，不管是在某家小程序还是在App中，客户端均使用本API调用支付。

本API运行在各端时，会自动转换为各端的原生支付调用API。

注意支付不仅仅需要客户端的开发，还需要服务端开发。虽然客户端API统一了，但各平台的支付申请开通、配置回填仍然需要看各个平台本身的支付文档。

比如微信有App支付、小程序支付、H5支付等不同的申请入口和使用流程，对应到uni-app，在App端要申请微信的App支付，而小程序端则申请微信的小程序支付。

			pay() {
				uni.requestPayment({
					provider:"alipay",
					orderInfo: "4154156456456",
					complete(e) {
						console.log(e)
					}
				})
			}
1
2
3
4
5
6
7
8
9

app支付

流程：支付平台功能申请 -> manifest.json 里配置支付参数 -> uni-app 里调用 API 进行支付

App支付功能申请

1. 支付宝App支付功能申请

   登录支付宝账号，创建应用接入支付宝App支付能力，包括以下步骤：

   • 创建应用（获取appid）
   • 开通App支付功能
   • 配置密钥（获取公钥、私钥）

   具体可参考支付宝官方文档： App支付快速接入

2. 微信App支付功能申请

   • 到 微信开放平台 申请移动应用并开通支付功能，申请应用后可以获取 AppID 和 AppSecret 值
   • 应用接入 微信商户平台，选择 App 支付
   • 开通支付功能后可获取支付业务服务器配置数据：PARTNER（财付通商户号）、PARTNER_KEY（财付通密钥）、PAYSIGNKEY（支付签名密钥）
   • 需要将从微信开放平台申请的appid，填回到 manifest-App SDK配置-支付-微信支付 中。打包后生效。

   具体可参考微信官方文档： 移动应用开发

   注意微信的App支付、小程序支付、H5支付是不同的体系。微信小程序支付在 微信商户平台 申请支付时，选择公众号支付；普通浏览器里也可以调起微信进行支付，这个在微信叫做H5支付，此功能未开放给普通开发者，需向微信单独申请，详见

3. 苹果iap应用内支付申请

   使用苹果开发者账号登录 App Store Connect，在应用的功能选项卡页面，添加 App 内购项目。注意：

   • 内购项目的各信息需要填写完整，然后保存，此时内购项目的状态应该是准备提交，当提交应用通过审核后，状态则变为已批准
   • 测试时，建议使用测试证书打一个自定义的 iOS 基座进行测试
   • 在应用 TestFight 的选项卡添加 App Store Connect 用户，测试支付时可以使用此用户帐号进行测试
   • orderInfo 的 productid 是自己填写的产品 ID
   • 调用 uni.requestPayment 前必须先使用 5+Plus 的方法调用 requestOrder 获取订单信息，否则会导致无法支付

其他

授权

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会直接进入失败回调，一般搭配uni.getSetting和uni.openSetting使用。

平台差异说明

OBJECT 参数说明

scope 列表

配置

uniapp支持多种类型的配置，除uniapp本身的配置外，还支持vue的 vue.config.js、webpack的 package.json等。

其中 package.json、vue.config.js 在vue课程中都有涉及，本次课程不再讲解

manifest.json 为图形化配置，本次课程不做细致讲解。

pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等。

pages

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

• pages节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

style

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 globalStyle 中相同的配置项

easycom

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

easycom是自动开启的，不需要手动开启

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
• tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
• 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

midButton 属性说明

midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

uni-app 官方扩展插件（uni ui）及 插件市场 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。

如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；

使用时需要在 style 节点上加上 lang="scss"。

<style lang="scss">
</style>
1
2

下面是uni.scss内置的变量

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<style lang="scss">
	.third {
		color: $uni-color-primary;
		.third-text {
			color: $uni-color-warning;
		}
	}
</style>
1
2
3
4
5
6
7
8

App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

以下是 App.vue 中定义globalData的相关配置：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>
1
2
3
4
5
6
7

js中操作globalData的方式如下： getApp().globalData.text = 'test'

在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。

如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

		onShow() {
			uni.hideTabBarRedDot({
				index:3,
				success(e) {
					console.log()
				}
			})
			uni.showToast({
				title:getApp().globalData.author
			})
		},
		methods: {
			getGlobal() {
				console.log(getApp().globalData.author)
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三方组件库

uniapp相比其他跨端技术的优势在于，其生态极为丰富，插件市场近乎上千款从插件满足于大多数场景，其中不乏优质的组件库。

其中，ColorUI、uView、ThorUI、VantUI、uni-ui，grace-ui是目前使用量最多的UI库

ColorUI

作者网站：
https://www.color-ui.com/
H5在线预览：
http://demo.color-ui.com/
项目源码地址：
https://github.com/weilanwl/ColorUI
https://gitee.com/weilanwl/ColorUI
群友写的文档：
http://docs.xzeu.com
群友写的使用教程: http://blog.csdn.net/miao_yf/article/details/102971767
https://blog.csdn.net/miao_yf/article/details/103081988
https://blog.csdn.net/miao_yf/article/details/103199773
1
2
3
4
5
6
7
8
9
10
11
12

---

该文档来自与尚学堂

https://ask.dcloud.net.cn/article/36617)） | App 2.4.0+ 支持 |
| list | Array | 是 | | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab | |
| position | String | 否 | bottom | 可选值 bottom、top | top 值仅微信小程序支持 |
| fontSize | String | 否 | 10px | 文字默认大小 | App 2.3.4+ |
| iconWidth | String | 否 | 24px | 图标默认宽度（高度等比例缩放） | App 2.3.4+ |
| spacing | String | 否 | 3px | 图标和文字的间距 | App 2.3.4+ |
| height | String | 否 | 50px | tabBar 默认高度 | App 2.3.4+ |
| midButton | Object | 否 | | 中间按钮 仅在 list 项为偶数时有效 | App 2.3.4+ |

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

midButton 属性说明

midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

uni-app 官方扩展插件（uni ui）及 插件市场 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。

如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；

使用时需要在 style 节点上加上 lang="scss"。

<style lang="scss">
</style>
1
2

下面是uni.scss内置的变量

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<style lang="scss">
	.third {
		color: $uni-color-primary;
		.third-text {
			color: $uni-color-warning;
		}
	}
</style>
1
2
3
4
5
6
7
8

App.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

以下是 App.vue 中定义globalData的相关配置：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>
1
2
3
4
5
6
7

js中操作globalData的方式如下： getApp().globalData.text = 'test'

在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。

如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

		onShow() {
			uni.hideTabBarRedDot({
				index:3,
				success(e) {
					console.log()
				}
			})
			uni.showToast({
				title:getApp().globalData.author
			})
		},
		methods: {
			getGlobal() {
				console.log(getApp().globalData.author)
			}
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三方组件库

uniapp相比其他跨端技术的优势在于，其生态极为丰富，插件市场近乎上千款从插件满足于大多数场景，其中不乏优质的组件库。

其中，ColorUI、uView、ThorUI、VantUI、uni-ui，grace-ui是目前使用量最多的UI库

ColorUI

作者网站：
https://www.color-ui.com/
H5在线预览：
http://demo.color-ui.com/
项目源码地址：
https://github.com/weilanwl/ColorUI
https://gitee.com/weilanwl/ColorUI
群友写的文档：
http://docs.xzeu.com
群友写的使用教程: http://blog.csdn.net/miao_yf/article/details/102971767
https://blog.csdn.net/miao_yf/article/details/103081988
https://blog.csdn.net/miao_yf/article/details/103199773
1
2
3
4
5
6
7
8
9
10
11
12

---

该文档来自与尚学堂