*使用Hbuilder X作为编辑器对uniapp vue的开发有很大的优化和开发帮助提供vue的高亮提示而且还有各个平台的模板参考插件库也是应有尽有

工程目录的结构

components 组件的目录
hybrid 存放本地网页的目录
platforms 存放各平台专用页面的目录
pages 业务页面文件存放的目录
static 存放静态资源的目录
wxcomponents 存放小程序组件的目录
common 公共资源
api 请求封装
store 状态管理
main.js vue初始化入口文件
app.vue 用来配置app 全局样式以及监听应用生命周期
manifest.json 配置应用名称 appid logo 等打包信息
pages.json 配置页面路由导航条选项卡等页面信息

uniapp 生命周期

应用的生命周期

onLaunch 当uni-app 初始化完成时触发
onShow 当uni-app 启动或从后台进入前台显示
onHide 当uni-app 从前台进入后台
onError 当uni-app 报错时触发
onUniNViewMessage 对nvue网页发送数据进行监听
onUnhandledRejection 对未处理的Promise 拒绝事件监听函数
onPageNotFound 页面不存在监听函数
onThemeChange 监听系统主题变化

页面生命周期

onLoad 监听页面加载其参数为上一个页面带过来的数据 obj类型
onShow 监听页面显示页面每次出现在屏幕上都会触发包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成 如果渲染速度快会导致页面进入动画完成前触发
onHide 页面监听隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作一般用于下拉刷新
onReachBottom 页面滚动底部的事件常用于下拉获取下一页的数据
onTabItemTap 点击tab时触发参数为obj
onShareAppMessage 用户点击右下角分享
onPageScroll 监听页面滚动参数为obj
onNavigationBarButtonTap 监听原生标题按钮点击事件参数为obj
onBackPress 监听页面返回
onNavigationBarSearchInputChanged 监听原生标题搜索输入框内容变化事件
onNavigationBarSearchInputConfitmed 监听原生标题栏搜索输入框事件用户点击搜索时触发
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件
onShareTimeline 监听用户点击右上角转发到朋友圈
onAddToFavorites 监听用户点击右上角收藏

uniapp 路由配置

项目中会有一个pages.json文件用于配置路由
当项目需要底部标签跳转时,需要在pages.json中配置tabBar来实现
可以使用navigator组件跳转

页面以栈的形式管理当前所有页面当路由切换时页面会如下

初始化打开第一个页面
打开新页面调用api uni.navigateTo 使用组件
重定向调用api uni.redirectTo
页面返回调用api uni.navigateBack
Tab切换调用api uni.switchTab
重加载调用api uni.reLaunch

getCurrentPages 可以获取当前页面信息

路由传参与接收

页面生命周期的onLoad 监听页面加载上个页面传递的数据 uni.navigateTo({url:'page2?name=xxx&message=xxx'})
onLoad:function(option){
option为obj类型会序列化上个页面传递的参数
log.option.name
log.option.message
}

小程序分包

与pages.json中的 pages同级 "subPages":[{}] 在项目根目录中创建一个subpages的目录

uniapp