创建应用

更新时间：

2024-03-20

下载文档

创建应用

本章主要介绍如何使用 EdgerOS 扩展插件快速创建出爱智应用以及工程文件详解。

前提条件

完成环境准备。

操作步骤

本文以创建 Simple 应用为例。

打开 VSCode，单击插件 EDGEROS > 创建项目，选择所需的模板后单击应用。
默认模板源为 github，若模板无法加载请单击 VSCode 左下方的管理图标，选择设置 > 扩展 > EdgerOS，将 Template Source 切换为 Gitee，然后在创建项目页面单击刷新模板信息即可。

参考表 1 填写模板参数，填写完成后单击立即创建，完成应用创建。

说明：

你还可以在右下方登录爱智账号的提示窗口中单击登录，并按照引导步骤完成登录。登录成功后，插件将在创建应用时自动为你填写开发者信息。

注意：

创建完成后需进入创建的项目根目录，执行 npm install 命令安装依赖包。

表 1 创建应用参数模板

参数	说明	示例值
项目名称	项目的工程文件名称	test
包名	软件包名称	com.example.myapp
项目描述	简要说明项目用途	测试项目
保存路径	项目在本地保存的路径	-
版本号	应用的版本号	0.0.1
开发者 ID	开发者 ID (从开发者网站个人信息查询)	479ace68109611ecbf6b00163e163bca
开发者名称	开发者 ID 对应的用户名	acoUsername
开发者邮箱	开发者的邮箱	example@example.com
开发者手机	开发者的手机号	123456789
开发者传真	开发者的传真号码	-
其他项：在新窗口打开项目	是否在新的 VScode 窗口打开项目	-

创建示例

以创建 Vue 应用为例，打开已创建的项目工程，在 public 目录下打开 index.html，修改其内容如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello EdgerOS</title>
    <script src="./vue/vue.min.js"></script>
  </head>
  <body>
    <h1>Hello EdgerOS</h1>
    <div id="app">
      Counter: {{ counter }}
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            counter: 0,
          };
        },
        mounted() {
          setInterval(() => this.counter++, 1000);
        },
      });
    </script>
  </body>
</html>

修改完毕并保存后，一个最简单的 Vue 示例就创建完成了。

补充说明

文件结构介绍

创建应用项目后会在项目目录下生成一个文件夹（文件夹名称为项目名称），作为项目根目录。这个文件夹中已经包含了项目配置文件与示例页面的初始代码，主要结构如下：

├── assets          资源文件夹
├── routers         路由信息
├── public          静态页面文件
├── views           模板页面
├── eslintrc.json   eslint 配置文件
├── edgeros.json    edgeros 应用配置文件
├── main.js         程序入口
├── jsconfig.json   代码补全配置文件
└── package.json    依赖包的管理

edgeros.json 介绍

edgeros.json 示例

{
  "name": "default",
  "bundleid": "com.example.myapp",
  "test": "./test/index.js",
  "ignore_modules": ["@edgeros/eslint-plugin-jsre", "@edgeros/jsre-types"],
  "native_modules": ["dayjs", "lodash"],
  "ignore_path": ["./test/**", "./temp/**"],
  "assets": {
    "ico_big": "assets/big.png",
    "ico_small": "assets/small.png",
    "ico_widget": "assets/widget.png",
    "splash": "assets/splash.png"
  },
  "program": {
    "gss": false,
    "log": "console",
    "will": false,
    "reside": false,
    "mesv": "1.0.0",
    "resource": "public",
    "experimental": false,
    "doctype": ["image/*", "application/pdf"]
  },
  "loading": {
    "splash": "splash", 
    "background": "#000000",
    "animation": "enlarge"
  },
  "vendor": {
    "id": "479ace68109611ecbf6b00163e163bca",
    "name": "mycompany",
    "email": "example@example.com",
    "phone": "123456789",
    "fax": ""
  },
  "update": {
    "remove": ["public"]
  },
  "widget": [
    {
      "ico": "ico_widget",
      "name": "My Widget",
      "path": "widget",
      "rows": 2,
      "columns": 2,
      "category": "Demo"
    }
  ],
  "scripts":{
    "prebuild":"echo 'Hello EdgerOS'"
  }
}

注意：

edgeros.json 是 VScode EdgerOS 开发插件中的一项配置文件，用于表明此文件的根目录下是一个爱智应用项目。在编译过程中，VSCode 插件会根据 edgeros.json 的配置进行动态编译，并生成 desc.json 文件。desc.json 是编译后产生的文件，仅保留了爱智应用的必要描述。

edgeros.json 字段

字段	类型	描述	用途
name	字符串	App 名称	在爱智世界中展示时的应用名称
bundleid	字符串	App 的包名	App 包名 (bundleid)，建议使用反域名序列，例如 com.example.myapp
test	字符串	测试脚本的入口路径	用以指定 EdgerAPP 项目中单测脚本文件的入口路径，例如 ./test/index.js
ignore_modules	字符串数组	module 名称	过滤不参与打包的 module 名称
native_modules	字符串数组	JS 模块名称	用以声明当前 APP 使用的非 EdgerOS 官方包，构建时会将这些包打进构建产物以正常使用。需使用者自行判断该包是否可以在 JSRE 中运行。一般原生的 JS 非 Node 模块都可以在 JSRE 中正常运行，例如 ['dayjs', 'lodash']

ignore_path

字段	类型	描述	用途
ignore_path	字符串数组	字符串路径	过滤不参与打包的文件路径

assets

字段	类型	描述	用途	注意事项
ico_big	字符串	App 必须的高清图标的资源路径	暂未使用	必须存在于软件包的根目录下且为 PNG/JPG/JPEG 格式在深色模式和浅色模式下必须保持清晰图标尺寸为 128128(px) 至 512512(px) 文件大小不超过 512 KB
ico_small	字符串	App 必须的小图标的资源路径	用于 App 桌面图标的圆角矩形图片	必须存在于软件包的根目录下且为 PNG/JPG/JPEG 格式在深色模式和浅色模式下必须保持清晰图标尺寸为 128128(px) 至 512512(px) 文件大小不超过 512 KB
ico_widget	字符串	可自定义名称的其它可引用的资源	此处 ico_widget 定义 widget 中图标图片文件的路径	-
splash	字符串	可自定义名称的其它可引用的资源	此处 splash 定义欢迎页图片文件的路径	格式为 PNG/JPG/JPEG，文件大小不超过 200 KB

program

字段	类型	默认值	权限申请	描述	用途
gss	选填，布尔值	false	-	相同开发者 (vendor.id) 发布的所有 App 可通过 gss 通信，不同开发者的 App 通过 zone 隔离；系统服务的 zone 为空；App 无法创建空的 zone	用于控制同一开发者 App 间的通信
log	选填，字符串	console	-	file：保存日志到文件；日志文件有两个，写满后自动滚动输出到另外一个 null：不输出任何日志 console：仅允许在开发调试阶段使用	用于控制日志的输出方式
will	选填，布尔值	false	需要	App 不会被立即杀死，以便完成自己的任务。在应用关闭时，该应用可以通过 Process 模块监听 will 事件，详细信息请参见 Process Events	用于控制 App 的遗嘱权限
reside	选填，布尔值	false	需要	常驻内存权限，比如说提供 widget 的 App	用于控制 App 的常驻内存权限
mesv	必填，字符串	N/A	N/A	字符串 Minimal Edger system version，即最低兼容的 EdgerOS 版本	填写最低兼容的 EdgerOS 版本
resource	必填，字符串	public	N/A	resource 字段的值对应的文件夹用来存放前端缓存资源内容，该文件夹必须存在且内容不能为空	EdgerOS 将提供预加载服务，加速应用启动速度
experimental	选填，布尔值	false	N/A	表示该应用是否是一个实验室应用	用于控制 App 是否为一个实验室应用
doctype	选填，字符串数组	-	N/A	表示该应用是否支持处理指定类型的文档	用于判断该应用是否能够处理其他应用分享的文档

loading

字段	类型	描述	用途
splash	字符串	splash 引用 assets 字段中的资源	App 加载首屏的图片文件，引用 assets 字段内定义资源文件的字段名
background	字符串	#000000 格式的颜色编码值	App 加载首屏的图片文件的背景色
animation	字符串	enlarge 动画效果：扩大	App 加载完成后，首屏图片的退出动画效果

update

类型	字段	可选字段	描述	用途
数组	remove	-	自动清理目录	应用升级时，系统自动清理的目录集合

widget

字段	类型	字段说明	描述	用途
ico	字符串	必填	widget 图标，例如：ico_widget	widget 图标，引用 assets 字段内定义的资源文件
name	字符串	必填	widget 显示名称	用于记录 widget 图标名称
path	字符串	必填	widget page URL 路径，最终会与 App 的 hostname 拼接成完整 URL	用于记录 widget 的加载路径
rows	数字	必填	widget 占用行数	用于记录 widget 占用桌面栅格的行数
columns	数字	必填	widget 占用列数	用于记录 widget 占用桌面栅格的列数
category	字符串	可选	widget 所述分类，多个 widget 可属于一个组，EdgerOS 会预定义一些分类，没有指定分类则分类名以 name 代替	记录 widget 的分类，可以从 EdgerOS 的分类里选择，如果没有指定分类则分类名以 name 代替

vendor

字段	类型	字段说明	描述	用途
id	字符串	必填	系统为开发者生成的 ID	系统为开发者生成的 ID，可以在爱智开发者平台的个人信息中查看，例如：479ace68109611ecbf6b00163e163bca
name	字符串	必填	软件开发者的名称	用于记录 App 开发者的用户名或者开发者的名称
email	字符串	必填	软件开发者的电子邮件地址	用于记录 App 开发者的电子邮件地址
phone	字符串	可选	软件开发者的联系电话	用于记录 App 开发者的联系电话
fax	字符串	可选	软件开发者的传真号码	用于记录 App 开发者的传真号码

scripts

字段	类型	字段说明	描述	用途
prebuild	字符串	可选	应用构建时前置操作	打包构建爱智应用时，可配置该项完成指定 shell 指令，如构建前端，删除冗余文件等操作

环境准备

部署应用

文档内容是否对您有所帮助？

有帮助

没帮助

创建应用

# 创建应用

# 前提条件

# 操作步骤

# 创建示例

# 补充说明

# 文件结构介绍

# edgeros.json 介绍

# edgeros.json 示例

# edgeros.json 字段

创建应用

前提条件

操作步骤

创建示例

补充说明

文件结构介绍

edgeros.json 介绍

edgeros.json 示例

edgeros.json 字段