uniapp介绍

什么是uniapp

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

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

移动端跨平台技术发展史

随着互联网的逐渐发展，互联网公司越来越多，原生的移动端存在无法跨平台的缺点，当一个app想要同时运行于安卓和IOS平台时，就不得不招一个Android工程师和一个IOS工程师，开发成本较高。有些公司为了提高竞争，想要更迅速更省成本地进行开发，就不再满足Android端一套代码，iOS端一套代码。

与此同时，其他技术领域和各大公司也都觊觎着这份大蛋糕，纷纷推出相关的技术，这样跨平台技术应运而生，并且开始在公司中生根发芽。

• WebApp

  WebApp是指H5版本的应用，运行于浏览器上，然后给这个网页套一层APP的壳，使用WebView进行渲染。

  2014年HTML5的标准制定完成，WebAPP大有取代原生APP的气势，但它始终是”主角的心，配角的命“。总得概括下来WebApp的应用存在以下缺点。

  • 性能低，操作体验不好
  • 无法调用原生API，很多功能无法实现
  • 依赖于网络，网速慢的时候体验差，比较消耗流量

  这个时期出现过mui，虽然是一个ui库，但是提供了部分的原生功能。

• HybridApp

  某个二线互联网公司的App是以原生为主，HTML5开发打酱油，随着应用越来越复杂，终于有一天发现原生有一个方法最大数限制，一些页面需要内嵌HTML5的页面，于是原生和HTML5团队一起做了第一个Hybrid项目，这一套代码兼容三端并且效率很高，因此Hybrid App就成了这个公司的主流，业界其他的公司也都纷纷效仿。

  通过原生SDK提供的API，APP可以与底层交互。而HTML5仅仅是起到渲染页面的作用，从而提高了开发效率。虽然开发效率高，可以跨平台，但是体验上比不上原生。

  这个时期出现过Native.js，网页中引入后，可以在APP上调用一些原生的API，从而增强了纯网页版APP的功能。之后，又推出了5+APP，使跨端技术逐渐趋于强大。

• 语言编译转换

  语言编译转换是指直接将某个语言编译为一个平台下的二进制文件，比较有名的就是Xamarin框架，通过两套编译器，使一份代码能够在多个平台运行。

• 原生渲染

  “原生”这个概念从这个阶段开始便出现了歧义。以往的“原生”，认为是Java、Kotlin等语言开发的，打包后编译成二进制文件，可以直接调用原生API，并且使用Native渲染的应用，这类应用也是移动端中性能最好的，缺点就是无法跨平台。

  而这里的“原生”，指的则是用原生控件去渲染页面。在这个时期，跨平台技术百家争鸣，出现了由ReactNative、Weex、快应用为代表的多款跨平台技术。

  ReactNative是Facebook早先开源的基于React的跨平台技术，底层对Android和IOS的原生代码进行封装，使用JS就可以编写出原生代码。所有的代码都会运行在V8引擎中，通过WebSocket与原生代码进行通信。

  Weex是阿里开源的一款跨平台移动开发工具，它能够完美兼顾性能与动态性，让移动端开发者通过前端语法就能写出原生级别的性能体验，并且支持IOS、Android、Web等多端部署。

  此后，移动端跨端主要由React和Vue两大前端框架引导。React衍生出了 Taro，可以一份代码跨10端，Vue衍生出了 Uniapp，同样也是一份代码跨10端

• 自绘UI

  自绘UI指的是通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统平台的原生控件，这样做可以保证不同平台UI的一致性。代表技术有Flutter。

  Flutter是谷歌的移动UI框架，可以快速在Android和iOS上构建高质量的原生用户界面， 它的前身是谷歌试验项目Sky。

  Futter提出了一切皆为控件（Widget）的概念，除了基本的文本、图片、卡片、输入框等Widget，布局方式和动画等也都是Widget。通过使用不同类型的Widget，就可以实现复杂度的界面。

  Flutter作为新兴的技术，轮子并没有taro和uniapp多，并且使用Dart语言开发，提高了学习成本，但是性能比taro和uniapp开发的应用都要高，因此开发者往往在技术选型上，针对不同的场景在这三者之间进行取舍。如果仅仅是跨Android和IOS的App，建议使用Flutter，如果还需要跨小程序，毫无疑问那就是Taro或者Uniapp。

为什么要学习Uniapp

• 开发者/案例数量众多

  • 上百家新冠抗疫系统
  • 华为荣耀亲选商城
  • 腾讯Discuz！Q
  • 星巴克小程序
  • 开源中国
  • Vivo官方商城
  • 抖音小游戏中心
  • 中国移动咪咕商城
  • 中国银联云闪付、招商银行、平安银行等多家银行APP
  • 等等等等…

• 平台能力不受限

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

• 生态丰富

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

• 开发成本低

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

• 学习成本低

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

• 性能体验优秀

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

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

快速上手

创建uni-ui项目

多端演示。

目录结构

一个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            配置页面路由、导航条、选项卡等页面类信息，

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
}

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

flex-wrap

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

.box {
    flex-wrap: nowrap | wrap | wrap-reverse
}

nowrap（默认）：不换行

wrap：换行，第一行在上方

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

flex-flow

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

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

justify-content

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

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

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

align-items

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

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

• 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;
}

• 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>;
}

flex-grow

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

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

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

flex-shrink

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

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

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

flex-basis

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

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

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

flex

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

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

该属性有两个快捷值：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;
}

样式

尺寸单位

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" : {}
        }
    ],

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>

可滚动视图（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>

滑块视图（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>

可拖动区域（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>

覆盖视图（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>

使用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>
  

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

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

文本组件（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>

富文本（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>

进度条（progress）

代码演示

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

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

<style>

</style>

表单组件

按钮（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>

单选框（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>

多选框（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>

表单（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>

输入框（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>

文本域（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>

富文本编辑器（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>

label

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

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

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

不支持app-nvue

代码演示

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

滑块（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>

开关（switch）

代码演示

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

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

<style>

</style>

滚动选择器（picker）

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

普通选择器（selector）

代码演示

多列选择器（multiSelector）

代码演示

时间选择器（time）

代码演示

日期选择器（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>

省市区选择器（region）

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

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

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

代码演示

导航

页面链接（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>

媒体组件

音频（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

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

图片（image）

mode的有效值

代码演示

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

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

<style>

</style>

视频（video）

视频链接：

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

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>

地图

地图（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>

小程序开放能力

公众号关注组件（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>

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>

列表组件（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>

扩展组件

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>

运行环境判断

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

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

development 是开发环境

production 是生产环境

条件编译

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

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

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

语法：

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

平台有以下值

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

在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>

生命周期

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>

页面生命周期

页面生命周期就类似于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>

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>

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

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

files参数说明

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

Tip:

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

success 返回参数说明

代码演示

监听上传

该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)
					}
				})

uploadTask对象中有以下方法

onProgressUpdate 返回参数说明

代码演示

文件下载（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>

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

路由跳转

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>

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"});

App-nvue 平台

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

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

注意事项

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不匹配，正常打开新页面

窗口动画

本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
});

组件

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>

pages.json

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

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}

显示动画与关闭动画，会有默认的对应规则。但是如果通过 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>

位置

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>

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>

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

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

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>

音频

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>

相机组件控制

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>

界面

交互反馈

uni.showToast(object)

显示消息提示框。

OBJECT参数说明

icon 值说明

position 值说明（仅App生效）

showToast() {
uni.showToast({
title:"操作成功"
})
}

uni.hideToast()

隐藏消息提示框

uni.showLoading(object)

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

OBJECT参数说明

			showLoad() {
				uni.showLoading({
					title:"加载中..."
				})
				setTimeout(()=>{
					uni.hideLoading()
				}, 2000)
			}

uni.hideLoading()

隐藏 loading 提示框。

uni.showModal(object)

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

OBJECT参数说明

注意

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

success返回参数说明