123没有肆

微信小程序开发--uniapp

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

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

flex-grow

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

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

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

flex-shrink

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

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

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

flex-basis

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

.item {
    flex-basis:  | 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、百分比这几种尺寸单位，因此在开发中极不建议使用这几种单位

选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class=“intro” 的组件
#id	#firstname	选择拥有 id=“firstname” 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅微信小程序和App生效
::before	view::before	在 view 组件前边插入内容，仅微信小程序和App生效

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区域里直接写文字。否则即使渲染了，也无法绑定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，需要注意不能用该组件包裹文字，否则文字样式将不生效。

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

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

代码演示

可滚动视图（scroll-view）

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

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

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

代码演示

滑块视图（swiper）

滑块视图容器。

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

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

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

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item 可见时的 class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	字节跳动小程序不支持

可拖动区域（movable）

movable-area

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

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

属性名	类型	默认值	说明
scale-area	Boolean	false	当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area

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

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

movable-view

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

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

属性名	类型	默认值	说明	平台差异说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性	微信小程序、支付宝小程序、App、H5、百度小程序
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动	微信小程序、支付宝小程序、App、H5、百度小程序
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	微信小程序、支付宝小程序、App、H5、百度小程序
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	微信小程序、支付宝小程序、App、H5、百度小程序
disabled	Boolean	false	是否禁用
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	微信小程序、支付宝小程序、App、H5
scale-min	Number	0.5	定义缩放倍数最小值	微信小程序、支付宝小程序、App、H5
scale-max	Number	10	定义缩放倍数最大值	微信小程序、支付宝小程序、App、H5
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	微信小程序、支付宝小程序、App、H5
animation	Boolean	true	是否使用动画	微信小程序、支付宝小程序、App、H5、百度小程序
@change	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，	微信小程序、App、H5、百度小程序

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轴方向分开考虑）

代码演示

覆盖视图（cover-view）

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

基础内容

图标（icon）

属性名	类型	默认值	说明
type	String		icon的类型
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

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

代码演示

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

"icon">;

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

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

文本组件（text）

用于包裹文本。

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选

组件内只支持嵌套，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。

在app-nvue下，只有才能包裹文本内容。无法在组件包裹文本。

除了文本节点以外的其他节点都无法长按选中。

支持 \n 方式换行。

如果使用组件编译时会被转换为。

代码演示

富文本（rich-text）

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

属性名	类型	默认值	说明	平台兼容
nodes	Array / String	[]	节点列表 / HTML String，即富文本内展示的值

元素节点为node

属性	说明	类型	必填	备注
name	标签名	String	是	支持部分受信任的 HTML 节点
attrs	属性	Object	否	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	Array	否	结构和 nodes 一致

即使元素节点使用String，在渲染时也会转成node去渲染，这样会有性能损耗

因此建议使用 html-parser 进行转换

代码演示

进度条（progress）

属性名	类型	默认值	说明	平台差异说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
border-radius	number/string	0	圆角大小	app-nvue、微信基础库2.3.1+、QQ小程序
font-size	number/string	16	右侧百分比字体大小	app-nvue、微信基础库2.3.1+、QQ小程序
stroke-width	Number	6	进度条线的宽度，单位px
activeColor	Color	#09BB07（百度为#E6E6E6）	已选择的进度条的颜色
backgroundColor	Color	#EBEBEB	未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	App、H5、微信小程序、QQ小程序
@activeend	EventHandle		动画完成事件	微信小程序

代码演示

表单组件

按钮（button）

属性名	类型	默认值	说明	生效时机	平台差异说明
size	String	default	按钮的大小，default/mini
type	String	default	按钮的样式类型，primary/default/warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标		App-nvue 平台，在 ios 上为雪花，Android上为圆圈
form-type	String		用于组件，点击分别会触发组件的 submit/reset 事件
open-type	String		开放能力，指各种小程序的开放能力，比如获取openid
app-parameter	String		打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效		微信小程序、QQ小程序
session-from	string		会话来源，open-type="contact"时有效		微信小程序
send-message-title	string	当前标题	会话内消息卡片标题，open-type="contact"时有效		微信小程序
send-message-path	string	当前分享路径	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效		微信小程序
send-message-img	string	截图	会话内消息卡片图片，open-type="contact"时有效		微信小程序
show-message-card	boolean	false	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效		微信小程序
@getphonenumber	Handler		获取用户手机号回调	open-type=“getPhoneNumber”	微信小程序
@getuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo	open-type=“getUserInfo”	微信小程序
@error	Handler		当使用开放能力时，发生错误的回调	open-type=“launchApp”	微信小程序
@opensetting	Handler		在打开授权设置页并关闭后回调	open-type=“openSetting”	微信小程序
@launchapp	Handler		打开 APP 成功的回调	open-type=“launchApp”	微信小程序

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

open-type 有效值

值	说明	平台差异说明
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志	App、微信小程序、QQ小程序
share	触发用户转发	微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序
getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括头像、昵称等信息	微信小程序、百度小程序、QQ小程序
contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息	微信小程序、百度小程序
getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数	微信小程序、QQ小程序
openSetting	打开授权设置页	微信小程序、百度小程序
getAuthorize	支持小程序授权	支付宝小程序
contactShare	分享到通讯录好友	支付宝小程序
lifestyle	关注生活号	支付宝小程序
openGroupProfile	呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest中必须配置groupIdList	QQ小程序基础库1.4.7版本+

在小程序中，开发者可以登录微信小程序管理后台、QQ小程序后台后，进入菜单“客服反馈”页面获取反馈内容。

在 App 中，开发者登录 DCloud开发者中心后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。

点击 share 分享按钮时会触发 onShareAppMessage

支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，参考

代码演示

单选框（radio）

radio-group

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

属性说明

属性名	类型	默认值	说明
@change	EventHandle		中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

radio

单选项目。

属性说明

属性名	类型	默认值	说明
value	String		标识。当该选中时，的 change 事件会携带的 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color		radio的颜色，同css的color

代码演示

多选框（checkbox）

checkbox-group

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

属性说明

属性名	类型	默认值	说明
@change	EventHandle		中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性说明

属性名	类型	默认值	说明
value	String		标识，选中时触发的 change 事件，并携带的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

代码演示

表单（form）

表单，将组件内的用户输入的提交。

当点击表单中 formType 为 submit 的

属性名	类型	默认值	说明	平台差异说明
value	String		输入框的初始内容
type	String	text	input 的类型，见下表
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-class	String	“input-placeholder”	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
confirm-type	String	done	设置键盘右下角按钮的文字，仅在 type=“text” 时生效。
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	App、微信小程序、支付宝小程序、百度小程序、QQ小程序
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序
@input	EventHandle		当键盘输入时，触发input事件，event.detail = {value}	差异见下方 Tips
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、App（2.2.3+）、QQ小程序支持 height
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
@confirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}

值	说明	平台差异说明
text	文本输入键盘
number	数字输入键盘	均支持，注意iOS上app-vue弹出的数字键盘并非9宫格方式
idcard	身份证输入键盘	微信、支付宝、百度、QQ小程序
digit	带小数点的数字键盘	App的nvue页面、微信、支付宝、百度、头条、QQ小程序

值	说明	平台差异说明
send	右下角按钮为“发送”	微信、支付宝、百度小程序、App的nvue
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”	微信、支付宝、百度小程序、App的nvue
go	右下角按钮为“前往”
done	右下角按钮为“完成”	微信、支付宝、百度小程序、App的nvue

属性名	类型	默认值	说明	平台差异说明
value	String		输入框的内容
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	textarea-placeholder	指定 placeholder 的样式类	字节跳动小程序不支持
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
auto-height	Boolean	false	是否自动增高，设置auto-height时，style.height不生效
show-confirm-bar	Boolean	true	是否显示键盘上方带有”完成“按钮那一栏	微信小程序、百度小程序、QQ小程序
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	App-Android（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度	仅微信小程序、App（HBuilderX 2.0+ nvue uni-app模式）、QQ小程序支持 height
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value, cursor}
@linechange	EventHandle		输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}	字节跳动小程序不支持,nvue ios暂不支持
@input	EventHandle		当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上
@confirm	EventHandle		点击完成时，触发 confirm 事件，event.detail = {value: value}	微信小程序、百度小程序、QQ小程序

属性名	类型	说明	平台差异说明
report-submit	Boolean	是否返回 formId 用于发送模板消息	微信小程序、支付宝小程序
report-submit-timeout	number	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId	微信小程序2.6.2
@submit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 为 true 时才会返回 formId
@reset	EventHandle	表单重置时会触发 reset 事件

微信小程序开发--uniapp

uniapp介绍

什么是uniapp

移动端跨平台技术发展史

为什么要学习Uniapp

快速上手

目录结构

起步-flex布局

基本概念

容器的属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

项目的属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

样式

尺寸单位

选择器

路由

NVUE

介绍

快速上手

适用场景

不足之处

常用组件

视图容器

视图容器（view）

可滚动视图（scroll-view）

滑块视图（swiper）

可拖动区域（movable）

movable-area

movable-view

覆盖视图（cover-view）

基础内容

图标（icon）

使用iconfont

文本组件（text）

富文本（rich-text）

进度条（progress）

表单组件

按钮（button）

单选框（radio）

多选框（checkbox）

表单（form）

输入框（input）

文本域（textarea）