扩展小组件

小组件扩展，是在七巧板官方默认组件外，扩展一些通用的组件。

config.properties 中 id 的定义：

• 0 - 9999 以下是官方默认的
• 10000 - 29999 是平台原生扩展的组件
• 30000 - 59999 是第三方扩展的组件

扩展场景

初步设想的方案，是将小组件 id 扩展放到运营平台和工作台去维护，有一下几种情况：

• 移动端、后台均为公有

  • 统一在运营平台修改更新即可

• 移动端为私有，后台为公有

  • 可能会存在兼容问题，后台新增的扩展组件 id，移动端不能识别；
  • 第三方组件 id 定义区间需要在 30000 - 59999 之间，小于30000 会被平台的扩展组件覆盖；
  • 官方默认、平台 的组件 id 将在运营平台维护；
  • 第三方组件定义好后，到开放平台 > 开发者中心中维护第三方组件 id ；
  • 更新 Pai 工具时，会将 官方默认、平台、第三方 的组件数据更新到开发人员本地；
  • 然后使用 Pai 命令，将第三方 .XML 编译成 .out 文件；
  • 然后使用 Pai 命令，发布第三方 .out 文件到自定义套件中，上架套件后，即可在工作台看到发布的组件。

• 移动端为公有，后台为私有

  • 可能会需要移动端适配多版本后台。OA 7.0 就这样的模式，过多的兼容，导致代码维护繁琐。

  • 当公有版移动端要扩展组件时，需要注意组件 id 需要定义在 10000 - 29999 之间，防止覆盖其它版本定义的组件。

• 移动端、后台均为私有

  • 统一在运营平台修改更新即可

平台扩展的小组件

ChartView

扩展图表组件，主要是提供用户自定义图表，更加灵活的开发工作台。

chartList -> list

<ChartView
    layoutHeight="120"
    layoutWidth="200"
    title="图表"
    chartHeight="120"
    chartType="line"
    chartList="${chartPieData}"/>

{
 "chartPieData":"[{\"name\": \"待跟进\",\"numValue\": \"16\",\"color\": \"#54EB7E\"},{\"name\": \"跟进中\",\"numValue\": \"50\",\"color\": \"#15A6FD\"},{\"name\": \"已签约\",\"numValue\": \"34\",\"color\": \"#FDCC17\"}]",
}

CarouselView

扩展轮播小组件，可实现更多组合效果

<CarouselView
    layoutHeight="160"
    layoutWidth="match_parent"
    autoScroll="5000"
    isInside="true"
    carouseHeight="160"
    imgList="${carouselData}"/>

{
"carouselData":"[\"https://image.huanghepiao.com/d/file/20201003/30c1c8847ac11fff3329aac30a9f7b99.jpg\",\"https://img1.qunarzz.com/travel/d6/1701/c3/ad1a5ce13c3e2bb5.jpg\",\"https://p9-xg.byteimg.com/img/tos-cn-p-0000/5d16c2cae5c047bdaa8ca8a01389e8e8~tplv-crop-center:422:236.jpg\",\"https://256vimg1.xpghost.cn/uploads/2018/1225/20181225030438610.jpg\",\"https://images.ladymetro.com/file/youjia/mingxing/2019-07-26/5158bd8b960f991542cfa9922af89ead.jpg\"]"
}

PiImageView

扩展原生图片，支持 Gif 动图、本地图片、网络图片，所有 .out 中的图片显示，均使用此组件，七巧板推荐的图片组件，将不再支持。

imageData

<PiImageView
    layoutGravity="v_center"
    layoutHeight="12"
    layoutWidth="12"
    layoutMarginRight="16"
    imgRadius="2"
    isLocal="true"
    imgSrc="${imgSwitch}"/>

{
"imgSwitch":"core_arrow_right_blue",
}

LottieView

扩展原生 Lottie 动图支持本地 Lottie、网络 Lottie 图片。

<LottieView
    layoutHeight="60"
    layoutWidth="60"
    layoutGravity="v_center"
    isLocal="false"
    lottieSrc="${lottieData1}"/>

{
 "lottieData": "https://gitee.com/WorkTool/WorkImage/raw/master/gif/34847-dgah-moped-animation.json"
}

平台扩展本地资源

image

Lottie