H5 应用

功能背景

H5 应用是可以直接把业务中构建的 web 或游戏项目、以包的形式放到 FinClip SDK 内运行

1. 功能介绍

H5 应用类似于小程序应用，不需要经过转译或重新开发小程序，就可以把原有项目迁移过来运行。

H5 项目内部由基础库提供功能和 API 接口，功能上与小程序相对一致，包含了导航栏，胶囊按钮，以及禁用了路由事件的基础上，还提供了小程序中的部分 API，供开发者进行开发使用。

2. 操作说明

使用小程序管理，在新建小程序时选择类型为 “H5 应用”，即可在创建 “H5 应用” 类型的小程序后，通过 FinClip Studio 对其代码进行编写与调试。

注意：H5 应用使用的基础库会在打包时自动包含在项目内，需要使用部分新功能或新增 API 需要重新打包上传 H5 项目；在需要更新基础库使用新功能时，更新最新版本 Studio 即可

3. 项目配置

fide.project.config.json

创建 H5 项目会在项目根目录创建 fide.project.config.json 文件，除了项目内部用到的一些信息字段外，可以配置以下属性

{
  "miniprogramRoot": "src", // 表示 H5 项目的入口目录
  "entryFile": "main.html", // 表示 H5 项目的入口文件
  "queryParams": "a=1&b=2", // 启动页面时的参数
  "originUrl": "https://custom.com", // 加载域名, 默认是 https://finoffline.com
}

最后的入口文件是：项目目录${originUrl}/${miniprogramRoot}/${entryFile}?${queryParams}

都没有配置时，入口的文件为：项目目录/index.html?${queryParams}

注意：originUrl 目前仅在安卓及鸿蒙端生效

web.json

web.json 支持以下字段：

配置项

属性	类型	必填	描述
window	Object	否	全局的默认窗口表现

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值：1. default（默认样式）；2. custom（自定义导航栏，只保留右上角胶囊按钮）；3. hide（隐藏导航栏和右上角胶囊按钮）
navigationBarHideCloseButton	Boolean	false	隐藏胶囊关闭按钮
navigationBarHideMoreButton	Boolean	false	隐藏胶囊菜单按钮
fullscreen	Boolean	false	全屏显示

配置示例

{
  "window": {
    "navigationBarBackgroundColor": "#333",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "H5 应用",
    "navigationStyle": "custom",
    "navigationBarHideCloseButton": false,
    "navigationBarHideMoreButton": true,
    "fullscreen": false
  }
}