微信小程序：弹框

一、自定义弹框组件

1、组件定义

在components目录下创建dialog文件夹，然后选择文件夹，右键，点击"新建Component"，就会创建四个文件。如下所示：

wxml

<!--components/dialog/index.wxml-->
<view wx:if="{{isShow}}" class="tip-area">
  <view bindtap="hideClick" class="dialog-content">
    
    <view class="tip-content">
        <view class="title">
            <text>{{title}}</text>
        </view>
        <text  decode="true" style="margin-left:20rpx;">{{contentStr}}</text>
    </view>
    <view class="btn-content">
      {{btnStr}}
    </view>
  </view>
</view>

js

// components/dialog/index.js
Component({
    properties: {
      isShow: {//false:弹出框消息  true:弹出框显示
        value: false,
        type: Boolean
      },
      contentStr:{//弹出框需要显示的内容
        value: '内容',
        type: String,
      },
      title:{//弹出框需要显示的内容
        value: '标题',
        type: String,
      },
      btnStr:{//按钮文本(可进行自行扩展两个按钮)
        value: '确定',
        type: String,
      }
    },
    data: {
      timeId: null,//弹出框消息倒计时标识
    },
    observers: {//监听isShow属性的变化，来进行判断是否显示弹出框
      "isShow": function (value) {
        clearTimeout(this.data.timeId);
        if (value) {
          this.data.timeId = setTimeout(() => {
            this.setData({
              isShow: false,
            });
          }, 20000);
        }
      }
    },
    methods: {
      hideClick() {//点击弹出框的任意位置进行点击事件的传递，从而修改isShow的值，来控制弹出框消失
        this.triggerEvent('clickDialog', {
          isShow: false
        });
        clearTimeout(this.data.timeId);
      }
    },
  })

wxss

/* components/dialog/index.wxss */
.tip-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
  }
  
  .dialog-content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .dialog-content .title{
      width: 100%;
      text-align: center;
      line-height: 70rpx;
      height: 70rpx;
      /* background-color: green; */
      font-size: 36rpx;
      margin-bottom: 20rpx;
  }
  .tip-content {
      padding:40rpx;
    background: white;
    width: 80vw;
    height: 44vw;
    border-radius: 20rpx 20rpx 0 0;
    box-sizing: border-box;
    /* line-height: 34vw; */
    /* text-align: center; */
    font-size: 28rpx;
    color: black;
    border-bottom: .5rpx solid #e8e8e9;
    padding-top: 40rpx;
  }
  
  .btn-content{
    width: 100%;
    height: 10vw;
    border-radius: 0 0 20rpx 20rpx;
    background: white;
    text-align: center;
    line-height: 10vw;
    font-size: 32rpx;
  }

2、组件的使用

（1）、页面的json文件中引入

{
    "usingComponents": {
        "dialog": "/components/dialog/index"
    }
}

（2）、点击事件

<view class="rules_desc"  bindtap="showDialog">
                <text>规则说明</text>
            </view>

（3）、使用组件

<dialog bind:clickDialog="clickDialog" isShow="{{isShow}}" contentStr="&ensp;&ensp;积分以自然年为计算单位，三年为一个有效期，实行滚动清零，每年12月底执行。即您在第一年获得的积分，只要在第三年年底之前使用都有效。" btnStr="确定" title="积分规则说明"></dialog>

（4）、js中

Page({
  data: {
    isShow: false,//true：显示弹出框  false：隐藏弹出框
  },
  showDialog(e){//显示弹出框
    this.setData({
      isShow: true,
    })
  },
  clickDialog(e){//接受弹出框点击反馈监听事件，来进行隐藏弹出框
    this.setData({
      isShow: e.detail.isShow,
    })
  },
})

效果如下：

二、页面中写弹框组件

以下是弹框显示二维码的代码

wxml

<view wx:if="{{isShow}}" class="tip-area">
  <view class="dialog-content">
    <view class="tip-content">
        <view class="title">
            <text>二维码</text>
        </view>
        <view class="qrcode">
            <canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;' ></canvas>
        </view>
    </view>
    <view class="btn-content" bindtap="hideClick">
      取消
    </view>
  </view>
</view>

less

.tip-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    .dialog-content{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80vw;
        height: auto;
        display: flex;
        flex-direction: column;
        .tip-content {
            padding:40rpx;
            background: white;
            width: 80vw;
            height: 70vw;
            border-radius: 20rpx 20rpx 0 0;
            box-sizing: border-box;
            /* line-height: 34vw; */
            /* text-align: center; */
            font-size: 28rpx;
            color: black;
            border-bottom: .5rpx solid #e8e8e9;
            padding-top: 40rpx;
            .title{
                width: 100%;
                text-align: center;
                line-height: 70rpx;
                height: 70rpx;
                /* background-color: green; */
                font-size: 36rpx;
                margin-bottom: 20rpx;
            }
            .qrcode{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 60rpx;
                margin-bottom: 60rpx;
            }
        }
        .btn-content{
            width: 100%;
            height: 10vw;
            border-radius: 0 0 20rpx 20rpx;
            background: white;
            text-align: center;
            line-height: 10vw;
            font-size: 32rpx;
          }
      }
  }
  

js

data: {
    isShow: false,
    qrCodeLink: null,
    qrcodePath: null,
  },
  showQrcode(e){
    this.setData({
      isShow: true
    })
    console.log(e)
    const {code} = e.currentTarget.dataset;
    this.setData({
      qrCodeLink: code
    })
    this.createQrcode(code)
    
  },
  hideClick(){
    this.setData({
      isShow: false,
      qrCodeLink: null,
      qrcodePath: null
    })
  },
  // 生成二维码
createQrcode(code) {
  var that = this;
  const query = wx.createSelectorQuery()
  query.select('#qrcode')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      console.log(res)
      var canvas = res[0].node
 
      // 调用方法drawQrcode生成二维码
      QRCode({
        canvas: canvas,
        canvasId: 'qrcode',
        // width:that.createRpx2px(300),
        // width: that.createRpx2px(300),
        // padding: 10,
        // background: '#ffffff',
        // foreground: '#000000',
        text: code
      })
 
      // 获取临时路径（得到之后，想干嘛就干嘛了）
      wx.canvasToTempFilePath({
        canvasId: 'qrcode',
        canvas: canvas,
        x: 0,
        y: 0,
        success(res) {
          // console.log('二维码临时路径：', res.tempFilePath)
          that.setData({
            qrcodePath: res.tempFilePath,
            // isShow: true
          })
          
          // console.log('二维码临时路径：', that.data.qrcodePath)
        },
        fail(res) {
          console.error(res)
        }
      })
    })
  },

效果如下：