uniapp

介绍

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

特点

统一采用 Vue.js 语法
多端兼容

全局文件

pages.json

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

jsonc

{
  // 组件自动引入规则。2.5.5+。
  "easycom": {},
  // 设置应用的全局窗口表现
  "globalStyle": {
    "navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
    "navigationBarTitleText": "uniapp", // 导航栏标题文字内容
    "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色（同状态栏背景色）
    "navigationStyle": "default", // 导航栏样式，仅支持 default/custom。custom 即取消默认的原生导航栏
    "enablePullDownRefresh": true, // 是否开启下拉刷新。配合页面中的 onPullDownRefresh 生命周期使用
    "onReachBottomDistance": 50, // 页面上拉触底事件触发时距页面底部距离，单位只支持 px
    // ...
  },
  // 设置页面路径及窗口表现
  "pages": [
    {
      "path": "pages/index/index", // 页面路径
      // 用于设置每个页面的状态栏、导航条、标题、窗口背景色等
      // 页面中配置项会覆盖 globalStyle 中相同的配置项
      "style": {
        "navigationBarTitleText": "首页", // 导航栏标题文字内容
        // ...
      },
    },
  ],
  // 设置底部 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 注意事项

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

pages.json 中引入的资源文件（例如，tabs 中的图片），应该存入 src/static 文件夹中。

manifest.json

manifest.json 文件是应用的配置文件（小程序的 appId 等），用于指定应用的名称、图标、权限等。

HBuilderX 创建的工程此文件在根目录。
CLI 创建的工程此文件在 src 目录。

uniapp ​

介绍 ​

特点 ​

全局文件 ​

pages.json ​

manifest.json ​

uniapp

介绍

特点

全局文件

pages.json

manifest.json