bs-ui-info
v0.3.2
Published
[Base Readme](./base/README.md) > 这个项目是从bs-ui-seed基础创建出来的. 请查看`base/README.md` 来了解其基础内容.
Readme
bs-ui-info
这个项目是从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字段
使用方法
- 安装
npm i bs-ui-info -s- .json
"usingComponents": {
"bs-info": "../bs-ui-info/index"
}- .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>- .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-field | String | 否 | source,config | 指定触发组件初始化的条件，比如watch-field="config"，当config变化的时候触发，默认会触发2次, source和config变化都会触发组件初始化|
| cm-*| String | 否 | -- | 外部自定义样式，详细说明请查阅下方 "外部样式"|
|source| Object | 是 | -- | 详情页数据源|
|config| Object | 是 | -- | 数据源配置|
|bind:load| Function | 否 | -- |图片加载完成回调|
|bind:error| Function | 否 | -- |图片加载错误回调|
|bind:activeend| Function | 否 | -- |进度条动画完成回调|
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|配置code|String| 是 |--
|empty|数据源单项的值不存在时如何展示|String| 否 |如果不设置empty字段，默认为'--'
|class|condition容器的class|String、Object| 否 |--
|attrs|condition容器的attr属性|String、Object| 否 |--
|style|condition容器的style|String| 否 |--
|props|condition容器的prop属性|Object| 否 |--
|labelStyle|condition-item容器的label样式|String| 否 |--
|info| 配置项，见Config.Info配置说明 |Array| 是 |--
注意: Config配置下的class、attrs、style、props、labelStyle只能是纯字符串
Config.Info配置说明
|属性名 | 说明 | 类型 | 用法示例
|-- |-- |-- |--
|field|单项对应的字段名（与数据源中的字段名对应）|String|
|label|condition-item组件的label值|String|
|show|是否展示该项，默认true|Boolean|
|isrow|该项是否独占一行，默认true|Boolean|
|el|condition-item组件的子节点渲染的html原生标签，支持的标签查阅|String|"span"
|style|el、component的行内样式|String|"style": "width: 200px"
|attrs|el、component的attrs|Object|"attrs":{"border": true}
|props|component的props属性|Object|"props": {"src": "{{$item.src}}","preview-src-list": "{{$item.list}}"}
|children|el或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.暂不支持Array[index]形式取值或执行函数
- 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文件，这个文件只用来处理常用的函数，以方便后期使用