目录
什么是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文件
-
<style>
-
@import url(
"add.css");
-
</style>
注意：
- 在uniapp中支持基本的常用选择器，如class、id、标签名选择器等，但是不能使用通配符*选择器
- uniapp中的page标签相当于body节点
- 定义在App.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件定义的样式为局部样式，只会作用于对应的页面，并会覆盖App.vue中的样式
scss嵌套css的使用
-
<template>
-
<view class="box">
-
<text>唱歌跳舞打篮球
</text>
-
</view>
-
</template>
-
<script>
-
</script>
-
<style lang="scss">
-
.box{
-
width:
100px;
-
height:
100px;
-
background-color: aqua;
-
text{
-
background-color: red;
-
}
-
}
-
</style>
注意：
- 使用时需要下载scss插件
- uni.scss中还定义了公共的样式属性，可以直接拿来使用（直接用属性替换对应的颜色）
基本的数据绑定
-
<template>
-
<view>
-
<view>数据绑定的学习
</view>
-
<!-- 插值表达式 -->
-
<view>
{{msg}}
</view>
-
<!-- 动态绑定属性，v-bind也可以省略不写 -->
-
<image v-bind:src="imgUrl">
</image>
-
<!-- v-for绑定 -->
-
<view v-for="(item,index) in arr">
-
序号：
{{index}}
 名字：
{{item.name}}
 年龄：
{{item.age}}
-
</view>
-
</view>
-
</template>
-
<script>
-
export
default{
-
data(
){
-
return{
-
msg:
"hello world",
-
imgUrl:
"https://www.jd.com/favicon.ico",
-
arr:[
-
{
-
name:
"lili",
-
age:
18
-
},
-
{
-
name:
"lan",
-
age:
19
-
}
-
]
-
}
-
}
-
}
-
</script>
uni-app中的事件
-
<template>
-
<view>
-
<view>uni-app中的事件
</view>
-
<!-- 点击事件 -->
-
<button type="button" v-on:click="clickHandle('参数信息',$event)">点击
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
clickHandle(
num,e){
-
console.
log(
"传递的参数为："+num+
"\n事件对象为：",e)
-
}
-
}
-
}
-
</script>
生命周期函数
应用的生命周期
生命周期含义：一个对象从创建、运行、销毁的整个过程被称为生命周期
生命周期函数：生命周期中的每个阶段都会伴随着一个函数的触发，这些函数被称为生命周期函数
注意：应用的生命周期函数应该定义在App.vue内
-
<script>
-
export
default {
-
onLaunch:
function(
) {
-
console.
log(
'项目启动了')
-
},
-
onShow:
function(
) {
-
console.
log(
'程序进入前台页面')
-
},
-
onHide:
function(
) {
-
console.
log(
'程序即将进入后台')
-
},
-
onError:
function(
err){
-
console.
log(
"出现异常了",err)
-
}
-
}
-
</script>
页面的生命周期函数
onPullDownRefresh：监听页面下拉刷新状态
onReachBottom：监听页面触底的事件（前提页面高度，高于屏幕高度-可滚动）
注意：
- 页面的生命周期函数一般都定义在每个页面组件内
- onLoad函数和onReady函数仅会触发一次
- 关闭下拉刷新用uni.stopPullDownRefresh()方法，触发下拉刷新用uni.startPullDownRefresh()函数
- 页面触底的事件中触底距离可以在通过pages.json文件内设置onReachBottomDistance属性来设置，默认为50
-
<script>
-
export
default{
-
onLoad(
options){
-
console.
log(
"页面加载了，上一个页面传过来的参数为：",options)
-
},
-
onShow(
){
-
console.
log(
"页面出现了")
-
},
-
onReady(
){
-
console.
log(
"页面初次渲染完成")
-
},
-
onHide(
){
-
console.
log(
"页面隐藏了")
-
},
-
onUnload(
){
-
console.
log(
"页面卸载了")
-
},
-
onPullDownRefresh(
){
-
console.
log(
"触发了下拉刷新")
-
/* 关闭下拉刷新 */
-
uni.
stopPullDownRefresh();
-
}，
-
onReachBottom(
){
-
console.
log(
"页面触底了")
-
}
-
}
-
</script>
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)=>{
-
//拼接并解析请求的url
-
const 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请求
-
<template>
-
<view>
-
<button @click="get()">发送get请求
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
get(
){
-
//发送get请求
-
uni.
request({
-
url:
"http://localhost:3000/?name=lili",
-
method:
"get",
-
success(
res){
-
//打印接收到的返回值
-
console.
log(
"请求的返回值为："+res.
data)
-
}
-
})
-
}
-
}
-
}
-
</script>
注意：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请求
-
<template>
-
<view>
-
<button @click="post()">发送post请求
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
post(
){
-
//发送post请求
-
uni.
request({
-
url:
"http://localhost:3000",
-
method:
"post",
-
data:{
"name":
"lili",
"age":
23},
-
success(
res){
-
//打印接收到的返回值
-
console.
log(
"请求的返回值为："+res.
data)
-
},
-
fail(
err){
-
//打印失败信息
-
console.
log(
"您失败了：",err)
-
}
-
})
-
}
-
}
-
}
-
</script>
数据缓存
异步设置缓存
在本地储存中设置数据：uni.setStorage(Object)
在本地储存中获取数据：uni.getStorage(Object)
在本地储存中移除数据：uni.removeStorage(Object)
理解：将数据存储在本地缓存中指定的key中，会覆盖掉原来key的内容，但是以上的接口为异步接口
Object中参数说明
-
<template>
-
<view>
-
<button type="primary" @click="setStorage()">存储数据
</button>
-
<button type="primary" @click="getStorage('id')">获取数据
</button>
-
<button type="primary" @click="removeStorage('id')">移除数据
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
setStorage(
){
-
//向本地存数据
-
uni.
setStorage({
-
key:
"id",
-
data:
80,
-
success(
){
-
console.
log(
"存储成功！")
-
}
-
})
-
},
-
getStorage(
data){
-
//从本地获取数据
-
uni.
getStorage({
-
key:data,
-
success(
res){
-
console.
log(
"获取到的数据为："+res.
data)
-
}
-
})
-
},
-
removeStorage(
data){
-
//从本地移除数据
-
uni.
removeStorage({
-
key:data,
-
success(
res){
-
console.
log(
"移除数据成功！",res)
-
}
-
})
-
}
-
}
-
}
-
</script>
同步设置缓存
同步设置缓存：uni.setStorageSync(key,data)
同步获取缓存：uni.getStorageSync(key)
同步移除缓存：uni.removeStorageSync(key)
参数说明
-
<template>
-
<view>
-
<button type="primary" @click="setStorageSync('id',23)">同步存储数据
</button>
-
<button type="primary" @click="getStorageSync('id')">同步获取数据
</button>
-
<button type="primary" @click="removeStorageSync('id')">同步移除数据
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
setStorageSync(
key,data){
-
uni.
setStorageSync(key,data);
-
},
-
getStorageSync(
key){
-
const res=uni.
getStorageSync(key)
-
console.
log(
"获取到的数据为："+res)
-
},
-
removeStorageSync(
key){
-
uni.
removeStorageSync(key)
-
}
-
}
-
}
-
</script>
图片的上传和预览
从本地相册选择图片或使用相机拍照
方法：uni.chooseImage(Object)
Object参数说明
预览图片
方法：uni.previewImage(Object)
Object参数说明
注意：上面的current代表的是当前的图片的路径
-
<template>
-
<view>
-
<button type="primary" @click="chooseImg()">上传图片
</button>
-
<!-- 预览图片 -->
-
<image v-for="item in imgArr" :src="item" @click="previewImg(item)">
</image>
-
</view>
-
</template>
-
<script>
-
export
default{
-
data(
) {
-
return{
-
imgArr:[]
-
}
-
},
-
methods:{
-
chooseImg(
){
-
uni.
chooseImage({
-
count:
5,
-
success:
res=>{
-
this.
imgArr=res.
tempFilePaths
-
}
-
})
-
},
-
previewImg(
data){
-
uni.
previewImage({
-
current:data,
-
urls:
this.
imgArr,
-
loop:
true,
-
indicator:
"number"
-
})
-
}
-
}
-
}
-
</script>
条件编译跨端兼容
跨平台兼容
含义：uni-app已经将常用的组件，js API封装到框架中，开发者按照uni-app规范开发即刻保证多平台兼容，大部分业务均可直接满足，但是每个平台都有自己的一些特性，因此会存在着一些无法跨平台的情况
条件编译
含义：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台
语法：#ifdef 平台标识 …… #endif
平台标识
-
<template>
-
<view>
-
<!-- #ifdef H5 -->
-
<view>我希望在H5页面中看见
</view>
-
<!-- #endif -->
-
<!-- #ifdef MP-WEIXIN -->
-
<view>我希望在微信小程序页面中看见
</view>
-
<!-- #endif -->
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
onLoad(
){
-
//#ifdef H5
-
console.
log(
"我希望在H5内中打印")
-
//#endif
-
//#ifdef MP-WEIXIN
-
console.
log(
"我希望在微信小程序内中打印")
-
//#endif
-
}
-
}
-
}
-
</script>
-
<style>
-
/* H5中的样式 */
-
/* #ifdef H5 */
-
view{
-
color: red;
-
}
-
/* #endif */
-
/* 微信小程序的样式 */
-
/* #ifdef MP-WEIXIN */
-
view{
-
color: blue;
-
}
-
/* #endif */
-
</style>
注意：条件编译要写在注释里面
uniapp中的导航跳转
声明式跳转
组件：navigator
属性值
open-type的有效值
编程式导航
保留当前页面，跳转到应用内的某个页面
语法：uni.navigateTo(object)
object参数说明
跳转到tabBar页面，并关闭其他所有的非tabBar页面
语法：uni.switchTab(object)
object参数说明
关闭当前页面，跳转到应用内的某个页面
语法：uni.redirectTo(object)
object属性
-
<template>
-
<view>
-
<view>声明式导航的学习
</view>
-
<navigator url="/pages/detail/detail">跳转到详情页
</navigator>
-
<!-- 因为这里的信息页为tabBar页面 -->
-
<navigator url="/pages/message/message" open-type="switchTab">跳转到信息页
</navigator>
-
<view>编程式导航的学习
</view>
-
<button @click="goDetail()">跳转至详情页
</button>
-
<button @click="goMessage()">跳转至信息页
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
goDetail(
){
-
uni.
navigateTo({
-
url:
"/pages/detail/detail"
-
})
-
},
-
goMessage(
){
-
uni.
switchTab({
-
url:
"/pages/message/message"
-
})
-
}
-
}
-
}
-
</script>
注意：导航过程中也可以进行页面的传参，通过？和&拼接的形式，若取得上个页面传过来的参数则需要页面生命周期onLoad函数。
组件的创建和使用
前言：在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过import的方式导入，再通过components进行注册即可
-
<template>
-
<view>
-
<view>使用组件工具类
</view>
-
<!-- 使用组件 -->
-
<partName>
</partName>
-
</view>
-
</template>
-
<script>
-
//引入组件
-
import
Part
from
"../../components/test.vue"
-
//注册组件
-
export
default{
-
components:{
-
partName:
Part
-
}
-
}
-
</script>
组件的生命周期
组件之间的通讯方式
父组件向子组件传值
-
<template>
-
<view>
-
<view>我是父组件
</view>
-
<!-- 父组件向子组件传递title值 -->
-
<child :title="title">
</child>
-
</view>
-
</template>
-
<script>
-
import child
from
"../../components/child.vue"
-
export
default{
-
data(
){
-
return{
-
title:
"hello uniapp"
-
}
-
},
-
components:{
-
child:child
-
}
-
}
-
</script>
子组件从父组件接收值
-
<template>
-
<view>
-
<view>我是子组件
</view>
-
<view>title的值为
{{title}}
</view>
-
</view>
-
</template>
-
<script>
-
export
default{
-
//子组件接收父组件传递过来的title
-
props:[
'title']
-
}
-
</script>
子组件向父组件传值
-
<template>
-
<view>
-
<view>我是子组件
</view>
-
<button @click="sendNum()">给父组件传值
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
data(
){
-
return{
-
num:
6
-
}
-
},
-
methods:{
-
sendNum(
){
-
//第一个参数传自定义事件名称，第二个参数传请求参数
-
this.$emit(
'myEvent',
this.
num)
-
}
-
}
-
}
-
</script>
父组件从子组件接收值
-
<template>
-
<view>
-
<view>我是父组件
</view>
-
<child @myEvent="getNum">
</child>
-
</view>
-
</template>
-
<script>
-
import child
from
"../../components/child.vue"
-
export
default{
-
methods:{
-
//num用于接收触发了事件传过来的值
-
getNum(
num){
-
console.
log(
"子组件传过来的值为："+num)
-
}
-
},
-
components:{
-
child:child
-
}
-
}
-
</script>
兄弟组件之间的相互传参
兄弟组件
-
<template>
-
<view>
-
<view>我是兄弟组件1
</view>
-
<button @click="addNum()">修改组件2中的数据
</button>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
addNum(
){
-
//触发全局事件
-
uni.$emit(
"updateNum",
10)
-
}
-
}
-
}
-
</script>
-
<template>
-
<view>
-
<view>我是兄弟组件2
</view>
-
<view>组件2内num的值为
{{num}}
</view>
-
</view>
-
</template>
-
<script>
-
export
default{
-
data(
){
-
return{
-
num:
0
-
}
-
},
-
created(
) {
-
//监听全局事件
-
uni.$on(
"updateNum",
(num)=>{
-
this.
num+=num
-
})
-
}
-
}
-
</script>
父组件
-
<template>
-
<view>
-
<view>我是父组件
</view>
-
<part1>
</part1>
-
<part2>
</part2>
-
</view>
-
</template>
-
<script>
-
import part1
from
"../../components/student1.vue"
-
import part2
from
"../../components/student2.vue"
-
export
default{
-
components:{
-
part1,part2
-
}
-
}
-
</script>
uni-ui组件库的基本使用
含义：uni-ui是DCloud提供的一个跨端ui库，他是基于vue组件的，flex布局的，无dom的全端ui库
以日历组件的使用为例
首先使用HbuilderX导入插件
然后就直接使用
-
<template>
-
<view>
-
<view>uni-ui组件库
</view>
-
<uni-calendar
-
:insert=
"true"
-
:lunar=
"true"
-
:start-data=
"'2019-3-2'"
-
:end-data=
"'2019-5-20'"
-
@
change=
"change"
-
>
</uni-calendar>
-
</view>
-
</template>
-
<script>
-
export
default{
-
methods:{
-
change(
e){
-
console.
log(
"触发了change函数",e)
-
}
-
},
-
}
-
</script>
转载：https://blog.csdn.net/m0_60027772/article/details/127501517
查看评论