FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# H5 应用

功能背景

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

# 1. 功能介绍

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

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

# 2. 操作说明

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

# 3. 项目配置

# fide.project.config.json

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

{
  "miniprogramRoot": "src", // 表示 H5 项目的入口目录
  "entryFile": "main.html", // 表示 H5 项目的入口文件
  "queryParams": "a=1&b=2" // 启动页面时的参数
}

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

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

# 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
  }
}
© FinClip with ❤ , Since 2017