-
1. 后端处理服务器API
- 1.1 数据库结构
- 1.2 后端处理服务器HTTP 接口
- 1.3. 数据包
-
2. 后端处理服务器应用集成API
- 2.1 设置应用集成
- 2.2 API 格式和签名机制
- 2.3 API 定义
- 3. 客户端扩展机制
-
4. 会话机器人开发指南
- 4.1 机器人应用开发
开发应用扩展
- 2020-08-11 11:14:48
- 孙浩
- 6266
- 最后编辑：孙浩 于 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.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!')
};
最终效果如下图：
联系我们
公众号
微信公众号
