⭐️ mollyhlw-miniprogram

下载组件

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

cnpm i mollyhlw-miniprogram -S

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

开发工具左上角工具菜单 -》 构建npm包
开发工具右上角详情菜单 -》 本地设置 -》 使用npm模块

使用组件

xxx.json

{
  "usingComponents": {
    "qf-btn": "mollyhlw-miniprogram/button/button",
    "qf-dashboard": "mollyhlw-miniprogram/dashboard/dashboard",
    "qf-popup": "mollyhlw-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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F00%2F87%2F12%2F58daf8bf05ac7_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659938889&t=d389f4f7fc77fbfbb1556cb8153c8fab'
    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'
    }]
  },
})