manifest 文件

manifest.json 文件中包含了应用描述、接口声明、页面路由信息

manifest

config

用于定义系统配置和全局数据。

config.network

config.grayMode 1100+

config.grayMode.duration 1100+

示例代码：

"grayMode": {
    "enable": true,
    "duration": {
        "regular": ["12/13", "09/18"],
        "temporary": ["2020/04/04", "2018/05/12"]
    },
    "excludedPages": ["/WelcomePage"]
}

router

用于定义页面的组成和相关配置信息，如果页面没有配置路由信息，则在编译打包时跳过。

示例代码：

"router": {
  "entry": "Demo",
  "errorPage": "ErrorPage",
  "pages": {
    "Demo": {
      "component": "index"
    },
    "ErrorPage": {
      "component": "index"
     },
  }
}

router.pages

用于定义单个页面路由信息。

router.pages.filter

匹配页面某种请求，如请求 uri 和 filter 中 uri 匹配成功，则在匹配页面打开。

filter 匹配原则是按照 manifest.json 中 router.pages 中页面顺序自上往下逐一匹配，uri 匹配成功即会在该页面中使用，故不建议多页面采用相同 uri 匹配规则，可能会导致页面跳转出错。

filter 的结构如下：

"filter": {
  "<action>": {
    "uri": "<pattern>"
  }
}

可以处理所有 http 和 https 请求的 filter 定义如下：

"filter": {
  "view": {
    "uri": "https?://.*"
  }
}

router.errorPage 1060+

当页面跳转异常时，快应用默认将会跳转到 sdk 的默认错误页，同时前端 app.ux 也会收到 onPageNotFound 回调

此参数可提供给开发者配置自定义错误页面

参数：自定义错误页面的参数，需要提供一个在 pages 项里已经配置好的 key 值

注意：开发者自定义错误页面的时候，推荐在 script 标签加入以下这段代码。按照这样设置，当用户 deeplink 跳转进快应用报错时，点击返回键，可以跳到当前快应用的首页，继续浏览快应用的页面。

import router from '@system.router'
export default {
  onBackPress() {
    // 由deep-link等方式进来，异常发生时，一进来首页就是Error Page
    // 则此时返回需要手动修改，使其跳转到首页
    if (router.getLength() === 1) {
      router.replace({
        // 返回首页
        path: '/'
      })
      return true
    }
  }
}

display

用于定义与 UI 显示相关的配置。

如果在 display 对象下定义以下属性值，则生效范围为此快应用全部页面；

如果在 display.pages 对象里的页面 key 值下定义以下属性值，则生效范围仅为此页面；并且，此处指定的页面 display 属性值，优先级高于上述的全局范围的属性值

subpackages 1040+

用于定义分包的相关配置。分包的详细使用方法参见分包加载。

示例代码：

除了以下示例代码，亦可参考官方示例的manifest.json文件入门

{
  "package": "com.company.unit",
  "name": "appName",
  "icon": "/Common/icon.png",
  "versionName": "1.0",
  "versionCode": 1,
  "minPlatformVersion": 1000,
  "features": [{ "name": "system.network" }],
  "permissions": [{ "origin": "*" }],
  "config": {
    "logLevel": "off",
    "background": {
      "features": [
        "system.audio",
        "system.record",
        "system.request",
        "system.geolocation"
      ]
    },
    "network": {
      "connectTimeout": 10000,
      "readTimeout": 10000,
      "writeTimeout": 10000
    }
  },
  "router": {
    "entry": "Hello",
    "pages": {
      "Hello": {
        "component": "hello",
        "path": "/",
        "filter": {
          "view": {
            "uri": "https?://.*"
          }
        }
      },
      "PackageA/Page1": {
        "component": "page1"
      },
      "PackageA/Page2": {
        "component": "page2"
      }
    }
  },
  "display": {
    "backgroundColor": "#ffffff",
    "fullScreen": false,
    "fitWideScreenMode":"original",
    "titleBar": true,
    "titleBarBackgroundColor": "#000000",
    "titleBarTextColor": "#fffff",
    "statusBarImmersive": false,
    "statusBarTextStyle": "auto",
    "statusBarBackgroundColor": "#000000",
    "themeMode": -1,
    "pages": {
      "Hello": {
        "backgroundColor": "#eeeeee",
        "fullScreen": true,
        "titleBarBackgroundColor": "#0000ff",
        "titleBarText": "Hello",
        "forceDark": false,
        "orientation": "landscape",
        "pageCache": true,
        "cacheDuration": 2400000
      }
    }
  },
  "subpackages": [
    {
      "name": "pkgA",
      "resource": "PackageA"
    }
  ],
  "trustedSslDomains": ["www.quickapp.cn", "m.quickapp.cn"]
}

menuBarData 1070+

用于定义 menuBar 的相关配置。

注意：对于使用 shareParams 或者页面参数的情况下，页面参数的接收必须在相应页面对字串内容中的 key 值 {"key": value}显式声明 public 才可以接收到，参见 https://doc.quickapp.cn/framework/seo.html?h=%E9%A1%B5%E9%9D%A2%E5%8F%82%E6%95%B0

示例：

*页面中需要声明参数变量名称，注意参数名称需要和 shareParams 中的 key-value 的 key 值名称对应，对于 usePageParams 或者 shareCurrentPage 为 true 情况，也要对应页面参数声明对应的 key 值接收参数*

public: {

    key: null

  },

如果快应用当前页面和打开的分享页面不同，在打开快应用时候，跳转到分享页时，分享参数可以在 onInit 中接收到

onInit() {

console.log('onInit share param page :  ' + JSON.stringify(this.key))

}

如果快应用当前页面和打开的分享页面相同，在打开快应用时候，跳转到分享页时，分享参数可以在 onRefresh 接收到

onRefresh(data){

console.log('onRefresh share param page :  ' + JSON.stringify(data.key))

}

menuBar 快速适配教程

现在，快应用联盟大力推广开发者使用 menuBar。使用 menuBar，开发者无需再重复实现分享，添加到桌面，关于页等功能，减少工作量。

开发者可以按照以下步骤，检查并优化代码，实现快应用项目对 menuBar 的适配：

1. 在manifest.json下display属性下，去掉所有的menu配置项

2. 在manifest.json下display属性下，若开发者不手动添加menubarData项，则全部快应用页面显示 menubar，可保持不变

3. 若有需要手动关闭 menubar 的页面，在 display 的 pages 子项，对应页面 key 值下设置 menuBarData 的 menubar 参数为 false

4. 删除所有页面的 onMenuPress 生命周期的代码。

5. 检查页面布局，为 menuBar 留出空间放置。

menuBar 示例：

注意：实际代码中 json 文件不能包含注释行，此处注释仅为说明用

{
  "display": {
    "menuBarData": {
      // 全局配置
      "menuBar":true,
      "menuBarStyle":"dark",
      "shareTitle":"分享标题",
      "shareDescription":"分享描述",
      "shareIcon":"分享url"
    },
    "pages": {
      "Hello": {
        // 页面配置，默认使用页面menuBarData配置，页面无配置使用全局menuBarData配置
        "menuBarData": {
          "menuBar" true,
          "menuBarStyle":"dark",
          "shareTitle":"子页面分享标题",
          "shareDescription":"分页面享描述",
          "shareIcon":"页面分享url",
          "shareCurrentPage":true,
          "shareUrl":"https://www.quickapp.cn/",
          "shareParams":"{key:1,id:2})"
         }
      }
    }
}

menuBar 支持明细 1070+

如果以下没有特别备注，则 menuBar 在此厂商手机 1070+的 sdk 上会默认显示。同时，开发者可通过配置menuBarData.menuBar决定是否显示。

pageAnimation 1100+

用于配置页面切换动画。除了下面示例中的两种动画配置方法之外，在 router.push 时可以通过 ___PARAM_PAGE_ANIMATION___ 配置页面切换动画。配置生效优先级 ___PARAM_PAGE_ANIMATION___ > display.pages.pageAnimation > display.pageAnimation,注意高优先级 pageAnimation 配置会覆盖低优先级 pageAnimation 配置。

slide 模式在各动作下的动画变化详情如下：

示例：

{
  "display": {
      "entry": "Form",
      "pageAnimation": {
          "openEnter":"none",
          "closeEnter":"none",
          "openExit":"none",
          "closeExit":"none"
      },
      "pages": {
          "Demo": {
            "component": "index",
            "pageAnimation": {    //页面配置了 pageAnimation，display 中的配置不再生效
                "openEnter":"none",
                "closeEnter":"none",
                "openExit":"none"
                //"closeExit":"none" 缺省配置，默认 slide
            }
          }
      }
  }
}

tabBar 1200+

• 注：oppo侧暂不支持manifest.json中配置tabBar

用于定义 tabBar 的相关配置。 tabBar 组件适用于首页显示场景，只在已经配置了 tabBar 页面路由路径的页面显示 tabBar 组件。

tabBar 示例：

注意：实际代码中 json 文件不能包含注释行，此处注释仅为说明用

{
  "display": {
    "tabBar": {
        "color": "#000000",          //文字颜色
        "selectedColor": "#008000",        //选中文字颜色
        "tabbarBackgroundColor": "#FFFFFF",    //组件背景
          "list": [{
            "pagePath": "/home",  //页面路由路径
            "pageParams":"{test: 'test1'}" ,  //页面参数
            "iconPath": "/Common/home.png", //图标
            "selectedIconPath": "/Common/home_active.png", //选中图标
            "text": "首页"    //文字内容
            },
            {
            "pagePath": "/mine",
            "pageParams":"{test: 'test2'}",
            "iconPath": "/Common/mine.png",
            "selectedIconPath": "/Common/mine_active.png",
            "text": "我的"
            }]
            }
}