1.0 介绍
1.1 简介
APP 小组件是基于阿里七巧板框架开发的，中台将小组件开发整合到了前端默认模板里面，可以更便捷的开发和调试，所以需要编写布局文件xml和描述文件 meta.json，最后使用Pai命令编译，可以使用前端工程配合 APP 扫码，对小组件快速预览，开发完小组件后，使用 Pai命令上传小组件，就可以在开发者后台的前端工程中开到小组件。
1.2 开发流程
2.0 创建
2.1 新建套件
创建 前端工程，需要用到 套件标识，所以需要先新建一个套件，或者使用已有套件。
2.2 新建工程
然后使用 套件标识 创建前端工程
开发者后台 > 开发中心 > 我的套件 > 添加套件
pai 命令新建前端模板工程 pai_project_demo_ui （-s： 为套件标识）
pai create front -n pai_project_demo_ui -s com.demo.widget2.3 工程介绍
使用VsCode 打开 pai_project_demo_ui 工程，然后加载前端工程所关联的库
npm install动态格式化，不然开发过程中代码检查会报错
xy-format文件介绍根目录 /static/widget 下：
├─pages
├─plugins
├─server
├─static
│ ├─widget
│ │ ├─app //app 端小组件文件夹
│ │ └─web //web 端小组件文件夹
│ ├─lottie
│ └─widget
├─store
├─style
└─util3.0 开发
3.1 运行工程
在 VsCode 的终端中运行 npm 命令
npm run dev3.2 新增小组件
进入前端工程 pai_project_demo_ui 目录 static > widget > app 下使用 Pai 命令新增小组件 project_widget
pai widget create app -n project_widget -d 用于演示的小组件static
├──widget
├─app
├─project_widget //小组件文件夹
ProjectWidget.json //小组件变量，编译后自动生成
ProjectWidget.out //小组件二进制的文件，编译后自动生成
project_widget.xml //小组件布局
icon.png //图标
meta.json //配置文件，配置变量和动态数据
thumb.png //缩略图3.3 开发小组件
使用 VSCocd 编写 project_widget 中的 界面布局 project_widget.xml和描述文件 meta.json;
3.3.1 project_widget.xml
<?xml version="1.0" encoding="utf-8" ?>
<NFrameLayout
action="${action}"
flag="flag_exposure|flag_clickable"
layoutHeight="76"
layoutWidth="match_parent">
<PiImageView
layoutHeight="76"
layoutWidth="match_parent"
imgSrc="${bgUrl}"/>
<RatioLayout
layoutGravity="v_center"
layoutHeight="wrap_content"
layoutWidth="match_parent"
orientation="H">
<PiImageView
layoutGravity="v_center"
layoutHeight="40"
layoutWidth="37"
layoutMarginLeft="23"
imgSrc="${imgUrl}"/>
<NText
layoutGravity="v_center"
layoutHeight="wrap_content"
layoutWidth="wrap_content"
textColor="#d9000000"
layoutMarginLeft="13"
textSize="4"
text="●"/>
<NText
layoutGravity="v_center"
layoutHeight="wrap_content"
layoutRatio="1"
layoutWidth="0"
layoutMarginLeft="8"
textColor="#d9000000"
textSize="14"
text="${title}"/>
<PiImageView
layoutGravity="v_center"
layoutHeight="8"
layoutWidth="8"
layoutMarginRight="8"
imgSrc="${imgRead}"/>
<PiImageView
layoutGravity="v_center"
layoutHeight="12"
layoutWidth="6"
layoutMarginRight="35"
imgSrc="${imgNext}"/>
</RatioLayout>
</NFrameLayout>${action}：meta.json中自定义的变量；
具体布局组件介绍，请查看文档中心
移动开发>小组件API
3.3.2 meta.json
注意
info中的type和file的大小写规范
{
"select": {
"selectData": [
{
"value": "pai_main_title",
"key": "园区名称"
},
{
"value": "",
"key": "无"
}
]
},
"paiData": {
"mapping": [
{
"value": "data.parkName",
"key": "title"
}
],
"visible": false,
"method": "post",
"url": "http://k8s.flyrise.cn/auth-api/oauth2/user"
},
"props": [
{
"type": "select",
"refer": "selectData",
"name": "数据绑定",
"value": "pai_main_title",
"key": "id"
},
{
"type": "number",
"name": "高度",
"value": 76,
"key": "height"
},
{
"type": "image",
"name": "背景",
"value": "https://gitee.com/WorkTool/WorkImage/raw/master/homeImage2/home_activity_bg.png",
"key": "bgUrl"
},
{
"type": "image",
"name": "图标",
"value": "https://gitee.com/WorkTool/WorkImage/raw/master/homeImage2/home_activity_icon.png",
"key": "imgUrl"
},
{
"type": "string",
"name": "内容",
"value": "平板支撑大赛火热开启",
"key": "title"
},
{
"type": "image",
"name": "已读标记",
"value": "https://gitee.com/WorkTool/WorkImage/raw/master/banner_indicator_c-24-24.png",
"key": "imgRead"
},
{
"type": "data",
"name": "跳转箭头",
"value": "https://gitee.com/WorkTool/WorkImage/raw/master/core_list_item_right_icon.png",
"key": "imgNext"
}
],
"actions": [
{
"name": "点击事件",
"value": {
"uniAppId": "",
"formId": "",
"kitId": "",
"itemCode": "2020",
"pageId": "",
"message": "您点击了hello,world",
"version": "",
"url": "",
"scope": "0",
"appId": ""
},
"key": "action"
}
],
"info": {
"date": "2021-02-23 10:37:24",
"thumb": "thumb.png",
"author": "",
"icon": "icon.png",
"type": "ProjectWidget",
"version": "0.0.1",
"enabled": true,
"file": "project_widget.xml",
"build": "2",
"desc": "活动通知"
}
}props：
type：类型number、string、image、boolean、color、select、data;name：可视化楼层显示的描述；value：默认数据；key：变量名，height对应xml中的${height}；visible：是否在可视化楼层显示，默认 true：显示。
select: 数据选择器，在 props 中调用，不会显示在 自动生成的 ProjectWidget.json 文件中；
selectData：自定义选择器数据集，可以有多个同级；selectData>value：选择器的值填写到props>value中，自动匹配默认数据；selectData>key：默认选择的数据。
paiData: 动态数据源配置，不会显示在 自动生成的 ProjectWidget.json 文件中
mapping： 需要替换的对象；visible：是否显示在可视化楼层，默认为 true：显示；method：请求模式，get、post;url：请求地址。
actions：点击事件
itemCode：1001为小程序；uniAppId：请输入小程序microAppCode微应用唯一值。
info：配置文件
type：类型，用于查找对应的.out文件；file：xml文件的名称。
3.3.3 点击事件
ItemCode编码 |
描述 |
|---|---|
| 0 | 网页 |
| 1001 | uni-app启动 |
| 1014 | 选择企业 |
| 1015 | 应用消息 |
| 1016 | 全文检索 |
| 1017 | 工作台设置界面 |
| 1018 | 工作台企业app |
| 1030 | 通用扫码 |
| 1031 | 用户详情 |
| 1032 | 我的设置 |
| 2020 | 弹出toast |
3.4 编译小组件
使用 Pai命令编译 project_widget 小组件，会生成 ProjectWidget.json 和 ProjectWidget.out 文件；
pai widget compile app -n project_widget -v 1.0.13.5 调试预览
在 preview 中用中台移动端扫码预览小组件 http://localhost:81/form/preview
手机预览图：
4.0 发布小组件
4.1 上传小组件
使用 Pai 命令上传 project_widget 小组件到 pai_project_demo_ui 前端工程中
pai widget deploy app -n project_widget4.2 小组件上架
开发者后台 > 开发中心 > 我的工程 > 前端 >
pai_project_demo_ui> 小组件 > app小组件 > 预览小组件
当套件绑定有小组件的工程后，套件在应用中心上架时，可以看到已发布的小组件，上架成功后可以在工作台查看。
开发者后台> 应用中心 > 发布上架 > 移动端端工作台查看
