20210511-APP门户开发

视频下载

• 小程序及APP组件开发

app 门户组件开发

1.0 介绍

APP 小组件是基于阿里七巧板框架开发的，我们将小组件开发整合到了前端默认模板里面，可以更便捷的开发和调试。开发小组件首先需要编写布局文件xml和描述文件 meta.json，然后使用Pai命令编译，可以使用前端工程配合 APP 扫码快速预览。开发完小组件后，使用 Pai命令上传小组件，就可以APP工作台或可视化楼层看到小组件。

• 七巧板介绍
• 七巧板API
• 小组件API
• 动态数据加载实战
• 扩展小组件

2.0 pai 创建前端工程

1. 新建套件

pai create front -n pai-devdemofront-ui

2. 拷贝已有套件

pai clone -n pai-devdemofront-ui

3.0 pai 创建app组件

pai widget create app -n pai_devdemo -d 附件组件

4.0 开发基础组件

4.1 修改meta.json

 "info": {
        "userGroup": "C",
        "desc": "演示组件"
    }
    {
         "type": "string",
         "name": "文本1",
         "value": "演示管理",
         "key": "text1"
    }

4.2 编译小组件

pai widget compile app -n pai_devdemo

5.0 预览组件

5.1 运行前端工程：

//加载前端库
npm install

//启动前端工程
npm run dev

5.2 打开预览页：

 http://localhost:80/demofront/preview

5.3 手机扫码预览：

6.0 上传组件

pai widget deploy app -n pai_devdemo

7.0 沙箱更新

1. 创建套件：dev.demo.front

2. 应用范围：开发演示套件

3. 添加前端工程 pai-devdemofront-ui

4. 应用中心 > 新增版本 1.0.0

5. 开发者中心 > 我的套件 > 发布沙箱

8.0 可视化工具

1. 进入工作台

2. 打开可视化工具

3. 新建页面

4. 动态组件库 > 演示组件 > 发布

9.0 app预览