前端uni-app框架简介（⼆）
⼤可能性会⽤到的onLoad、onShow、 onReady、 onHide、 onPullDownRefresh、 onReachBottom、onTabltemTap、onShareAppMessage、 onPageScroll
函数名说明平台差异说明最低版本
onLoad 监听页⾯加载，其参数为上个页⾯传递的数据，参数类型为Object（⽤于页⾯传参），参考
onShow 监听页⾯显⽰。页⾯每次出现在屏幕上都触发，包括从下级页⾯点返回露出当前页⾯
onReady 监听页⾯初次渲染完成。注意如果渲染速度快，会在页⾯进⼊动画完成前触发
onHide监听页⾯隐藏
onUnload监听页⾯卸载
onResize监听窗⼝尺⼨变化App、⼩程序onPullDownRefresh监听⽤户下拉动作，⼀般⽤于下拉刷新，参考
onReachBottom 页⾯滚动到底部的事件（不是scroll-view滚到底），常⽤于下拉下⼀页数据。具体见下⽅注意事项
onTabItemTap点击 tab 时触发，参数为Object，具体见下⽅注意事项⼩程序、⽀付宝⼩程序、百度⼩程序、H5、App（⾃定义组件模式）
onShareAppMessage⽤户点击右上⾓分享⼩程序、百度⼩程序、字节跳动⼩程序、⽀付宝⼩程序
onPageScroll监听页⾯滚动，参数为Object nvue暂不⽀持注意点 —— onLaunch只能在App.vue⾥写
uni-app组件⽀持的⽣命周期，与vue标准组件的⽣命周期相同。
这⾥没有页⾯级的onLoad等⽣命周期。
路由
注意点：初学可能会遇到的问题，新建⼀个页⾯， 访问不到，因为没有配对pages.json⽂件， 需要⽤到的页⾯⼀定要在pages.json⾥配，第⼀个配置项就是启动页。pages.json能加tabbar，如果不需要他的tabbar，就需要⾃⼰⾃定义⼀个tabbar组件。
pages.json所有配置选项：
pages为路由
condition为启动模式配置仅开发期间⽣效，⽤于模拟直达页⾯的场景，如：⼩程序转发后，⽤户点击所打开的页⾯；
globalStyle⽤于设置应⽤的状态栏、导航条、标题、窗⼝背景⾊等
tabBar： tabBar 配置项指定 tab 栏的表现
easycom传统vue组件，需要安装、引⽤、注册，三个步骤后才能使⽤组件。easycom将其精简为⼀步。
只要组件安装在项⽬的components⽬录下，并符合components/组件名称/组件名称.vue⽬录结构。就可以不⽤引⽤、注册，直接在页⾯中使⽤
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接⼝"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间⽣效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页⾯，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演⽰",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅⼩程序，webrtc ⽆法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP//QQ⼩程序)，⽀持 auto / portrait / landscape
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/component/index",
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接⼝"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "⽂字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否⾃动扫描组件
"custom": {//⾃定义扫描规则
"uni-(.*)": "@/components/uni-$1.vue"
}
}
}
路由跳转
保留当前页⾯，跳转到应⽤内的某个页⾯，使⽤uni.navigateBack可以返回到原页⾯。
//在起始页⾯跳转到test.vue页⾯并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页⾯接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页⾯传递的参数
console.log(option.id); //打印出上个页⾯传递的参数。
console.log(option.name); //打印出上个页⾯传递的参数。
}
}
selectediconpath什么意思关闭当前页⾯，跳转到应⽤内的某个页⾯。
url: 'test?id=1'
});
关闭所有页⾯，打开到应⽤内的某个页⾯。
url: 'test?id=1'
});
export default {
onLoad: function (option) {
console.log(option.id);
}
}
跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯。pages.json：
{
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "⾸页"
},{
"pagePath": "pages/other/other",
"text": "其他"
}]
}
}
other.vue
uni.switchTab({
url: '/pages/index/index'
});
关闭当前页⾯，返回上⼀页⾯或多级页⾯。可通过 getCurrentPages() 获取当前的页⾯栈，决定需要返回⼏层。
// 注意：调⽤ navigateTo 跳转时，调⽤该⽅法的页⾯会被加⼊堆栈，⽽ redirectTo ⽅法则不会。见下⽅⽰例代码
// 此处是A页⾯
uni.navigateTo({
url: 'B?id=1'
});
// 此处是B页⾯
uni.navigateTo({
url: 'C?id=1'
});
// 在C页⾯内 navigateBack，将返回A页⾯
uni.navigateBack({
delta: 2
});
运⾏环境判断：
这个和vue差不多的， 可以⽤来区分环境，你本地运⾏会⽤开发环境，打包会⾃动⽤⽣产环境
页⾯样式与布局
uni-app内有个⾃⼰提供的动态单位upx，宽度定死750个upx，这样就可以⽤类似百分⽐的⽅式设置宽⾼了; vh是视窗⾼度百分⽐动态修改upx需要使⽤uni.upx2px函数，否则⽆法⽣效
Flex布局是真的好⽤，学会了这个感觉⾄少静态布局上都没什么难度了，uni-app也推荐使⽤这种布局
⽀持npm安装第三⽅包
⼩程序组件⽀持——有⼀定规范，需要⾃定义写对应组件的要看看这个
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论