小程序组件开发

本文分享小程序中组件开发
下面以开发一个弹框组件为例，组件支持声明式调用以及函数式调用
组件模板代码

  
  
    
      {{title}}
    
    {{message}} 
    
      
      {{cancelButtonText}}
      
      
      {{confirmButtonText}}
      
    
  

样式

/* components/dialog/dialog.wxss */

.mask {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 100;
}

.dialog-container {
  position: fixed;
  width: 80%;
  background: #fff;
  z-index: 101;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 16rpx;
}

.dialog-header {
  padding: 32rpx 0 2rpx;
  text-align: center;
}

.dialog-header_title {
  font-size: 32rpx;
  font-weight: bold;
}

.dialog-content {
  padding: 14rpx 20rpx 30rpx;
  text-align: center;
  font-size: 28rpx;
}

.dialog-footer {
  display: flex;
  height: 98rpx;
  align-items: center;
  border-top: 1px solid #eee;
}

.dialog-footer_btn {
  flex: 1;
  text-align: center;
  height: 100%;
  line-height: 98rpx;
  font-size: 32rpx;
}

.ok-btn {
  color: #4784ff;
}

.cancel-btn {
  color: #888;
}

组件代码

// components/dialog/dialog.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    confirmButtonText: {
      type: String,
      value: '确认'
    },
    cancelButtonText: {
      type: String,
      value: '取消'
    },
    title:{
      type:String,
      value:'提示'
    },
    message:{
      type:String,
      value:''
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showModal:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onCancel(){
      this.close()
      this.triggerEvent('on-cancel')
      this.data['onCancel'] && this.data['onCancel']()
    },
    onConfirm(){
      this.close()
      this.triggerEvent('on-confirm')
      this.data['onConfirm'] && this.data['onConfirm']()
    },
    close(){
      this.setData({
        showModal: false
      })
    }
  }
})

以上组件基本上就开发完成了。这样的组件可以通过声明式的方式来调用
在我们要调用的地方的json文件中声明

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

然后便可以在wxml中

接下来是介绍以函数的方式来调用组件。
首先让组件变成插件的形式

function getContext() {
  const pages = getCurrentPages();
  return pages[pages.length - 1];
}
const Dialog = options => {
  options = Object.assign(Object.assign({}, Dialog.currentOptions), options);
  const context = options.context || getContext();
  const dialog = context.selectComponent(options.selector);
  delete options.context;
  delete options.selector;
  if (dialog) {
    dialog.setData(options);
  }
  else {
    console.warn('未找到 van-dialog 节点，请确认 selector 及 context 是否正确');
  }
};
Dialog.defaultOptions = {
  showModal: true,
  title: '提示',
  message: '',
  selector: '#van-dialog',
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  showConfirmButton: true,
  showCancelButton: false
};
Dialog.alert = Dialog;
Dialog.confirm = options => Dialog(Object.assign({ showCancelButton: true }, options));
Dialog.setDefaultOptions = options => {
  Object.assign(Dialog.currentOptions, options);
};
Dialog.resetDefaultOptions = () => {
  Dialog.currentOptions = Object.assign({}, Dialog.defaultOptions);
};
Dialog.resetDefaultOptions();
export default Dialog;

这样我们在wxml中需要指定组件的id

在js代码中需要引入组件

import Dialog from '../../components/dialog/index.js'

 Dialog.confirm({
      message:'确定要提交吗？',
      onConfirm(){
        self.openAccount()
      }
    })

这样就完成了组件的调用。