Uni-app的基础简介

g什么是Uni-app？

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

优点：

跨平台

性能好：加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。

插件多：插件市场数千款插件

简单易懂：基于通用的前端技术栈，采用vue语法+微信小程序api。

基础组件

view

所有的视图组件，包括view、swiper等，跟前端中的div标签同作用

scroll-view

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

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动

swiper

滑块视图容器。

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

text组件

文本组件。用于包裹文本内容。

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。

rich-text

跟text差不多，能支持事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

button

按钮，用法与Html中相同

checkbox-group

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

form

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

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

input

单行输入框。

html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。

picker

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

picker-view

嵌入页面的滚动选择器

radio-group

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

slider

滑动选择器。

switch

开关选择器。