uni-app

---

一、globalStyle全局外观配置

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
设置全局样式

1设置单独页面样式

2设置h5或其他小程序样式

如：
uni查资料

3导航栏tabbar

启动模式

组件

txet属性（文本）

view （div）

button按钮组件的用法

image（图片）

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
Tips

• <image> 组件默认宽度 300px、高度 225px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

屏幕

导入css文件

字体图标

引入字体

报错问题
改路径

uni-app中的数据绑定（定义数据）

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

    export default {
      data () {
        return {
          msg: 'hello-uni'
        }
      }
    }

插值表达式的使用
利用插值表达式渲染基本数据

<view>{{msg}}</view>

在插值表达式中使用三元运算

<view>{{ flag ? '我是真的':'我是假的' }}</view>
**```
基本运算**

```javascript
<view>{{1+1}}</view>

v-bind动态绑定属性（图片渲染）

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {
  data () {
    return {
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    }
  }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

简写

<image :src="img"></image>

v-for的使用（循环遍历）

data中定以一个数组，最终将数组渲染到页面上

data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>

uni中的事件

事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {
  tapHandle () {
    console.log('真的点我了')
  }
}

事件传参

默认如果没有传递参数，事件函数第一个形参为事件对象

// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
  tapHandle (e) {
    console.log(e)
  }
}

如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
  tapHandle (num) {
    console.log(num)
  }
}

如果获取事件对象也想传递参数

// template
	<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
  tapHandle (num,e) {
    console.log(num,e)
  }
}

生命周期

uni-app生命周期

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

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

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发

定义在app.vue里

onerror:function(err)里的形参err就是错误信息

页面的生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。
onHide	监听页面隐藏
onUnload	监听页面卸载

页面默认写了个onload

下拉刷新

开启下拉刷新
在uni-app中有两种方式开启下拉刷新

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
• 通过调用uni.startPullDownRefresh方法来开启下拉刷新
  开启全局下拉,不推荐,推荐在需要的页面开启下拉
  

通过配置文件开启
通过API开启
api文档

uni.startPullDownRefresh()

监听下拉

如下拉更新数据
关闭下拉刷新
uni.stopPullDownRefresh()
给个延迟
事件下拉刷新


在uni.startPullDownRefresh() {
//配置对象
}

上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为
上拉加载可以加载下一页如更新数组

发送get请求（导入接口 ）

uni.request发生网络请求

<script>	
	export default{
		data() { //data定义数据
			return{
				message: []
			}
		},	
		methods: {
			sendGet(){
				uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
					success:res=> {
						console.log(res)
						this.message = res.data.message   //数据赋值给data数据
					}
				})
			},
			previewImg (current) {
				uni.previewImage({
					current,
					urls: this.message
				})
				console.log(current)
			}
		}
	}
</script>

数据缓存

官方文档

uni.setStorage（设置缓存）

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

代码演示

<template>
	<view>
		<button type="primary" @click="setStor">存储数据</button>
	</view>
</template>

<script>
	export default {
		methods: {
			setStor () {
				uni.setStorage({
				 	key: 'id',
				 	data: 100,
				 	success () {
				 		console.log('存储成功')
				 	}
				 })
			}
		}
	}
</script>

<style>
</style>

uni.getStorage获取数据

uni.removeStorageSync移除数据

从本地缓存中同步移除指定 key。

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorage({
					key: 'id',
					success: function () {
						console.log('删除成功')
					}
				})
			}
		}
	}
</script>

uni.setStorageSync（设置缓存同步接口）

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

代码演示

	export default {
		methods: {
			setStor () {
				uni.setStorageSync('id',100)
			}
		}
	}

uni.getStorageSync获取数据同步

从本地缓存中同步获取指定 key 对应的内容。

export default {
		methods: {
			getStorage () {
				const id = uni.getStorageSync('id')
				console.log(id)
			}
		}

uni.removeStorageSync同步移除数据

<template>
	<view>
		<button type="primary" @click="removeStorage">删除数据</button>
	</view>
</template>
<script>
	export default {
		methods: {
			removeStorage () {
				uni.removeStorageSync('id')
			}
		}
	}
</script>

上传图片、预览图片

上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

案例代码

	<template>
	<view>
		<button @click="chooseImg" type="primary">上传图片</button>
		<view>
			<image v-for="item in imgArr" :src="item" :key="index"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				imgArr: []
			}
		},
		methods: {
			chooseImg () {
				uni.chooseImage({
					count: 9,
					success: res=>{
						this.imgArr = res.tempFilePaths
					}
				})
			}
		}
	}
</script>

预览图片

<view>
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>

预览图片的方法

previewImg (current) {
  uni.previewImage({
    urls: this.imgArr,
    current
  })
} 	

代码

<template>
	<view class="">
		<button class="scbtn" @click="choosimg">上传图片</button>
		<image class="imgarr" v-for="item in imgarr" :src="item" @click ="previewImg(item)"></image>
		<view class="">
			<input type="text">
		</view>
	</view>
</template>

<script>
	export default{
		data () {
			return{
				imgarr: []
			}
		},
		methods: {
			choosimg () {
			    console.log('上传图片'),
				uni.chooseImage({
					count:6,
					success:res=>{
						this.imgarr = res.tempFilePaths
										}
				})
			},
			previewImg (current) {
			uni.previewImage({
				current,
				urls: this.imgarr
			})
			console.log(current)
		}
		}

	}
</script>

条件注释实现跨段兼容

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

**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。

平台标识

值	平台	参考文档
APP-PLUS	5+App	HTML5+ 规范
H5	H5
MP-WEIXIN	微信小程序	微信小程序
MP-ALIPAY	支付宝小程序	支付宝小程序
MP-BAIDU	百度小程序	百度小程序
MP-TOUTIAO	头条小程序	头条小程序
MP-QQ	QQ小程序	（目前仅cli版支持）
MP	微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

组件的条件注释

代码演示

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->

api的条件注释

代码演示

 onLoad () {  
 //#ifdef MP-WEIXIN  
 console.log('微信小程序')  
 //#endif  
 //#ifdef H5  
 console.log('h5页面')  
 //#endif}

样式的条件注释

代码演示

/* #ifdef H5 */
view{
  height: 100px;
  line-height: 100px;
  background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
  height: 100px;
  line-height: 100px;
  background: green;
}
/* #endif */

uni中的导航跳转

利用navigator进行跳转（web的a链接一样）

跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
  <button type="default">跳转到关于页面</button>
</navigator>

跳转到tabbar页面

<navigator url="/pages/message/message" open-type="switchTab">
  <button type="default">跳转到message页面</button>
</navigator>

利用编程式导航进行跳转

[导航跳转文档]( uni.navigateTo

---

利用navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

 goAbout () {  
 uni.navigateTo({    
 url: '/pages/about/about',  
 })
 }

---

通过switchTab跳转到tabbar页面
跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

---

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

<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
  uni.switchTab({
    url: '/pages/message/message'
  })
}

通过onUnload测试当前组件确实卸载

onUnload () {
  console.log('组件卸载了')
}

导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {
  uni.navigateTo({
    url: '/pages/about/about?id=80',
  });
}

接收参数的页面

<script>
	export default {
		onLoad (options) {
			console.log(options)
		}
	}	
</script>

uni-app中组件的创建

在项目了创建文件夹


创建login组件，在component中创建login目录，然后新建login.vue文件

<template>
	<view>
		这是一个自定义组件
	</view>
</template>

<script>
</script>

<style>
</style>

在其他组件中导入该组件并注册

import login from "@/components/test/test.vue"

---

注册组件

testa使用时的名，test组件名
建议直接写成test

components: {test}

---

使用组件

<test></test>

组件的生命周期函数

beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

beforeCreate 已经开始初始化时，数据没有初始化，包括页面没有开始渲染

---

beforeMount 在挂载开始之前被调用测试，只能在h5中测试小程序中没有getElementById

mounted 挂载到实例上去之后调用页面已经渲染

---

destroyed | Vue 实例销毁后调用

切换test组件

created 初始化数据

---

destroyed 应用
在 created设一个定时器，组件销毁后还在执行定时器

在data里定一个数据默认为空

created中让intid=定时器

在 destroyed中intid传过来定时器就销毁了

clearInterval()函数是在JavaScript中用于取消setInterval()函数设定的定时执行操作

组件的通讯

父组件给子组件传值

父--------------------

子----------------

子组件给父组件传值

通过$emit触发事件进行传递参数
子---------------
设一个点击事件

父------------
自定义事件注册getnum事件


可以保存一下数据
data定义num

兄弟组件传值

---

b注册全局事件

a


uni.$emit(eventName,OBJECT)

触发全局的自定义事件，附加参数都会传给监听器回调函数。

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

监听触发一次和移除查看

二次封装

新建文件夹下一个建js文件

通过export const一个方法myRequest


域名可能发生变化
在上面修改域名

用接口时传过一个地址

通过options接收

传请求方式------不传也行默认get方法


data和success一样

Promise有三种状态：pending（进行中），resolved（完成），rejected（失败）。

如果调用成功返回res

调用失败

方法导入
在mani.js

赋全局都能用
调用
获取数据