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 | | 右侧按钮背景颜色 |