微信小程序 MaterialDesign(1)---- button(涟漪)

本文用来介绍关于如何在微信小程序中实现materia风格的ui化

注意：该ui使用微信小程序原生语法，动画均使用animate以及过渡效果实现，未使用微信的api创建动画

1.准备

创建一个自定义组件 sc-button

在sc-button.json中指明这是一个自定义组件

{
  "component":true
}

2. 封装button

2.1 初始html格式

<button class="btn-class">
    <slot></slot>
</button>

2.2 处理微信原生事件以及指令

微信小程序的button有很多内置的微信指令例如 open-type,size,plain 等以及原生的方法如getuserinfo,getphonenumber 等 所以我们封装button的时候要把这些能力进行相应的处理。
可以分为两类：一种是指令，一种是事件，
指令 可以从properties里将微信原生的button的所有指令声明，然后直接赋值到内部封装的button里。
事件 我们可以根据事件的捕获冒泡以及open-type的唯一性，让其在触发后根据open-type选择事件直接冒泡到外层即可，但是需要将获取的value也传递出去
例如：

properties: {
        openType: {
            type: String
        },
        size: {
            type: String,
            value: 'default'
        },
        plain: {
            type: Boolean,
            value: false
        }
},
data: {
        // 事件的map表
        openTypeToBindEvent: {
            'getUserInfo': 'getuserinfo',
            'getphonenumber': 'getphonenumber',
            'launchApp': 'error',
            'contact': 'contact'
        }
},
methods: {
        // 绑定未冒泡的事件手动触发到上一层
        _returnEventData(e) {
            this.triggerEvent(`${
  this.data.openTypeToBindEvent[this.properties.openType]}`);
        }
}

然后直接赋值到button里，注意，这里需要判断一下值是否存在

<button class="btn-class"
        bind:getuserinfo="{
   {
   openType === 'getUserInfo' ? '_returnEventData' : '' }}"
        bind:getphonenumber="{
   {
   openType === 'getphonenumber' ? '_returnEventData' : '' }}"
        bind:error="{
   {
   openType === 'launchApp' ? '_returnEventData' : '' }}"
        bind:contact="{
   {
   openType === 'contact' ? '_returnEventData' : '' }}"
        open-type="{
   {
   openType || ''}}"
        size="{
   {
   size || ''}}"
        plain="{
   {
   plain || ''}}"
>
    <slot></slot>
</button>

2.3 material 的 涟漪实现

2.3.1 重置/增加button的一些样式