基于微信小程序的小型UI库(BSTCommon插件)

腾讯小程序插件文档地址 https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx3f99db061dbc1dd3&token=&lang=zh_CN

app.json配置

"plugins": { "BSTCommon": { "version": "1.0.9", "provider": "wx3f99db061dbc1dd3" } },

需要使用插件的页面

<!--json内--> "usingComponents": { "calendar": "plugin://BSTCommon/calendar" } <!--wxml内--> <calendar type='range' monthShowNum='{{3}}' markerData="{{markerData}}" monthShowDate="2019-08-01" bindchange='ondatechange' bindcheckStart='oncheckStart' /> <!--js内--> let { InitDateObj, //初始化时间类 patternGetValue, //取值模式 drillJSON, //下钻json数据 myFor, //循环 duplicateRemoval, //数组去重 hasKey, //判断对象是否含有某些值 formatCss, //格式化css字符串 cssObjToString, //将一个css样式对象转化为字符串 mergeCssStr, //合并css字符串、对象 Displacementer, //坐标换算类 initAryforJSON //初始化json数组 } = requirePlugin('BSTCommon')； //js内可以引入插件提供的一些类或者方法，不使用也可以不引入或按需引入 git代码下载使用

如果需要使用最新版的功能可将github上代码中plugin复制到本地项目中直接以自定义组件的形式引用

演示demo（小程序：ChiselUI）

引入组件时有可能开发工具会报（.wxss文件内）错；这个是样式警告，经咨询微信官方人员可以忽略。

说明：start/end只传一个，传入的为固定容器，另外的容器自适应剩余空间。

示例代码

<flexBox start='20%'> <view slot='start'>这个是固定容器</view> <view slot='end'>这个是自适应容器</view> </flexBox> coder:条形码（一维码）/二维码生成组件

说明：条形码/二维码的宽度跟随容器的宽度自适应计算，容器的宽度可通过componentStyle来设置。

示例代码

<--条形码--> <coder value='123456789' type='1d' encodingMethod='code93' barHeight='{{70}}' componentStyle='width:50%' bindchange='oncoderchange' /> <--二维码--> <coder value='https://www.tz12306.com' componentStyle='width:100%' /> modal:基础模态框

说明：此组件为底层组件支持5种类型，使用时需传入类型值、常用为dialog。

示例代码

<modal type='dialog' show='{{modalshow}}' bindhide='onhide' noMaskEvnet='{{true}}' bodyStyle='' title='{{true}}' > <view slot='title'>这是头部</view> <view>这是主体内容</view> <view slot='footer'>这是尾部</view> </modal> dialog:模态弹窗（基于modal）

说明：save与cancel同时存在时占位各为50%，如果只有save则为100%；如果获取到实例对象、可手动调用实例对象的show方法进行显示弹窗；show方法可接受一个参数OBJECT，其中key可以为props中所有的参数，执行时会覆盖组件初始传入的值（可实现一个组件，多处调用）；其中content字段为特殊字段，可接受HTML字符串渲染

示例代码

<!--模板调用--> <dialog show='{{dialogshow}}' save='确定' noMaskEvnet='{{true}}' bindsaveCallback='onsaveclick' > <view>这是主体内容</view> </dialog> <!--实例调用--> //wxml内 <dialog bindexamplePipe='onexamplePipe'/> //js内 onexamplePipe:function(e){ let this.dialog=e.currentTarget.detail.example; //此实例还可以其他地方调用，如果传入与props相同的字段则覆盖props内的相应值 this.dialog.show({ content:'<div style="color:#999">我是HTML字符串内容哦</div>', saveCallback:function(e){ console.log("我是点击的回调"，e) } }) } calendar:基础日历渲染器

说明：calendar组件为dateSelector的基础渲染组件，大部分参数相同，onexamplePipe使用也相同

示例代码

<!--wxml内--> <calendar type='range' monthShowNum='{{3}}' markerData="{{markerData}}" monthShowDate="2019-08-01" bindchange='ondatechange' bindcheckStart='oncheckStart' /> <!--js内--> data: { markerData:{ "2019-08-08": { bottom:"立秋"}, "2019-08-15": { bottom:"中元节"}, "2019-08-23": { bottom:"处暑"}, "2019-09-08": { bottom:"白露"}, "2019-09-10": { bottom:"教师节"}, "2019-09-13": { top:"休", bottom:"中秋"}, "2019-09-14": { top:"休"}, "2019-09-15": { top:"休"}, "2019-09-23": { bottom:"秋分"}, "2019-09-29": { top:"班"} }, }, ondatechange:function(e){ console.log(e) }, oncheckStart:function(e){ console.log(e) }, dateSelector:日历选择器（基于calendar、modal）

说明：examplePipe或许比较难以理解（因遵循小程序插件开发规范，props不能传入非json数据类型的数据，所以props不能传入function；故只能通过这种方式将一个条件方法注入实例内部；来实现最大灵活的的日期禁用状态渲染）

示例代码

<!--wxml内--> <dateSelector value="{{datevalue}}" bodyStyle='height:800rpx' monthShowNum='{{3}}' bindexamplePipe='dipachExample' bindchange='ondatechange' > <button>日期选择</button> </dateSelector> <!--js内--> dipachExample:function(e){ //实例管道会返回一个注入方法函数（当前只支持注入方法blackout） let now=new Date().getTime()-1000*60*60*24, setMethod = e.detail.setMethod; setMethod("blackout",(dateObj)=>{ return now <= dateObj.timeStamp }) } count:计数器

示例代码

<count max='{{10}}' bindchange='oncountchange' /> drawer:抽屉盒子

示例代码

<drawer switch='{{true}}' > <view slot='title'>我是标题</view> <view slot='content'>主体内容</view> </drawer> STBox/STItem:滚动吸顶盒子（组）

STBox

STItem

说明：STBox需与STItem配套使用

示例代码

<STBox boxStyle='height:700rpx'> <view>这些是正常的内容</view> <view>这些是正常的内容</view> <view>这些是正常的内容</view> <view>这些是正常的内容</view> <STItem STStyle='background-color:#fff;width:100%;' > <view>我是滚着滚着就吸顶的内容</view> </STItem> <view>这些是正常的内容</view> <view>这些是正常的内容</view> </STBox> Cslider:滑块组件（可双滑块）

示例代码

<!--wxml内--> <Cslider scale='{{testList}}' mode='custom' type='range' valueKey='label' bindchange='onsliderchange' /> <!--js内--> data:{ testList: [ {label:"item1",data:{test:"112212"}}, {label:"item2",data:{test:"112212"}}, {label:"item3",data:{test:"112212"}}, {label:"item4",data:{test:"112212"}}, {label:"item5",data:{test:"112212"}}, ] }, Ctab/CtabItem:选项卡（组）

Ctab

CtabItem

说明：Ctab与CtabItem需配套使用，CtabItem可以左右滑动来切换选择的值

示例代码

<Ctab current='{{0}}' bindchange='ontabchange' > <CtabItem title='我是标题1' icon='https://miniapp.scqcp.com/images/cityline_siji.png' itemStyle='padding:30rpx 0' > <view>我是内容1哦<view> </CtabItem> <CtabItem title='我是标题2' icon='https://miniapp.scqcp.com/images/cityline_ren.png' > 我是内容2 </CtabItem> </Ctab> Cinput:输入框（清除icon）

示例代码

<Cinput startIconColor='#ddd' clearColor='#ddd' /> LSDrawer:左滑抽屉/（删除）盒子

示例代码

<LSDrawer isOpen='{{true}}'> test2 </LSDrawer> Cheader:自定义导航栏

此header只具有导航条的样式，不具备回退（back）交互功能；如需返回上一页，请绑定back事件自行回退（受小程序插件约束，插件内部不能控制路由相关操作）

示例代码

<!--wxml内--> <Cheader boxStyle='color:#fff;background-color:#157CF0' bindexamplePipe='onexamplePipe' bindback='onback' >我是一个导航条</Cheader> <!--js内--> onexamplePipe:function(e){ console.log(e.detail,"这是导航条的高度，可根据此高度设置内容区域的padding或者margin防止导航条遮挡内容") }, onback:function(e){ console.log("这里可以控制路由返回")； wx.navigateBack({delta:1}) }, queue/queueItem:队列(组)

queue

queueItem

queue队列需要queueItem搭配使用；type为equipartition时可拓展为宫格；type为auto可拓展为tag选择标签

示例代码

<!--wxml内--> <queue type='equipartition' itemStyle='background-color:red;margin-right:10rpx' > <queueItem>我是老大</queueItem> <queueItem>-.-！我不想和你们玩了</queueItem> <queueItem>我是老三</queueItem> <queueItem>我是老四</queueItem> <queueItem>我是老五</queueItem> </queue> JS API

<!--page.js内可这样引入--> let { InitDateObj, //初始化时间类 patternGetValue, //取值模式 drillJSON, //下钻json数据 myFor, //循环 duplicateRemoval, //数组去重 hasKey, //判断对象是否含有某些值 formatCss, //格式化css字符串 cssObjToString, //将一个css样式对象转化为字符串 mergeCssStr, //合并css字符串、对象 Displacementer, //坐标换算类 initAryforJSON //初始化json数组 } = requirePlugin('BSTCommon') InitDateObj：初始化时间类（class）

此类为静态方法类，提供的方法如下：

此方法为模式取值方法，可用于组件内部取值模式由外部传入;返回一个按照传入模式取值后的值；

示例代码

<!--js内 已引入patternGetValue--> let testList=[ {label:"item1",data:{test:"112212"}}, {label:"item2",data:{test:"112212"}}, {label:"item3",data:{test:"112212"}}, {label:"item4",data:{test:"112212"}}, {label:"item5",data:{test:"112212"}}, ]; console.log(patternGetValue(testList,'[0].label')) //item1

小伙伴们JSapi文档暂时更新到这里，后续会继续更新