1.0.4 • Published 3 years ago
szjz-components v1.0.4
szjz-components
小程序自定义组件
安装和使用
1.在小程序根目录中执行(如小程序之前就使用过npm包可忽略本步骤)
npm init
2.执行
npm i szjz-components -S --production
3.在微信工具栏中,工具->构件npm
4.在微信开发者工具中,右上角详情->基础设置->使用npm模块
5.在小程序json配置文件中配置
"usingComponents": {
"nav-bar": "szjz-components/nav-bar/nav-bar"
}
6.在小程序中使用组件
<nav-bar title='二十二冶'></nav-bar>
配置参数
<nav-bar
title='二十二冶'
isBack='true'
isOther='true'
otherName='/assets/image.png'
>
</nav-bar>
- title:标题名称
- isBack:是否有返回按钮
- isOther:是否显示自定义图标
- otherName:自定义图标名称
签名组件使用 autograph-item
json文件中配置
"usingComponents": {
"autograph-item": "szjz-components/autograph-item/autograph-item"
}
wxml中使用
<autograph-item></autograph-item>
属性描述
属性名 | 描述 | 备注 |
---|---|---|
canvasWidth | 默认值 100% | 画布宽度 |
canvasHeight | 默认值 150px | 画布高度 |
lineWidth | 默认值 6 | 签名线条宽度 |
lineColor | 默认值 black | 签名线颜色 |
hasText | 默认值 false | 是否显示画布中间文字 |
text | 默认值 签名 | 前提条件 hasText 值为 true |
textColor | 文字颜色 | |
fontSize | 文字大小 | |
hasBorder | 默认值 false | 画布是否有边框 |
borderWidth | 边框宽度 hasBorder 为true 生效 | |
borderColor | 边框颜色hasBorder 为true 生效 | |
borderStyle | sold dotted dashed | 边框样式hasBorder 为true 生效 |
hasBottomButton | 默认值 true | 是否有底部按钮 |
leftText | 左侧按钮文字内容 | |
rightText | 右侧按钮文字内容 | |
leftBGColor | 左侧按钮背景颜色 | |
rigthBGColor | 右侧按钮背景颜色 |