uniapp组成(生命周期)
应用注册 App
获取用户进入或者离开应用
onLaunch 初始化完成时触发（触发一次）
onShow 用户进入应用触发一次
onHide 用户引开触发
分页注册 pages
当分页初始化打开新页面时执行,执行一次
noe页面进行跳转到tow页面并且携带参数
tow获取路由参数
获取路由参数
onLoad(val) {
console.log(val)//{name: "Msea"}
}
onShow路由记录
分页进入触发
执行多次
onReady 分页初始化完成 执行,执行一次
onHide
分页离开执行,执行一次
onResize 监听小程序横屏
开启真机调试(写入appid)
关闭手机纵向锁定
配置 pages.json
"globalStyle": {
"pageOrientation":"auto"//表示允许横屏
}
onPullDownRefresh 下拉加载
支持微信小程序,H5
"globalStyle": {
"enablePullDownRefresh":true//开启下拉
}
调用Api
uni.startPullDownRefresh()//开启
uni.stopPullDownRefresh()//关闭下拉加载
onReachBottom上拉加载
需要设置上拉加载开关
"style": {
"onReachBottom":true,
"onReachBottomDistance":50//默认值是50
}
onPageScroll监听
pc支持
onPageScroll(value){
console.log(value)//scrollTop:10
}
onTabItemTap 切换tabBar 触发
onTabItemTap:function(e) {
console.log(e);
// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index.html"}
},
分享
onShareAppMessage(){
return{
title:"分享测试",
path:"pages/index/index",
imageUrl:"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg",
desc:"快来领福利",
success:(res)=>{
console.log(res)
}
}
}
组件注册
easycom,让组件注册更简单
创建 components文件夹 固定写法
创建组件 components/test/test.vue 名字必须一致
按照以上规则直接引用
支持 slot
组件生命周期
更Vue生命周期一致,mounted 渲染完毕,发送接口
路由跳转
路由跳转url写法
../one/one或者推荐/pages/index/index
tabBar跳转,不能使用navigateTo,用 uni.switchTab
因为 tabBar跳转,不是打开新页
navigateTo 保留老页面,每次打开新页面
