0.3.2 • Published 2 years ago

bs-ui-info v0.3.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

bs-ui-info

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

功能介绍

  • 根据config配置和数据源生成页面详情
  • 自定义dom结构
  • 自定义dom样式
  • attrs、class、props、style、children支持字符串模板语法
  • attrs、class、props、style、children支持（比较运算符）三元表达式
  • attrs、class、props、style、children支持函数用法（v0.3.0之后）
  • "cm-info", "cm-info-item", "cm-info-item-label", "cm-info-item-item", "cm-info-item-image", "cm-info-item-table", "cm-info-item-progress", "cm-td-empty" 外部样式覆盖，详情看外部样式说明部分
  • table的写法请参照案例中appRunningInfo字段

使用方法

  1. 安装
npm i bs-ui-info -s
  1. .json
"usingComponents": {
    "bs-info": "../bs-ui-info/index"
  }
  1. .wxml
<bs-info 
    watch-field="config" 
    cm-class="bs-condition" 
    cm-info-item-item="info-item" 
    source="{{source}}" 
    config="{{config}}" 
    bind:load="imageLoad">
</bs-info>
  1. .js
Page({
  data: {
    source: {
      "wifiMac": "28:ed:e0:fd:b2:12",
      "deviceType": "sdjh",
      "sdkInt": 25,
      "serialNo": "3GKL24D3I1",
      "os": "Android",
      "disk": 7125798912,
      "ethMac": "30:1F:9A:65:0E:0E",
      "bluetoothMac": "",
      "productName": "rockchip",
      "ram": 2053808128,
      "version": "v1",
      "osVersion": "7.1.2",
      "wifiSsid": "WANDA",
      "hasCamera": 0,
      "resolution": [1080, 1920],
      "sysDisk": 1535754240,
      "appRunningInfo": [{
        "appDir": "/system/app/Rk4kVideoPlayer/Rk4kVideoPlayer.apk",
        "appName": "视频播放器",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "android.rk.RockVideoPlayer",
        "processName": "android.rk.RockVideoPlayer",
        "runningStatus": 10,
        "versionName": "2.3-20190108-7.1"
      }, {
        "appDir": "/system/app/PowerOnOff/PowerOnOff.apk",
        "appName": "定时开关机",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "com.adtv",
        "processName": "com.adtv",
        "ram": "2428",
        "runningStatus": 0,
        "versionName": "7.1.2"
      }, {
        "appDir": "/system/app/Browser/Browser.apk",
        "appName": "浏览器",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "com.android.browser",
        "processName": "com.android.browser",
        "runningStatus": 10,
        "versionName": "7.1.2"
      },
      {
        "appDir": "/system/app/Browser/Browser.apk",
        "appName": "浏览器",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "com.android.browser",
        "processName": "com.android.browser",
        "runningStatus": 10,
        "versionName": "7.1.2"
      },
      {
        "appDir": "/system/app/Browser/Browser.apk",
        "appName": "浏览器",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "com.android.browser",
        "processName": "com.android.browser",
        "runningStatus": 10,
        "versionName": "7.1.2"
      },
      {
        "appDir": "/system/app/Browser/Browser.apk",
        "appName": "浏览器",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "com.android.browser",
        "processName": "com.android.browser",
        "runningStatus": 10,
        "versionName": "7.1.2"
      },
      {
        "appDir": "/system/app/Browser/Browser.apk",
        "appName": "浏览器",
        "firstInstallTime": 1230739200000,
        "lastUpdateTime": 1230739200000,
        "packageName": "com.android.browser",
        "processName": "com.android.browser",
        "runningStatus": 10,
        "versionName": "7.1.2"
      }],
      "progress": "87",
      "image": {
        "src": "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
      }
    },
    config: {
      "name":"设备#config解析规则",
      "code":"DEVICE_EQ_V1",
      "labelStyle": "width: 120px;",
      "class": "cm-info",
      // "style": "background-color:aquamarine",
      "empty": "--",  // 数据为空时，如何处理，如果没有empty字段，默认为--
      "info": [
        {
          "field":"resolution",
          "label":"屏幕分辨率：",
          "labelStyle": "",
          // "show": true,
          "children": "{{$join| * }} 呵 {{$root.sdkInt}} 测试",
          "style": "color:red;font-size:{{$root.sdkInt}}px", // class、style 只能是String类型
          "el": "span" // table,image,tag,progress
        },
        {
          "field":"deviceType",
          "label":"设备类型：",
          "isrow": false,
          "el": "span",
          "style": "font-size:{{$root.sdkInt==25?($item?38:12):20}}px;{{getStyle|}}",
          "children": "{{$item}}"
        },
        {
          "field":"osVersion",
          "label":"系统版本：",
          "isrow": false,
          "children": "v{{$item}}",
          "el": "span" // table,image,tag,progress
        },
        {
          "field": "appRunningInfo",
          "label": "测试table1：",
          "labelStyle": "width:auto;",
          "el": "span",
          "style": "display:block;margin-right:10px;",
          "itemStyle": {
          },
          "children": [
            {
              "el": "table",
              "children": [
                {
                  "el": "colgroup",
                  "children": [
                    {
                      "el": "col",
                      "attrs": {
                        "width": "120px"
                      }
                    },
                    {
                      "el": "col",
                    },
                    {
                      "el": "col",
                    }
                  ]
                },
                {
                  "el": "thead",
                  "children": [
                    {
                      "el": "tr",
                      "children": [
                        {
                          "el": "th",
                          "children": "A"
                        },
                        {
                          "el": "th",
                          "children": "B"
                        },
                        {
                          "el": "th",
                          "children": "C"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "el": "span",
              "style": "height:120px;overflow-y:auto;display:block;border-bottom:1px solid #ccc;",// 如果不需要固定表头，可以删除该样式
              "children": [
                {
                  "el": "table",
                  "children": [
                    {
                      "el": "colgroup",
                      "children": [
                        {
                          "el": "col",
                          "attrs": {
                            "width": "120px"
                          }
                        },
                        {
                          "el": "col",
                        },
                        {
                          "el": "col",
                        }
                      ]
                    },
                    {
                      "el": "tbody",
                      "children": [
                        {
                          "el": "tr",
                          "children": [
                            {
                              "el": "td",
                              "children": "{{$item.versionName}}"
                            },
                            {
                              "el": "td",
                              "children": "{{$item.appName.length>4?呵呵:卧槽}}"
                            },
                            {
                              "el": "td",
                              "children": "{{$item.runningStatus==10?停止:启动}}"
                            }
                          ],
                          "repeat": true
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "field": "progress",  // 进度条不支持children属性
          "label": "测试进度条：",
          "el": "progress",
          "attrs": {
            "percent": "{{$item}}",
            "show-info": true,
            "color": "#10AEFF",
            "active": true,
            "duration": 5
          },
          "style": "color: red",
          "children": "😕哈哈{{77<$item?($item>99?-10:00):(11>12?1:-1)}}",
        },
        {
          "field": "image",  // 图片不支持children属性
          "label": "测试图片：",
          "el": "image",
          "attrs": {
            "src": "{{$item.src}}",
          },
          "params": {
            'src': "{{$item.src}}", // data-params传参, 需要存储在该节点上的数据，都放在这里
          },
        }
      ]
    } 
  },
  onShow() {
    
  },
  imageLoad(event) {
    console.log(event)
  },
  getStyle(param) {
    return 'background-color:aquamarine;'
  }
})

接口说明

Attrs

属性类型必填默认值说明
watch-fieldString否source,config指定触发组件初始化的条件，比如watch-field="config"，当config变化的时候触发，默认会触发2次, source和config变化都会触发组件初始化
cm-*String否--外部自定义样式，详细说明请查阅下方 "外部样式"
sourceObject是--详情页数据源
configObject是--数据源配置
bind:loadFunction否--图片加载完成回调
bind:errorFunction否--图片加载错误回调
bind:activeendFunction否--进度条动画完成回调

CM-*（外部样式）

  • cm-info: 详情容器，覆盖class="condition"
  • cm-info-item: 单项容器，覆盖class="condition-item"
  • cm-info-item-label: 单项label，覆盖class="label"
  • cm-info-item-item: 当el!=image、table、progress单项详情容器，覆盖class="item"
  • cm-info-item-image: 当el==image单项详情容器，覆盖class="item"
  • cm-info-item-table: 当el==table单项详情容器，覆盖class="item"
  • cm-td-empty: 当el==table容器时，数据源为空的样式。
  • cm-info-item-progress: 当el==progress单项详情容器，覆盖class="item"

Config配置说明

属性名说明类型必填默认值
enumName配置名称String是--
enumCode配置codeString是--
empty数据源单项的值不存在时如何展示String否如果不设置empty字段，默认为'--'
classcondition容器的classString、Object否--
attrscondition容器的attr属性String、Object否--
stylecondition容器的styleString否--
propscondition容器的prop属性Object否--
labelStylecondition-item容器的label样式String否--
info配置项，见Config.Info配置说明Array是--

注意: Config配置下的class、attrs、style、props、labelStyle只能是纯字符串

Config.Info配置说明

属性名说明类型用法示例
field单项对应的字段名（与数据源中的字段名对应）String
labelcondition-item组件的label值String
show是否展示该项，默认trueBoolean
isrow该项是否独占一行，默认trueBoolean
elcondition-item组件的子节点渲染的html原生标签，支持的标签查阅String"span"
styleel、component的行内样式String"style": "width: 200px"
attrsel、component的attrsObject"attrs":{"border": true}
propscomponent的props属性Object"props": {"src": "{{$item.src}}","preview-src-list": "{{$item.list}}"}
childrenel或component的子级Array、String"children": "{{$item.join( ，)}}"
  • 支持el==image和el==progress标签，使用微信小程序原生标签，attrs，bind可查阅相关文档
  • $item：当前数据，可以是行数据，或field对应源数据中的部分
  • $root：source数据源
  • $item、$root：适用范围包含config.info中的class、style、props、attrs、children
  • 使用注意事项：
    • 1.字符串模板语法需要使用{{这里写语法}}，如：{{$root.a}}
    • 2.支持object.a这种形式取值或执行函数，如："children": "{{$item.join( * )}}",
    • 3.暂不支持Arrayindex形式取值或执行函数
    • 4.支持（简单）三元运算，如：a==A?b:c
    • 5.支持的运算符"==","===","!=","!==",">","<",">=","<=","&&","||","!!","!"
    • 6.如果多个三元运算符，需要用()包裹，如：A!=B?(a==b?c:d):f
    • 7.暂不支持任何形式的计算运算符，如：A==C?a+B:b

Config.Info【class、attrs、style、props、children函数用法】

  • v0.3.0版本之后 {{$item.join( * )}} 这种用法废除

  • v0.3.0版本之后，支持自定义函数处理

        data: {
        "config": {
            //...其他配置
            "info": [
                {
                    "field":"resolution",
                    "label":"屏幕分辨率：",
                    "labelStyle": "",
                    // "show": true,
                    "children": "{{$join| * }} 测试文案 {{getValue|}} 测试",
                    "style": "color:red;font-size:{{$root.sdkInt}}px",
                    "el": "span" 
                }
            ]
        }
    },
    getValue({$item, $root, args}) {
        return '这里可以返回数据噢'
    }

  • 支持了管道符处理，|前面的一定是函数名，后面的是需要传入的参数，多个参数以多个|分隔

  • 管道符的函数名又分2种，$开头的函数名处理成js内置函数，有点限制，只能使用这种格式的函数处理 $item.函数名(参数)，比如：a.join()、a.split()、a.push()、a.substring()等，参数只能支持数字和字符串，算是一种语法糖，可以选择性的使用，这种方式只支持$item，不支持$root。
  • v0.3.0升级的大招是自定义函数处理，额。。。上面案例中的getValue便是自定义函数，需要注意的是哪怕你不需要传参，也必须要用|分隔，比如：{{getValue|}}，函数內部，可以拿到你想要的数据和你传递的参数，最后 return '你需要展示的数据'
  • 有个建议，可以创建一个公用的behaviors文件，这个文件只用来处理常用的函数，以方便后期使用
@infinitebrahmanuniverse/nolb-bs-@everything-registry/sub-chunk-1268@zalastax/nolb-bs-
0.3.2

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago