目录
1 -> 概述
2 -> 文件组织
3 -> js标签配置
4 -> app.js
1 -> 概述
兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
1.1 -> 整体架构
使用兼容JS的类Web开发范式的方舟开发框架，包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
2 -> 文件组织
2.1 -> 目录结构
JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下：
目录结构：
多实例资源共享目录结构：
目录结构中文件分类如下：
各个文件夹的作用：
说明
2.2 -> 文件访问规则
应用资源可通过绝对路径或相对路径的方式进行访问，绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下：
说明
当代码文件A需要引用代码文件B时：
2.3 -> 媒体文件格式
表1 支持的图片格式
格式 支持的文件类型
BMP .bmp
GIF .gif
JPEG .jpg
PNG .png
WebP .webp
表2 支持的视频格式
格式 支持的文件类型
H.264 AVC
Baseline Profile(BP)
.3gp
.mp4
3 -> js标签配置
js标签中包含了实例名称、页面路由和窗口样式信息。
标签 类型 默认值 必填 描述
name string default 是 标识JS实例的名字。
pages Array - 是 路由信息。
window Object - 否 窗口信息。
说明
name、pages和window等标签配置需在配置文件(config.json)中的“js”标签中完成设置。
3.1 -> pages
定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：
{
...
"pages": [
"pages/index/index",
"pages/detail/detail"
]
...
}
说明
3.2 -> window
window用于定义与显示窗口相关的配置。对于屏幕适配问题，有2种配置方法：
说明
属性 类型 必填 缺省值 描述
designWidth number 否 720 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。
autoDesignWidth boolean 否 false 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。
示例如下：
{
...
"window": {
"designWidth": 720,
"autoDesignWidth": false
}
...
}
3.3 -> 示例
{
"app": {
"bundleName": "com.example.player",
"version": {
"code": 1,
"name": "1.0"
},
"vendor": "example"
}
"module": {
...
"js": [
{
"name": "default",
"pages": [
"pages/index/index",
"pages/detail/detail"
],
"window": {
"designWidth": 720,
"autoDesignWidth": false
}
}
],
"abilities": [
{
...
}
]
}
}
4 -> app.js
4.1 -> 应用生命周期
每个应用可以在app.js自定义应用级生命周期的实现逻辑，以下示例仅在生命周期函数中打印对应日志：
// app.js
export default {
onCreate() {
console.info('Application onCreate');
},
onDestroy() {
console.info('Application onDestroy');
},
AI 代码解读
}
4.2 -> 应用对象6+
属性 类型 描述
getApp Function 提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。
示例如下：
// app.js
export default {
data: {
test: "by getAPP"
},
onCreate() {
console.info('AceApplication onCreate');
},
onDestroy() {
console.info('AceApplication onDestroy');
},
};
// test.js 自定义逻辑代码
export var appData = getApp().data;
感谢各位大佬支持！！！
互三啦！！！
