机器数据分析平台 > 应用开发者文档 > APP开发手册 > APP开发说明 > 自定义页面 >自定义页面开发步骤

自定义页面开发步骤

最近更新时间: 2022-03-23 10:40:21

Pandora 支持您开发自定义页面的 App，可以将外部已经存在的 Web 服务直接嵌套在当前平台或者任何自定义页面逻辑进行页面展示。

开发自定义页面 APP 分为以下几步：

1.创建自定义页面 APP 模板
2.开发自定义页面逻辑
3.打包上传 APP 至平台

1. 创建自定义页面 APP 模板 {docsify-ignore-all}

使用 create-pandora-app 工具，选择 view-html 类型模板，即可生成自定义页面 APP 模板。

$ npx create-pandora-app <appName> -t view-html

App 目录结构

.
├── README.md
├── app.json
├── appserver
│   └── static
├── default
│   ├── nav.xml
│   └── views
│       └── page.xml
├── develop
│   ├── bin
│   │   └── package.run
│   ├── configs
│   │   ├── env.js
│   │   ├── paths.js
│   │   ├── webpack.common.conf.js
│   │   ├── webpack.dev.conf.js
│   │   ├── webpack.dll.conf.js
│   │   └── webpack.prod.conf.js
│   ├── package.json
│   ├── scripts
│   │   └── mock.js
│   ├── src
│   │   ├── App.tsx
│   │   ├── Boot.tsx
│   │   ├── apis
│   │   ├── components
│   │   ├── constants
│   │   ├── index.tsx
│   │   ├── style.module.less
│   │   └── styles
│   │   └── style.less
│   ├── tsconfig.json
│   └── types
│   └── index.d.ts
├── resources
│   ├── extractions
│   └── sourcetypes
└── static
└── icon.png

2.开发自定义页面逻辑 {docsify-ignore-all}

开发步骤

进入 develop 目录。
执行 npm install，安装开发项目相关依赖。
执行 npm run start, 启动模板项目。
修改 src 目录下根据自身需求在 develop 目录下开发自定义页面逻辑，需注意静态资源路径需使用相对路径。。

自定义页面支持任意框架进行开发，可根据自身需求对脚手架进行修改，最终打包完成的文件移动到appserver/static目录下即可

3.打包上传 APP 至平台

使用下面命令将 APP 打包上传至平台即可。

yarn package

以上内容是否对您有帮助？