小程序自定义控件（二）

1.目标写一个在项目中用的对话框。把各个知识点整合起来。

先看最后的效果图

图一

屏幕快照 2018-03-10 下午7.26.04.png

2.创建一个对话框

2.1 编写对话框的界面

2.1.1 对话框的wxml代码：

<!--pages/customComponent/customComponent.wxml-->
<view class='mask' hidden='{{isHide}}'>
  <view class='dialog'>
    <view class='title' hidden='{{hideTitle}}'>{{title}}</view>
    <view class='content'>{{content}}</view>
    <view class='btn'>
      <view class='cancel' catchtap='_cancelEvent'>{{cancelText}}</view>
      <view class='confirm' catchtap='_confirmEvent'>{{confirmText}}</view>
    </view>
  </view>
</view>

2.1.2 对话框的wcss代码：

/* pages/customComponent/customComponent.wxss */
.mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.dialog {
  position: fixed;
  display: inline-block;
  width: 80%;
  max-width: 600rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #d5d5d6;
  overflow: hidden;
}

.title {
  font-size: 18px;
  padding: 15px 15px 5px;
}

.content {
  padding: 15px 15px 5px;
  min-height: 40px;
  font-size: 16px;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-all;
  color: #999;
  border-bottom: 1px solid #d5d5d6;
}

.cancel, .confirm {
  display: inline-block;
  width: 50%;
  box-sizing: border-box;
  font-size: 17px;
  padding: 10px 0;
}

.cancel {
  color: #353535;
}

.confirm {
  color: #3cc51f;
  border-left: 1px solid #d5d5d6;
}

2.1.3 编写对话框的逻辑

// pages/customComponent/customComponent.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 弹窗标题
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '我就试试'
    },
    // 弹窗取消按钮文字
    cancelText: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    confirmText: {
      type: String,
      value: '确定'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 弹窗显示控制
    hideTitle: false,
    isHide: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /*
    * 公有方法
    */

    //隐藏弹框
    hideDialog() {
      this.setData({
        isHide: !this.data.isHide
      })
    },
    //展示弹框
    showDialog() {
      this.setData({
        isHide: !this.data.isHide
      })
    },
    //隐藏标题
    hideTitle(flag) {
      this.setData({
        hideTitle: flag
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _cancelEvent() {
      //触发取消回调
      this.triggerEvent("cancelEvent")
    },
    _confirmEvent() {
      //触发成功回调
      this.triggerEvent("confirmEvent");
    }
  }
})

在小程序的默认文件里面就有:组件的初始数据data、组件的属性列表properties、组件的方法列表methods。就好像一个类，一开始有初始数据，属性、方法。

3.在其他组件中使用这个对话框

3.1 配置文件里面声明

{
  "usingComponents": {
    "dialog": "/pages/customComponent/customComponent"
  }
}

3.2 在wxml文件中使用

<!--index.wxml-->
<dialog id='dialog' 
  title='我是标题'
  content='我是内容，我就想试试'
  cancelText='不试了'
  confirmText='试一试'
  bind:cancelEvent="_cancelEvent"  
  bind:confirmEvent="_confirmEvent"
></dialog>
<view catchtap='showDialog' >显示有标题的对话框</view>
<view catchtap='showDialogNoTitle'>显示没有标题的对话框</view>

3.3 在js文件中进行逻辑操作

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  },
  onReady: function () {
    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");
  },
  //事件处理函数
  showDialog: function() {
    console.log('showDialog');
    this.dialog.hideTitle(false);
    this.dialog.showDialog();
  },
  showDialogNoTitle: function () {
    this.dialog.hideTitle(true);
    this.dialog.showDialog();
  },
  _cancelEvent: function () {
    this.dialog.hideDialog();
  },
  _confirmEvent() {
    // 在此处写确定的逻辑代码
    console.log('_confirmEvent');
    this.dialog.hideDialog();
  }
})

最后的运行结果就是步骤二中呈现的了。

4.编写的思路总结

4.1 编写组件

这个可以分为：编写组件的界面、编写组件的逻辑。

4.2 使用组件

注意：首先要在配置文件中声明药使用的的组件；
然后在wxml文件引入要使用的组件。
最后在逻辑代码中进行控制。

5.参考地址

http://blog.csdn.net/rolan1993/article/details/78801052/
http://www.ifanr.com/minapp/966941