huang-miniprogram
v1.0.3
Published
# 下载组件
Downloads
1
Readme
⭐️ huang-miniprogram
下载组件
步骤 1:安装到项目根目录下
cnpm i huang-miniprogram -S
步骤 2:构建 npm 包 (将 node_modules 变成公共组件直接用
开发工具左上角工具菜单 -》 构建npm包
开发工具右上角详情菜单 -》 本地设置 -》 使用npm模块
使用组件
xxx.json
{
"usingComponents": {
"qf-btn": "huang-miniprogram/button/button",
"qf-dashboard": "huang-miniprogram/dashboard/dashboard",
"qf-popup": "huang-miniprogram/popup/popup"
}
}
xxx.wxml
<qf-btn bindtap="handleClick">
hello,webopenfather
</qf-btn>
<qf-btn type="warn" bindtap="handleClick">
hello,神龙教主
</qf-btn>
<!-- <weapp-plugin-dashboard
min="0" // 最小值
max="100" // 最大值
val="50" // 当前值
width="750" // 组件宽度,单位rpx
height="400" // 组件高度,单位rpx
colors="{{myColors}}" // 仪表盘颜色分布
>
</weapp-plugin-dashboard> -->
<qf-dashboard
min="0"
max="100"
val="{{val}}"
width="750"
height="400"
colors="{{myColors}}"
>
</qf-dashboard>
<qf-btn bindtap="handleRandom">随机</qf-btn>
<qf-popup id='popup'
image='https://img1.baidu.com/it/u=1131661788,2256032093&fm=26&fmt=auto'
content='申请成功'
btn_no='立即发起活动'
btn_ok='成为认证用户'
bind:error="_error"
bind:success="_success">
</qf-popup>
<qf-btn bindtap="handlePopup">点击显示弹出层</qf-btn>
xxx.js
Page({
handleClick() {
console.log('handleClick')
},
handleRandom() {
const max = 100
const min = 0
this.setData({
val: Math.floor(Math.random() * (max - min + 1) - 1)
})
},
handlePopup() {
this.popup.showPopup()
},
onReady() {
// 获得popup组件
this.popup = this.selectComponent('#popup')
},
// 取消事件
_error() {
console.log('你点击了取消')
this.popup.hidePopup()
},
// 确认事件
_success() {
console.log('你点击了确定')
this.popup.hidePopup()
},
data: {
val: 30,
myColors: [{
percent: 50,
color: '#67C23A'
}, {
percent: 80,
color: '#E6A23C'
}, {
percent: 100,
color: '#F56C6C'
}]
},
})