目录

什么是uniapp

为什么学uniapp

uni-app目录结构

uniapp开发规范

pages.json页面的基本配置

pages页面配置

pages对象的属性

globalStyle全局配置 

配置基本tabbar

tabbar的基本属性

condition启动模式配置

具体属性

组件的基本使用

text文本组件

view组件

button组件

size属性

type属性

form-type属性

image组件

mode属性

uni-app中的样式

scss嵌套css的使用

基本的数据绑定

uni-app中的事件

生命周期函数

应用的生命周期

页面的生命周期函数

uni-app中的网络请求

get请求

node.js搭建服务用于接收get请求

uni-app发送get请求

post请求

node.js搭建服务用于接收post请求

uni-app发送post请求

数据缓存

异步设置缓存

Object中参数说明

同步设置缓存

参数说明

图片的上传和预览

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

Object参数说明

预览图片

Object参数说明

条件编译跨端兼容

跨平台兼容

条件编译

平台标识

uniapp中的导航跳转

声明式跳转

属性值

编程式导航

保留当前页面，跳转到应用内的某个页面

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

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

组件的创建和使用

组件的生命周期

组件之间的通讯方式

父组件向子组件传值

子组件从父组件接收值

子组件向父组件传值

父组件从子组件接收值

兄弟组件之间的相互传参

兄弟组件

父组件

uni-ui组件库的基本使用

以日历组件的使用为例

首先使用HbuilderX导入插件

然后就直接使用

什么是uniapp

含义：其是使用vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到ios、android、h5以及各种小程序（微信/支付宝/百度/头条/qq/钉钉）等多个平台

为什么学uniapp

• 一套代码可以打包到不同的应用平台
• 方便入手
• 丰富的生态环境

uni-app目录结构

• pages：vue的组件页面一般都放在这里
• static：存放静态文件的地方
• unpackage：存放项目最终打包输出的文件
• App.vue：用来配置vue的全局组件
• main.js：vue初始化的入口文件
• index.html：最终项目解析之后所生成的单文件项目
• uni.scss：定义公共的css样式
• manifest.json：项目的配置入口
• pages.json：页面以及全局外观的配置

uniapp开发规范

• 页面文件遵循vue的单文件组件
• 组件标签靠近小程序规范
• 接口能力靠近微信小程序规范，但需要将前缀wx换为uni
• 数据绑定及事件处理遵循vue规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

pages.json页面的基本配置

pages页面配置

配置的vue组件一般都放在page目录中，若要使该组件生效则需要将该vue组件的路径path写在pages.json内pages数组中（该数组内每一项都是一个对象），并且pages数组中第一项vue页面表示应用的启动页；其中每个对象表示一个页面的配置，多个对象之中用逗号相隔。

pages对象的属性

globalStyle全局配置 

在pages.json内通过globalStyle属性进行全局配置

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

注意：页面配置内每个页面的style配置会将全局配置覆盖

配置基本tabbar

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

tabbar的基本属性

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

注意：

• 当设置的position为top时，将不会显示icon
• tabBar中的list是一个数组，只能配置最少两个、最多五个tab，tab按数组的顺序排序
• tabbar的页面展现过一次后就会保留在内存中，再次切换到该tabbar页面。只会触发页面的onShow函数，不会再触发onLoad函数
• pagePath为点击后跳转页面的路径

condition启动模式配置

启动模式配置仅在开发期间生效，模拟直达页面的场景，如小程序转发后用户点击所打开的页面

具体属性

list内的属性

注意：list数组里面由多个对象组成，每个对象所具有的属性如下

组件的基本使用

前言：uni-app为开发者提供了一系列基础组件，类似html里的基础标签元素，虽然uni-app不推荐使用HTML标签，但实际上若开发者写了div等h5标签，在编译到非H5平台时也会被编译成view标签，类似的还有span转text、a转navigator等，包括css里的选择器也会转；但为了管理方便，策略统一，新写代码时仍建议使用view等标签

text文本组件

注意：

• text组件相当于行内标签（span），在同一行显示
• 除了文本节点以外的其他节点都无法长按选中
• ensp：中文空格一半大小；emsp：中文空格大小；nbsp：根据字体控制空格大小

view组件

前言：view属性相当于HTML中的div标签

button组件

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮背景色是否透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	是否带loading图标
hover-class	String	button-hover	指定按钮按下去的样式类，当属性为none时没有点击效果
hover-start-time	Number	20	按住多久后出现点击态单位ms
hover-stay-time	Number	20	手指松开后生态保存时间，单位ms
form-type	String		用于form标签，点击后分别触发form组件的submit/reset事件

size属性

• default：默认大小
• mini：小尺寸

type属性

• primary：微信小程序为绿色，app、h5、百度小程序、支付宝小程序为蓝色，头条小程序为红色，qq小程序为浅蓝色
• default：白色
• warn：红色

form-type属性

• submit：提交表单事件
• reset：重置表单事件

image组件

mode属性

注意：

• image组件默认宽度300px、高度225px
• src仅支持相对路径、绝对路径，支持base64编码
• webp格式图片、app-vue下，ios不支持，android支持；app-nvue下，ios和android均支持。

uni-app中的样式

rpx：响应式px，一种根据屏幕宽度自适应的动态单位

理解：以750宽度的屏幕为基准，750rpx恰好为屏幕的宽度，屏幕变宽，那么rpx实际显示效果也会等比放大 

使用@import语句可以导入外联样式表

语法：@import(url)

导入本页面相同路径下的add.css文件

注意：

• 在uniapp中支持基本的常用选择器，如class、id、标签名选择器等，但是不能使用通配符*选择器
• uniapp中的page标签相当于body节点
• 定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件定义的样式为局部样式，只会作用于对应的页面，并会覆盖App.vue中的样式

scss嵌套css的使用

注意：

• 使用时需要下载scss插件
• uni.scss中还定义了公共的样式属性，可以直接拿来使用（直接用属性替换对应的颜色）

基本的数据绑定

uni-app中的事件

生命周期函数

应用的生命周期

生命周期含义：一个对象从创建、运行、销毁的整个过程被称为生命周期

生命周期函数：生命周期中的每个阶段都会伴随着一个函数的触发，这些函数被称为生命周期函数

注意：应用的生命周期函数应该定义在App.vue内

页面的生命周期函数

onPullDownRefresh：监听页面下拉刷新状态

onReachBottom：监听页面触底的事件（前提页面高度，高于屏幕高度-可滚动）

注意：

• 页面的生命周期函数一般都定义在每个页面组件内
• onLoad函数和onReady函数仅会触发一次
• 关闭下拉刷新用uni.stopPullDownRefresh()方法，触发下拉刷新用uni.startPullDownRefresh()函数
• 页面触底的事件中触底距离可以在通过pages.json文件内设置onReachBottomDistance属性来设置，默认为50

uni-app中的网络请求

语法：uni.request(object)

object对应的参数

参数名	类型	必填	默认值	说明
url	String	是		请求的url
data	Object/String/ArrayBuffer	否		请求的参数
header	Obhect	否		设置请求的请求头
method	String	否	Get	请求方法
timeout	Number	否	30000	请求超时时间，单位ms
success	Function	否		调用成功后执行的回调函数
fail	Function	否		调用失败后执行的回调函数
dataType	String	否	json	传输的数据格式
responseType	String	否	text	接受的数据格式

get请求

node.js搭建服务用于接收get请求

//引入http内置模块
var http=require("http")
//创建http服务
var server=http.createServer()
server.on("request",(req,res)=>{//拼接并解析请求的urlconst myurl=new URL(req.url,"http://localhost:3000/")//获取请求url的参数迭代器var b=myurl.searchParams//对该迭代器进行遍历for (const [key,value] of b) {console.log(key,value);}//设置响应编码格式res.setHeader("content-Type","text/html;charset=utf-8")//设置返回内容res.write("好吧，你已经成功了")res.end()
})
server.listen(3000,()=>{console.log("server start")
})

uni-app发送get请求

注意：res.data为接收到的返回值

post请求

node.js搭建服务用于接收post请求

//引入http内置模块
var http=require("http")
//创建http服务
var server=http.createServer()
server.on("request",(req,res)=>{let data="";   //接收post请求传递的参数req.on("data",chunk=>{data+=chunk})req.on("end",()=>{console.log(data);})//设置响应编码格式res.setHeader("content-Type","text/html;charset=utf-8")//设置返回内容res.write("好吧，你已经成功了")res.end()
})
server.listen(3000,()=>{console.log("server start")
})

uni-app发送post请求

数据缓存

异步设置缓存

在本地储存中设置数据：uni.setStorage(Object)

在本地储存中获取数据：uni.getStorage(Object)

在本地储存中移除数据：uni.removeStorage(Object)

理解：将数据存储在本地缓存中指定的key中，会覆盖掉原来key的内容，但是以上的接口为异步接口

Object中参数说明

同步设置缓存

同步设置缓存：uni.setStorageSync(key,data)

同步获取缓存：uni.getStorageSync(key)

同步移除缓存：uni.removeStorageSync(key)

参数说明

图片的上传和预览

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

方法：uni.chooseImage(Object)

Object参数说明

预览图片

方法：uni.previewImage(Object)

Object参数说明

注意：上面的current代表的是当前的图片的路径

条件编译跨端兼容

跨平台兼容

含义：uni-app已经将常用的组件，js API封装到框架中，开发者按照uni-app规范开发即刻保证多平台兼容，大部分业务均可直接满足，但是每个平台都有自己的一些特性，因此会存在着一些无法跨平台的情况

条件编译

含义：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台

语法：#ifdef 平台标识 …… #endif

平台标识

注意：条件编译要写在注释里面

uniapp中的导航跳转

声明式跳转

组件：navigator

属性值

open-type的有效值

编程式导航

保留当前页面，跳转到应用内的某个页面

语法：uni.navigateTo(object)

object参数说明

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

语法：uni.switchTab(object)

object参数说明

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

语法：uni.redirectTo(object)

object属性

注意：导航过程中也可以进行页面的传参，通过？和&拼接的形式，若取得上个页面传过来的参数则需要页面生命周期onLoad函数。

组件的创建和使用

前言：在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过import的方式导入，再通过components进行注册即可

组件的生命周期

组件之间的通讯方式

父组件向子组件传值

子组件从父组件接收值

子组件向父组件传值

父组件从子组件接收值

兄弟组件之间的相互传参

兄弟组件

父组件

uni-ui组件库的基本使用

含义：uni-ui是DCloud提供的一个跨端ui库，他是基于vue组件的，flex布局的，无dom的全端ui库

网址：https://ext.dcloud.net.cn/

以日历组件的使用为例

首先使用HbuilderX导入插件

然后就直接使用