小组件开发

mete.json 中新增 type 类型 data （动态加载数据类型）

 "props": [
        {
            "type": "number",
            "name": "高度",
            "value": 12,
            "key": "height"
        },
        {
            "type": "color",
            "name": "背景",
            "value": "#F7F8F9",
            "key": "bgColor"
        },
        {
           "type": "data",
           "name": "描述",
           "value" : "默认描述",
           "key": "des"

        },
        {
           "type": "data",
           "name": "标签",
           "value" : "成家班",
           "key": "tag"

        }
    ]

后台开发

1、 “console-api/user/infor” 返回数据为：

 {

   "userName" : "成龙",
   "company" : {
      "name": "成龙影视",
      "tel" ："12012312"
   },
    {
    "tags":[
        {
            "id":"1326426719724376064",
            "text":"成家班"
        },
        {
            "id":"1326426719724376065",
            "text":"形象大使"
        },
        {
            "id":"1326426719724376066",
            "text":"终身成就奖"
        }
    ]
}
 }

2、 “console-api/user/infor/meta” 返回数据为：

 [
   {"name": "用户名", "key":"userName"},
   {"name": "公司名称", "key":"company.name"},
   {"name": "联系电话", "key":"company.tel"},
   {"name": "标签", "key":"tags.2.text"}
 ]

前端编译前

前端编译后

前端根据 infor/meta 组装出 paiData 中的 mapping 数组

{
    "paddingRight": 16,
    "type": "SystemPicture",
    "des":"默认描述",
    "tag":"成家班",
    "height": 106,
    "paiData" : {
        "url" : "console-api/user/infor",
        "method":"get",
        "mapping":[
            {
               "key": "des",
               "value" : "company.name"
            },
             {
               "key": "tag",
               "value" : "tags.2.text"
            }
        ]
     }
}

移动端动态加载后

使用 paiData 的 url 获取到数据源，使用 mapping 的结构替换七巧板 json 中的 des

{
    "paddingRight": 16,
    "type": "SystemPicture",
    "des":"成龙影视",
    "tag":"终身成就奖",
    "height": 106,
}