[移动开发]微信小程序自定义弹框+生成二维码功能

最近在做小程序的功能，需求是弹框生成二维码功能，所以根据需求自定义了一个弹框组件，后续其他地方也可以用到。

最后效果图如下

?

dialog部分

<!--components/dialog/dialog.wxml-->
<view class='dialog-custom' wx:if="{{visible}}">
  <view class='dialog-mask' bindtap="clickMask"></view>
  <view class="dialog-main">
    <view class="dialog-container">
      <view class='dialog-container__title' wx:if="{{title.length>0}}">
        <view class='title-label'>{{ title }}</view>
          <view class='title-icon'>
            <van-icon wx:if="{{showClose}}" bindtap='close' name="cross" />
          </view>
      </view>
      <view class='dialog-container__body'>
        <slot name="dialog-body"></slot>
      </view>
      <view class='dialog-container__footer' wx:if="{{showFooter}}">
        <view class='dialog-container__footer__cancel' bindtap="close">取消</view>
        <view class='dialog-container__footer__confirm' bindtap='confirm'>确定</view>
      </view>
    </view>
  </view>
</view>

Component({
  /**
  * 组件的属性列表
  */
  properties: {
  　　visible: {
  　　　　type: Boolean,
  　　　　value: false
  　　},
  　　width: {
  　　　　type: Number,
  　　　　value: 85
  　　},
  　　position: {
  　　　　type: String,
  　　　　value: 'center'
  　　},
  　　title: {
  　　　　type: String,
  　　　　value: '提示'
  　　},
  　　showClose: {
  　　　　type: Boolean,
  　　　　value: true
  　　},
  　　showFooter: {
  　　　　type: Boolean,
  　　　　value: false
  　　},
  },
  
  /**
  * 组件的初始数据
  */
  data: {
   
  },
  options:{
  　　multipleSlots: true
  },
  /**
  * 组件的方法列表
  */
  methods: {
    clickMask() {
      this.setData({ visible: false });
    },
　　close(){
　　　　this.setData({ visible: false });
　　},
　　cancel() {
　　　　this.setData({ visible: false });
　　　　this.triggerEvent('cancel');
　　},
　　confirm() {
　　　　this.setData({ visible: false });
　　　　this.triggerEvent('confirm');
　　}
  }
})

{
  "component": true,
  "usingComponents":{}
}

.dialog-custom {
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
}
  
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
  
.dialog-main {
  position: fixed;
  z-index: 10001;
  top: 50%;
  left: 0;
  right: 0;
  width: 85vw;
  height: auto;
  margin: auto;
  transform: translateY(-50%);
}
  
.dialog-container {
  margin: 0 auto;
  background: #fff;
  z-index: 10001;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 40rpx;
}
  
  .dialog-container__title {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.dialog-container__title .title-label{
  display: inline-block;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 36rpx;
  color: #000;
  text-align: center;
}
  
.dialog-container__title .title-icon{
  width: 34rpx;
  height: 50rpx;
  position: absolute;
  top: 0;
  right: 0;
}
  
.dialog-container__body {
  padding-top: 10rpx;
  font-size: 32rpx;
  line-height: 50rpx;
  padding: 0rpx 0 60rpx;
  text-align: center;
}
  
.dialog-container__footer {
  height: 76rpx;
  line-height: 76rpx;
  font-size: 32rpx;
  text-align: center;
  border-top: 1px solid #f1f1f1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
  
.dialog-container__footer .dialog-container__footer__cancel {
  width: 50%;
  color: #999;
  display: inline-block;
}
  
.dialog-container__footer .dialog-container__footer__cancel::after{
  position: absolute;
  right: 50%;
  bottom: 0;
  content: '';
  width: 2rpx;
  height: 76rpx;
  background: #f1f1f1;
}
  
.dialog-container__footer .dialog-container__footer__confirm {
  color: #3B98F7;
  width: 50%;
  display: inline-block;
  text-align: center;
}

引用页面部分

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

<dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="{{titleVisible}}">
    <view class='dialog-body' slot="dialog-body">
      <view class='dialog-content'>
        <view class="dialog-url">
          <van-cell-group>
            <van-field
              value="{{ url }}"
              center
              use-button-slot
            >
              <van-button slot="button" size="small" type="info" bindtap="handleCopy">
                复制
              </van-button>
            </van-field>
          </van-cell-group>
        </view>
        <view class='dialog-canvas'>
          <canvas style="width: 400rpx; height: 400rpx;" canvas-id='canvas'></canvas>
        </view>
        <view class="dialog-text">扫码二维码快速加入</view>
      </view>
    </view>
  </dialog>

.dialog-canvas{
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-text{
  color:rgb(0, 122, 255);
  padding: 10rpx 0;
}

const app = getApp();
const QRCode = require("../../../utils/weapp-qrcode.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dialogVisible:true,
    footerVisible:false,
    titleVisible:'测试',
    url:'https://blog.csdn.net/Fansr_'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  handleQRCode(){
    //生成二维码
    let size = {}
    size.w = wx.getSystemInfoSync().windowWidth / 750 *600
    size.h = size.w
    var qrcode = new QRCode('canvas', {
      text: this.data.url,
      width: size.w,
      height: size.h,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  },

  //执行复制
  handleCopy(){
    wx.setClipboardData({
      data: this.data.url,
      success: function (res) {
        wx.getClipboardData({
          success (res) {
            wx.showToast({
              title: '复制成功',
            })
          }
        })
      }
    })
  },
})

生成二维码需要用到weapp-qrcode.js，下载https://github.com/tomfriwel/weapp-qrcode/blob/master/utils/weapp-qrcode.js点开链接保存到相应的位置,我放在/utils/weapp-qrcode.js文件里。

其他页面样式根据实际进行相应调试即可。