uni-app的使用

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

在我们熟练使用Vue后，我们可以根据uni-app的官方文档来快速上手uni-app，但也有和vue不同的地方。

1.pages.json的配置

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
	    "path" : "pages/message/message", //引入组件
		"style":{
			"navigationBarTitleText": "信息页"	,//导航栏标题文字内容
			"h5":{						//给h5单独设置，不影响微信小程序
				"pullToRefresh":{
					"color":"#007AFF"
				}
			}
		}
	},
		{
			"path": "pages/index/index"
		}
        ,{
            "path" : "pages/detail/detail"
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",				//导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarTitleText": "xmall商城",			//导航栏标题文字内容
		"navigationBarBackgroundColor": "#7FFF00",		//导航栏背景颜色（同状态栏背景色）
		"backgroundColor": "#7CCD7C",   				//下拉显示出来的窗口的背景色
		"enablePullDownRefresh":true  ,					//是否开启下拉刷新，详见页面生命周期。
		"backgroundTextStyle":"light"					//下拉 loading 的样式，仅支持 dark / light
	},
	"tabBar":{											//相当于导航标签
		"color":"#4CD964",								//未选中的导航文字颜色
		"selectedColor":"#007AFF",						//选中的导航文字颜色
		"backgroundColor":"#F0AD4E",					//tab 的背景色
		"borderStyle":"black",							//tabbar 上边框的颜色，可选值 black/white
		"position":"bottom",							//可选值 bottom、top    top 值仅微信小程序支持
		"list":[
			{											//tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
			"text":"首页",								//tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
			"pagePath":"pages/index/index",				//页面路径，必须在 pages 中先定义
			"selectedIconPath":"static/logo.png"		//选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
			},
			{											
			"text":"信息",		
			"pagePath":"pages/message/message",		
			"selectedIconPath":"./static/logo.png"		
			}
		]
	},
	"condition":{			//启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
		"current":0,		//当前激活的模式，list节点的索引值
		"list":[			//启动模式列表
			{
				"name":"详情页",			//启动模式名称
				"path":"pages/detail/detail",	//启动页面路径
				"query":"id=80"		//启动参数，可在页面的 onLoad 函数里获得
			}
		]
	}
}

 2.数据缓存

uni.setStorage()  存储数据     uni.getStorage()读取数据     uni.removeStorage()删除数据

uni.clearStorage()  清除缓存

<template>
	<view>
		<button @click="setStorage">存储数据</button>
		<button @click="getStorage">获取数据</button>
		<button @click="removeId">获取数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			setStorage(){
				// uni.setStorage({
				// 	key:'id',
				// 	data:80,
				// 	success(){
				// 		console.log('存储成功')
				// 	}
				// })
				uni.setStorageSync('id',100)
			},
			getStorage(){
				// uni.getStorage({
				// 	key:'id',
				// 	success(res){
				// 		console.log('获取成功',res.data)//  80
				// 	}
				// })
			const res =	uni.getStorageSync('id');
			console.log(res)
			},
			removeId(){
				// uni.removeStorage({
				// 	key:'id',
				// 	success(){
				// 		console.log('删除成功')//  80
				// 	}
				// })
				uni.removeStorageSync('id')
			}
		}
	}
</script>
	
<style>

</style>

3.生命周期

分为三种：应用生命周期、页面生命周期、组件生命周期

1.应用生命周期

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

 2.页面生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1+

3.组件生命周期

组件生命周期就是vue的生命周期