前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >快应用开发教程【02】--项目配置教程

快应用开发教程【02】--项目配置教程

作者头像
先知先觉
发布2019-01-21 15:37:32
5440
发布2019-01-21 15:37:32
举报

预览

我们先来预览一下Demo中的manifest.json文件

代码语言:javascript
复制
{
  "package": "com.libin.helloworld",
  "name": "HelloWorld",
  "versionName": "1.0.0",
  "versionCode": "1",
  "minPlatformVersion": "1000",
  "icon": "/Common/logo.png",
  "features": [
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "off"
  },
  "router": {
    "entry": "Demo",
    "pages": {
      "Demo": {
        "component": "index"
      },
      "DemoDetail": {
        "component": "index"
      },
      "About": {
        "component": "index"
      }
    }
  },
  "display": {
    "titleBarBackgroundColor": "#f2f2f2",
    "titleBarTextColor": "#414141",
    "menu": true,
    "pages": {
      "Demo": {
        "titleBarText": "示例页",
        "menu": false
      },
      "DemoDetail": {
        "titleBarText": "详情页"
      },
      "About": {
        "menu": false
      }
    }
  }
}

这里我们分三块来讲解:

一、配置应用基本信息 二、配置页面路由 三、配置页面UI显示 四、配置日志等级

一、配置应用基本信息

每个应用都要有专属的名称,图标等,这些信息都需要在manifest.json文件中配置;详细信息请参考文档:manifest文件

1.应用包名(package)

应用包名,是区别于其他应用的唯一标识

推荐采用com.company.module的格式,示例如下:

代码语言:javascript
复制
{
  "package": "com.libin.helloworld"
}
2.应用名称(name)

应用名称,6个汉字以内,与应用商店保存的名称一致;框架提供保存到桌面的功能,桌面上显示的应用名即为此属性

示例如下:

代码语言:javascript
复制
{
  "name": "HelloWorld"
}
3.应用图标(icon)

规则为正方形(不能是圆角),且务必无白边

代码语言:javascript
复制
{
  "icon": "/Common/logo.png"
}

注意:

请使用绝对路径,其中/对应于路径/src/

4.应用版本名称、版本号(versionName、versionCode)

应用版本名称、版本号为开发者的应用包维护的版本信息

应用版本名称为主版本.次版本格式

应用版本号为整数,从1开始,每次更新上架请自增1

示例如下:

代码语言:javascript
复制
{
  "versionName": "1.0.0",
  "versionCode": 1
}
5.支持的最小平台版本号(minPlatformVersion)

支持的最小平台版本号为必填项,默认值为1000,标识开发者的rpk包兼容支持的最小运行平台版本

当使用了1000以上的平台版本新增特性时,就必须确保minPlatformVersion最低为该平台版本号,避免上线后在更低版本平台上运行出错

示例如下:

代码语言:javascript
复制
{
  "minPlatformVersion": "1000"
}
6.配置接口列表(features)

在使用接口时,需要先在manifest中声明接口。在每个接口文档的顶部,都附有声明接口的配置代码

以fetch网络请求为例,示例如下: 相当于java中的导包

代码语言:javascript
复制
{
  "features": [
    { "name": "system.fetch" }
  ]
}

好了改完之后我们npm run build然后npm run server,这里本人选择扫码安装,我们看下更改后的效果。

二、配置页面路由

路由,用于定义页面的实际地址、跳转地址。如果ux页面没有配置路由,则不参与项目编译。一个目录下最多只能存在一个主页面文件(不包括组件文件)

1、首页名称(router.entry)

首页,即应用平台启动时默认打开的页面。首页需配置为应用中某页面的名称,即在/src目录下,页面目录的相对路径

示例如下:

假设工程根目录如下所示

代码语言:javascript
复制
└── src
    └── Demo                  页面目录,存放各自页面私有的资源文件和组件文件
        └── index.ux          页面文件,文件名不必与父文件夹相同(推荐index.ux)
假设首页为Demo目录下的index.ux文件,则首页对应的页面名称为Demo

默认工程里面:

代码语言:javascript
复制
{
  "router": {
    "entry": "Demo"
  }
}

效果如图:

这里写图片描述
这里写图片描述

我们在这里改为

代码语言:javascript
复制
"router": {
    "entry": "About"
    }
}

效果如图:

这里写图片描述
这里写图片描述
2、页面路由对象(router.pages)

页面路由对象,key为页面名称(/src目录下,页面目录的相对路径),value为页面具体路由配置,key不要重复

页面具体路由配置(router.pages的value)包括以下属性:

component:页面对应的ux文件名 path:页面路径,不填则默认为页面名称(/src目录下,页面目录的相对路径) 示例如下:

假设工程根目录如下所示

代码语言:javascript
复制
└── src
    |── Demo                  页面目录,存放各自页面私有的资源文件和组件文件
    |   └── index.ux         页面文件,文件名不必与父文件夹相同(推荐index.ux)
    └── Doc
        └── Layout            页面目录,存放各自页面私有的资源文件和组件文件
            └── index.ux     页面文件,文件名不必与父文件夹相同(推荐index.ux)
当页面名称(router.pages的key)为Demo时,对应的页面配置(router.pages的value)包括:

component:页面对应的ux文件名index path:页面路径,默认为页面名称Demo

代码语言:javascript
复制
  "router": {
    "entry": "Demo",
    "pages": {
      "Demo": {
        "component": "index"
      },
      "DemoDetail": {
        "component": "index"
      },
      "About": {
        "component": "index"
      }
    }
  }
这里写图片描述
这里写图片描述

现在,开发者就可以通过/Demo访问到Demo目录下的index.ux页面了

三、配置页面UI显示

UI显示,用于定义与UI显示相关的配置。支持定义:页面公用的默认UI显示、页面私有的UI显示

页面公用的默认UI显示 页面公用的默认UI显示,即被所有页面共享

以标题栏文字的配置为例:

代码语言:javascript
复制
{
  "display": {
    "titleBarText": "页面公用的默认标题"
  }
}

未配置私有标题的页面,标题栏文字均将显示为页面公用的默认标题

页面私有的UI显示 页面私有的UI显示,在display.pages对象下配置:key为页面名称(与路由中的页面名称保持一致),value为页面私有的UI显示

以标题栏文字的配置为例:

代码语言:javascript
复制
{
  "display": {
    "pages": {
      "Demo": {
        "titleBarText": "Demo页面的标题"
      }
    }
  }
}

四、配置日志等级

1、修改日志等级

新建工程默认为off

代码语言:javascript
复制
  "config": {
    "logLevel": "off"
  },

开发过程中我们需要将logLevel修改为最低级别debug,即:允许所有级别的日志输出

代码语言:javascript
复制
{
 "config": {
    "logLevel": "debug"
  }
}
2、在js中输出日志

当js代码未按需求正确运行,输出日志能帮助开发者快速定位问题;与传统前端开发一致,使用console对象输出日志,如下:

代码语言:javascript
复制
console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
3、查看日志

可以使用Android Studio的Android Monitor输出来查看日志。

撒花�� 结束啦!!! manifest.json配置清单文件就这些东西啦 。敬请期待后续文章~~~

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年03月27日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 预览
  • 一、配置应用基本信息
    • 1.应用包名(package)
      • 2.应用名称(name)
      • 3.应用图标(icon)
      • 4.应用版本名称、版本号(versionName、versionCode)
      • 5.支持的最小平台版本号(minPlatformVersion)
      • 6.配置接口列表(features)
      • 1、首页名称(router.entry)
      • 2、页面路由对象(router.pages)
      • 1、修改日志等级
      • 2、在js中输出日志
      • 3、查看日志
  • 二、配置页面路由
  • 三、配置页面UI显示
  • 四、配置日志等级
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档