uni-app框架

目录

什么是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属性

• 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>
		
		<image v-bind:src="imgUrl">image>
		
		<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对应的参数

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>