uni-app介绍

470 阅读2分钟

框架介绍

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

页面文件遵循 Vue 单文件组件 (SFC) 规范 组件标签靠近小程序规范,详见uni-app 组件规范 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期 为兼容多端运行,建议使用flex布局进行开发

目录结构

    ┌─components            uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─hybrid                存放本地网页的目录,详见
    ├─platforms             存放各平台专用页面的目录,详见
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
    ├─wxcomponents          存放小程序组件的目录,详见
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
    └─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见

生命周期

  • 应用生命周期

  • 页面生命周期

onPageScroll 参数说明:

onTabItemTap 参数说明:

注意

  • onTabItemTap常用于点击当前tabitem,滚动或刷新当前页面。如果是点击不同的tabitem,一定会触发页面切换。
  • 如果想在App端实现点击某个tabitem不跳转页面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一个区块盖住原先的tabitem,并拦截点击事件。
  • onTabItemTap在App端,从HBuilderX 1.9 的自定义组件编译模式开始支持。

onNavigationBarButtonTap 参数说明:

onBackPress 回调参数对象的说明:

页面栈

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下: