uni-app框架

前言：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}}&emsp;名字：{{item.name}}&emsp;年龄：{{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库

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

以日历组件的使用为例

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