# 创建应用

本章主要介绍通过 EdgerOS 扩展插件快速创建出爱智应用,以及工程文件结构详解。

# 新建项目

使用 EdgerOS for Visual Studio Code 扩展插件新建项目

  1. 打开 Visual Studio Code,单击插件 EdgerOS > 创建项目

  2. 根据所开发项目的需求选择模板,然后点击立即应用

    注意:如果模板加载不出来请按照以下方式切换模板源:打开 VSCode 左下方的管理按钮,点击设置>用户>扩展> EdgerOS > Template Source 将模板源切换为 Gitee,然后在创建模板时点击刷新模板信息按钮。

    ide

  3. 参考表 1 填写模板参数,填写完后点击立即创建,此时一个爱智应用已创建完成。

  4. 最后,进入创建的项目的根目录,执行 npm install 安装项目依赖包。

    ide

    表 1 项目模板参数

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

# 文件结构介绍

创建项目后会在项目目录下生成一个文件夹(文件夹名称为项目名称),作为项目根目录。

这个文件夹中已经包含了项目配置文件与示例页面的初始代码,项目根目录主要结构如下:

├── 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",
    "ignore_modules": [
        "@edgeros/eslint-plugin-jsre",
        "@edgeros/jsre-types"
    ],
    "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",
        "experimental": false
    },
    "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"
        }
    ]
}

# 字段描述

字段 类型 描述 用途
name 字符串 App 名称 在爱智世界中展示时的应用名称
bundleid 字符串 App 的包名 App 包名 (bundleid),建议使用反域名序列,例如 com.example.myapp
ignore_modules 字符串 module 名称 过滤不参与打包的 module 名称

ignore_path

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

assets

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

program

字段 类型 默认值 权限申请 描述 用途
gss 选填,布尔值 false N/A 相同开发商 (vendor.id) 发布的所有 App 可通过 gss 通信,不同开发商的 App 通过 zone 隔离;系统服务的 zone 为空;App 无法创建空的 zone 用于控制同一开发商 App 间的通信
log 选填,字符串 console N/A "file":保存日志到文件;日志文件有两个,写满后自动滚动输出到另外一个;"null":不输出任何日志;"console":仅允许在开发调试阶段使用 用于控制日志的输出方式
will 选填,布尔值 false 需要 App 不会被立即杀死,以便完成自己的任务 用于控制 App 的遗嘱权限
reside 选填,布尔值 false 需要 常驻内存权限,比如说提供 widget 的 App 用于控制 App 的常驻内存权限
mesv 必填,整数数组 N/A N/A 整数数组 Minimal Edger system version,即最低兼容的 EdgerOS 版本 填写最低兼容的 EdgerOS 版本
experimental 选填,布尔值 false N/A 表示该应用是否是一个实验室应用 用于控制 App 是否为一个实验室应用

loading

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

update

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

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 开发商的传真号码

# 创建 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 示例就创建完成了。下一章节将介绍如何将本示例部署到爱智设备