# dd-miniprogram-ui

> this is miniprogram

Latest version **1.1.1** (published 2022-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install dd-miniprogram-ui
pnpm add dd-miniprogram-ui
yarn add dd-miniprogram-ui
bun add dd-miniprogram-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-03-29 |
| First published | 2022-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 54.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | webopendd |
| Maintainers | webpoen-ww |

## Links

- npm: https://www.npmjs.com/package/dd-miniprogram-ui
- npm.io page: https://npm.io/package/dd-miniprogram-ui

## Recent versions

- 1.1.1 (latest) — 2022-03-29
- 1.1.0 — 2022-03-29
- 1.0.0 — 2022-03-29

## README

# ⭐️ dd-miniprogram-ui

# 下载组件

步骤 1：安装到项目根目录下

```
cnpm i dd-miniprogram-ui -S

```

步骤 2：构建 npm 包 （将 node_modules 变成公共组件直接用

```
开发工具左上角工具菜单 -》 构建 npm 包

```

# 使用组件

## xxx.json

```
{
"usingComponents": {
"qf-btn": "dd-miniprogram-ui/button/button",
"qf-dashboard": "dd-miniprogram-ui/dashboard/dashboard",
"qf-popup": "dd-miniprogram-ui/popup/popup"
}
}

```

## xxx.wxml

```
<qf-btn bindtap="handleClick">
hello
</qf-btn>

<qf-btn type="warn" bindtap="handleClick">
welcome
</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'
}]
},
})

```

---
_Source: https://npm.io/package/dd-miniprogram-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._