uni-app

介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

特点

• 统一语法（采用 Vue.js 语法）
• 多端兼容（H5、微信小程序、抖音小程序 ……）

目录结构

┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件（已废弃）
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放uni_module
├─platforms             存放各平台专用页面的目录
├─nativeplugins         App原生语言插件
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录
|  └─ios                iOS原生资源目录
├─hybrid                App端存放本地html文件的目录
├─wxcomponents          存放微信小程序、QQ小程序组件的目录
├─mycomponents          存放支付宝小程序组件的目录
├─swancomponents        存放百度小程序组件的目录
├─ttcomponents          存放抖音小程序、飞书小程序组件的目录
├─kscomponents          存放快手小程序组件的目录
├─jdcomponents          存放京东小程序组件的目录
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─AndroidManifest.xml   Android原生应用清单文件
├─Info.plist            iOS原生应用配置文件
└─uni.scss              内置的常用样式变量

pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。

easycom

组件自动引入规则。2.5.5+。

globalStyle

设置应用的全局窗口表现。

{
  "globalStyle": {
    "navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    "navigationBarTitleText": "uni-app", // 导航栏标题文字内容
    "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色（同状态栏背景色）
    "navigationStyle": "default", // 	导航栏样式，仅支持 default/custom。custom 即取消默认的原生导航栏
    "enablePullDownRefresh": true, // 是否开启下拉刷新。配合页面中的 onPullDownRefresh 生命周期使用
    "onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离，单位只支持 px
    // ...
  },
  // ...
}

pages

设置页面路径及窗口表现。

{
  "pages": [
    {
      "path": "pages/index/index", // 页面路径
      // 用于设置每个页面的状态栏、导航条、标题、窗口背景色等
      // 页面中配置项会覆盖 globalStyle 中相同的配置项
      "style": {
        "navigationBarTitleText": "首页", // 导航栏标题文字内容
        // ...
      },
    },
  ],
}

tabBar

设置底部 tab 的表现。

{
  "tabBar": {
    "color": "#7A7E83", // tab 上的文字默认颜色
    "selectedColor": "#007AFF", // tab 上的文字选中时的颜色
    "backgroundColor": "#F8F8F8", // tab 的背景色
    "borderStyle": "black", // tabbar 上边框的颜色，可选值 black/white
    // 中间按钮 仅在 list 项为偶数时有效（App 2.3.4+、H5 3.0.0+）
    "midButton": {
      "width": "80px", // 中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
      "height": "50px", // 中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
      "text": "发布", // 中间按钮的文字
      "iconPath": "static/tabbar/plus.png", // 中间按钮的图片路径
      "iconWidth": "24px", // 图片宽度（高度等比例缩放）
      "backgroundImage": "static/tabbar/mid-button-bg.png", // 中间按钮的背景图片路径
      // "iconfont": {}, // 字体图标，优先级高于 iconPath
    },
    "list": [
      {
        "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
        "text": "首页", // tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
        // icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
        "iconPath": "static/tabbar/home.png", // 图片路径
        // icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
        "selectedIconPath": "static/tabbar/home-selected.png", // 选中时的图片路径
      },
    ],
  },
}

注意事项

• tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序。
• tabbar 切换第一次加载时可能渲染不及时，可以在每个 tabbar 页面的 onLoad 生命周期里先弹出一个等待雪花（hello uni-app 使用了此方式）
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的 onShow，不会再触发 onLoad。
• 当设置 position 为 top 时，将不会显示 icon
• 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

mainfest.json

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。