1. 后端处理服务器API
1.1  数据库结构
1.2  后端处理服务器HTTP 接口
1.3. 数据包
1.3.1  数据包的基本信息
1.3.2  所有数据包
2. 后端处理服务器应用集成API
2.1  设置应用集成
2.2  API 格式和签名机制
2.3  API 定义
3. 客户端扩展机制
3.1. 扩展定义
3.1.1  扩展类型
3.1.2  扩展包目录结构
3.1.3  扩展描述文件
3.2. 扩展模块
3.2.1  主入口模块
3.2.2. 扩展模块API
3.2.2.1  扩展 API 概览
3.2.2.2  扩展 API 权限
3.2.2.3  扩展 API 定义
3.2.3  扩展实例对象
3.2.4  数据存储机制
3.2.5  自定义上下文菜单
3.2.6  自定义命令
3.2.7  自定义网址解析
3.3. 开发扩展
3.3.1  载入开发中的扩展
3.3.2  开发应用扩展
3.3.3  开发插件扩展
3.3.4  开发主题扩展
3.4  内置扩展
3.5  分发扩展

开发应用扩展

2020-08-11 11:14:48
孙浩
277
最后编辑:孙浩 于 2020-08-11 11:33:02
分享链接

应用扩展可以方便开发者将自定义界面或网页嵌入到喧喧的界面中,方便用户直接在喧喧内访问使用。喧喧目前支持的应用嵌入方式包括:

  • Web 应用:直接将一个能够访问的页面作为应用嵌入,非常适合集成已经开发好了的页面应用;
  • 本地页面应用:在扩展包中提供一个 HTML 文件作为页面嵌入,用于开发一个全新的应用,但不想受官方界面样式表和 React 模式限制,在你的 HTML 文件中执行的 JS 代码仍然可以使用 nodejs 的内置模块;
  • React 组件应用:在入口模块的MainView属性上设置一个 React 组件作为嵌入的界面,方便的开发一个与官方界面融合的应用,在你的 React 组件中可以使用全部的 nodejs 内置模块,并访问全局扩展对象。

开发 Web 应用

要开发 Web 应用,在最简单的情况下只需要在扩展包中包含描述文件package.json即可。下面以将火狐的文件传输应用包装为喧喧的应用扩展示例中的package.json文件内容:

{
    "name": "xext-zui",
    "displayName": "ZUI",
    "version": "1.0.0",
    "type": "app",
    "appType": "webView",
    "webViewUrl": "https://openzui.com"
}

将写入以上内容的package.json文件打包为一个 zip 压缩文件,即可在喧喧中安装此应用扩展。

喧喧ZUI应用扩展

此扩展实例可以在 zui.zip 获取,更多相关例子:

开发本地页面应用

本地页面应用即在扩展包中提供一个 HTML 文件来作为应用扩展界面。下面为一个简单的本地页面应用扩展目录结构:

helloworld-htmlapp-example/
 ├─ views/
 │   └─ index.html         # 作为应用界面的 HTML 文件
 └─ package.json           # 扩展包描述文件

扩展包内源码文件内容如下:

package.json
{
    "name": "helloworld-htmlapp-example",
    "displayName": "HTML 示例应用",
    "version": "1.0.0",
    "description": "此扩展用于演示喧喧的应用扩展机制。显示一个自定义 html 文件作为应用界面。",
    "type": "app",
    "appIcon": "mdi-language-html5",
    "appAccentColor": "#ff6d00",
    "appType": "webView",
    "webViewUrl": "views/index.html",
    "author": {
        "name": "${author.name}"
    },
    "publisher": "${company}"
}
views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>

最终效果如下图:

喧喧本地页面应用扩展

此扩展实例可以在 helloworld-htmlapp-example.zip 获取。

开发 React 组件应用

应用扩展还可以使用一个 React 组件来呈现应用界面,当开发好 React 组件之后,需要在主入口模块的MainView字段指定要作为界面的 React 组件。下面为一个简单的 React 组件应用扩展包目录结构:

helloworld-app-example/
 ├─ lib/
 │   ├─ app-view.js      # 作为应用界面 React 组件
 │   └─ index.js         # 扩展主入口模块
 └─ package.json         # 扩展包描述文件

扩展包内源码文件内容如下:

package.json
{
    "name": "helloworld-app-example",
    "displayName": "示例应用",
    "version": "1.0.0",
    "description": "此扩展用于演示喧喧的应用扩展机制。从一个自定义的 React 组件来创建应用界面。",
    "type": "app",
    "hot": true,
    "appIcon": "mdi-react",
    "appAccentColor": "#aa00ff",
    "appType": "insideView",
    "main": "lib/index.js",
    "author": {
        "name": "${author.name}"
    },
    "publisher": "${company}",
    "usesPermissions": [
        "ext.MainView",
        "window.document",
        "nodeModules.react",
    ]
}
lib/index.js
const {MainView} = require('./app-view.js');
module.exports = {
    MainView
};
lib/app-view.js
const React = require('react');
module.exports = {
    MainView: () => React.createElement('div', {className: 'box red'}, '示例应用内容: Hello world!')
};

最终效果如下图:

喧喧 React 组件应用扩展

此扩展实例可以在 helloworld-react-example.zip 获取。
发表评论
评论通过审核后显示。
咨询电话

公司电话: 400-6689-739

客服电话: 18562856230