微信小程序实现Dialog自定义组件

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计。令用户的使用感知更加统一。

微信开发网页时用到的是WEUI：

• GitHub地址
• 官网
• weui.js
• Demo

里面weui-master是UI静态模板，weui.js-master简单封装了一些常用的方法，使用起来比较方便（比如dialog，直接js调用weui.dialog({ title: '', content: ''});）。

WEUI同时也给小程序提供了一个版本GitHub地址。

等等，我今天要讲什么来着

今天主要想通过小程序自定义组件来实现WEUI里的dialog弹窗功能。效果是这样的：

dialog弹窗

首先创建组件dialog，配置好json文件（{ "component": true}）。确定弹窗的结构：

<view>
    <view class="ys-mask"></view><!-- 遮罩层 -->
    <view class="ys-dialog">
        <view class="ys-dialog-title">弹窗标题</view>
        <view class="ys-dialog-content">弹窗内容</view>
        <view class="ys-dialog-bottom">
            <view class="ys-dialog-btn" >取消</view>
            <view class="ys-dialog-btn ys-dialog-ok-btn" >确定</view>
        </view>
    </view>
</view>

写下wxcss：

.ys-mask{
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.ys-dialog{
  position: fixed;
  z-index: 5000;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}
.ys-dialog-title{
  padding:1.3em 1.6em 0.5em;
  font-weight:400;
  font-size: 18px;
}
.ys-dialog-content{
  padding: 0 1.6em 0.8em;
  min-height: 40px;
  font-size: 15px;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-all;
  color: #808080;
}
.ys-dialog-bottom{
  position: relative;
  line-height: 48px;
  font-size: 18px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.ys-dialog-bottom:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.ys-dialog-btn{
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  color: #353535;
  line-height: 48px;
  font-size: 18px;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ys-dialog-ok-btn{
  color: #09BB07;
}
.ys-dialog-btn:active{
  background-color:#eee;
}
.ys-dialog-btn:after{
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

记得配置下index.json ({ "usingComponents": {"dialog":"../component/dialog/dialog" }})，还有dialog初始化下Component({})。运行后看到的结果是：

静态页面效果

接下来要将弹窗静态页面改成属性配置。页面结构改成如下：

<view hidden="{{!isShow}}">
    <view class="ys-mask"></view>
    <view class="ys-dialog">
        <view class="ys-dialog-title">{{title}}</view>
        <view class="ys-dialog-content">{{content}}</view>
        <view class="ys-dialog-bottom">
            <view class="ys-dialog-btn">{{cancelText}}</view>
            <view class="ys-dialog-btn ys-dialog-ok-btn" >{{okText}}</view>
        </view>
    </view>
</view>

Component({
  properties: {
    title: {
      type: String,
      value: '弹窗标题'
    },
    content: {
      type: String,
      value: '弹窗内容'
    },
    cancelText: {
      type: String,
      value: '取消'
    },
    okText: {
      type: String,
      value: '确定'
    }
  },
  data: {
    isShow: false
  },
  methods: {
    show: function(){
      this.setData({
        isShow: true
      })
    },
    close: function(){
      this.setData({
        isShow: false
      })
    }
  }
})

index

<button bindtap="tapDialog">显示弹出框</button>
<dialog id="dialog"></dialog>

Page({
  onReady: function () {
    this.dialog = this.selectComponent('#dialog');
  },
  tapDialog:function(){
    this.dialog.setData({
      title:'温馨提示',
      content:'您就是我的Master吗？',
      cancelText:'滚！',
      okText:'是的,Saber!'
    });
    this.dialog.show();
  }
})

运行效果如下：

自定义弹窗 感觉就是这个样子

最后在加上事件就差不多了。
事件通过组件的triggerEvent()触发引用页面的方法，代码如下：

index页面

<button bindtap="tapDialog">显示弹出框</button>
<dialog id="dialog" bind:cancelEvent="cancelEvent" bind:okEvent="okEvent"></dialog>

Page({
  onReady: function () {
    this.dialog = this.selectComponent('#dialog');
  },
  tapDialog:function(){
    this.dialog.setData({
      title:'温馨提示',
      content:'您就是我的Master吗？',
      cancelText:'滚！',
      okText:'是的,Saber!'
    });
    this.dialog.show();
  },
  cancelEvent: function(){
    console.log(this.dialog.data.cancelText);
    this.dialog.close();
  },
  okEvent: function(){
    console.log(this.dialog.data.okText);
    this.dialog.close();
  }
})

dialog页面

<view hidden="{{!isShow}}">
    <view class="ys-mask"></view>
    <view class="ys-dialog">
        <view class="ys-dialog-title">{{title}}</view>
        <view class="ys-dialog-content">{{content}}</view>
        <view class="ys-dialog-bottom">
            <view class="ys-dialog-btn" catchtap="_cancelEvent">{{cancelText}}</view>
            <view class="ys-dialog-btn ys-dialog-ok-btn" catchtap="_okEvent">{{okText}}</view>
        </view>
    </view>
</view>

Component({
  properties: {
    title: {
      type: String,
      value: '弹窗标题'
    },
    content: {
      type: String,
      value: '弹窗内容'
    },
    cancelText: {
      type: String,
      value: '取消'
    },
    okText: {
      type: String,
      value: '确定'
    }
  },
  data: {
    isShow: false
  },
  methods: {
    show: function(){
      this.setData({
        isShow: true
      })
    },
    close: function(){
      this.setData({
        isShow: false
      })
    },
    _cancelEvent: function(){
      this.triggerEvent('cancelEvent');
    },
    _okEvent: function(){
      this.triggerEvent('okEvent');
    }
  }
})

最后效果如下：

自定义组件弹窗效果

文章到此就结束了 _ (:зゝ∠) _

撤了~~~