uni-app 是一款基于 vue 的支持多端开发的一套开源的架构
创建 && 运行发布
除了运用 HBuilderX 之外,还可以使用 vue-cli 进行创建项目,但是 vue-cli 必须是 3.x 的版本
npm instiall -g @vue/cli // 安装 vue-cli 最新的版本
vue creat -p dcloudio/uni-preset-vue my-project
npm run dev:mp-weixin // dev 环境运行项目
npm run build:mp-weixin // 打包项目
生命周期
应用生命周期
onLaunch:当 uni-app 初始化完成时触发(全局只触发一次);
onShow:当 uni-app 启动,或者从后天进入前台显示;
onHide:当 uni-app 从前台进入后台;
onUniNViewMessage:对 nuve 页面发送的数据进行监听;
页面生命周期
onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为 Object;
onShow:监听页面显示;页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面;
onReady:监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发;
onHide:监听页面隐藏;
onUnload:监听页面卸载;
onResize:监听窗口尺寸变化;
onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新;
onReachBottom:页面上拉触底事件的处理函数;
onTabltemTap:点击 tab 时触发,参数为 Object;
onTabItemTap 常用于点击当前 tabItem,滚动或者刷新当前页面;如果是点击不同的 tabitem,一定会触发页面切换;
如果想要在 App 端实现点击某个 tabItem 不跳转页面,不能使用 onTabItemTap,可以使用 plus.nativeObj.view 放一个区块盖住原先的 tabItem,并拦截点击事件;
参数说明:index:string 类型,被点击 tableItem 的序号,从 0 开始;
pagePath:string 类型,被点击 tableItem 的页面路径;
text:string 类型,被点击 tableItem 的按钮文字;
onShareAppMessage:用户点击右上角分享;
onPageScroll:监听页面滚动,参数为 Object;
参数说明:scrollTop:number类型,页面在垂直方向已滚动的距离(单位px);
onNavigationBarButtonTap:监听原生标题栏按钮事件,参数为 Object;
参数说明:index:string 类型,原生标题栏按钮数组的下标;
onBackPress:监听页面返回,返回 event = { from: backButton、navigateBack},backButton 表示来源是左上角返回按钮或者 android 返回键;navigateBack 表示来源是 uni.navigateBack;
参数说明:from:string 类型,触发返回行为的来源:“backButton” -- 左上角导航栏按钮以及安卓返回键;“navigateBack” -- uni.navigateBack() 方法;
onNavigationBarSearchInputChanged:监听原生标题栏搜索输入框输入内容变化事件;
onNavigationBarSearchInputConfirmed:监听原生标题输入框搜索事件,用户点击软键盘上的 “搜索” 按钮时触发;
onNavigationBarSearchInputClicked:监听原生标题栏搜索输入框点击事件;