微信小程序--Loading组件

Loading组件

• 这两天都在看微信小程序开发，在看的过程当中，也会自己写写，有的时候，这个时候就会想到，以前项目当中如ReactJs里会有一些公共的组件好多地方都要用到，于就是想着微信小程序里如何提取出来。

• 在小程序里提取公共部分叫template。在其它页面上要用的时候，只要引用就可以了，下面就是如何创建一个的步骤吧，自己也标记一下。

• 效果如下所示，所有完整的代码都github上找到。
  

创建一个components目录

由于我个人喜爱，我会将我所有的组件都会继承一个父类，之前C#经常这样用，将一些通用的方法什么都写到父类里去，子类直接调用父类方法，省此代码量

创建一个BaseComponent.js 用于其它组件继承用的

里面的代码也很简单

这里写代码片

创建一个loading目录

添加三个文件 loading.wxml,loading.wxss,loading.js。

loading.wxml里的内容

• name必须要有的，要其它页面的时候要用到的。里面也很简单，一个svg文件，一个显示的内容 Title

<template name="XtnLoading">
  <view class="loadingCss" bindtap="onCloseLoading" wx:if="{{IsShow===true}}">
    <view class="content">
      <image class="loading" src="/components/loading/svg/loading.svg" background-size="cover"></image>
      <view class="title">{{Title}}</view>
    </view>
  </view>
</template>

样式文件 也很简单，代码如下所示，

.loadingCss {
  padding: 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  font-size: 16px;
}

.loadingCss .content {
  padding: 20px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.loadingCss .content .title {
  text-align: center;
}

.loadingCss .content .loading {
  width: 48px;
  height: 48px;
}

• 这时要注意呀，如果要想让他起作用的话,得要在app.wxss里引入一下
  

loading.js里的代码了。

import { Utility, BaseComponent } from '../Core';
class loading extends BaseComponent{
  constructor() {
    super();
  }
}
const Loading = new loading();
export { Loading };

• 添加OnInit初始化方法：

  /**
   * 初始化操作
   * 
   * @memberof loading
   */
  OnInit() {
    // 调用父类方法
    this.__Init(Utility);
    // 添加事件监听
    this.ListenerEvent();
    this.data.TData = { Title: '加载中...', IsShow: false };
    // 这人很重要，如果想让组件里有事件的话，必须把事件绑定到当前Page上去
    // 下面就是将当前类中的事件，绑定到页面上。
    this.__CurrentPage.onCloseLoading = this.onCloseLoading.bind(this);
    this.__UpdateData();
  }

• OnDestroy 方法

  /**
   * 销毁事件，请在 页面 onHide 或 onUnload的时候，调用此方法
   * 
   * @memberof loading
   */
  OnDestroy() {
    Object.keys(this.LoadingEventInfo || {}).forEach((key) => {
      const value = this.LoadingEventInfo[key];
      Utility.$RemoveEvent(key, value);
    });
  }

• __UpdateData 方法

  /**
   * 更新数据，通知页面宣染用的
   * 
   * @memberof loading
   */
  __UpdateData() {
    this.setData(this.data);
  }

• ListenerEvent 监听事件方法，通过监听事件来修改当前template里的数据

  /**
   * 监听事件方法
   * 
   * @memberof loading
   */
  ListenerEvent() {
    const { onLoading, onLoadingHide } = Utility.$ConstItem.Events.ShowModel;
    const self = this;
    const __Update = (isShow) => {
      this.data.TData.IsShow = isShow;
      this.__UpdateData();
    };
    const LoadingIndex = Utility.$On(onLoading, () => {
      __Update(true);
    });
    const LoadingHide = Utility.$On(onLoadingHide, () => {
      __Update(false);
    });
    const EventInfo = {};
    EventInfo[onLoading] = LoadingIndex;
    EventInfo[onLoadingHide] = onLoadingHide;
    this.LoadingEventInfo = EventInfo;
  }

• onCloseLoading 关闭方法

/**
   * 关闭操作
   * 
   * @memberof loading
   */
  onCloseLoading() {
    this.data.TData.IsShow = !this.data.TData.IsShow;
    this.__UpdateData();
  }

上面代码就一个组件基本上就OK了，里面用到了一个类 Utility，EventEmitter等，在这里就贴代码了，点击文件名称，就可能查看内容了。

引用组件

app.js

• 为了以后组件使用方便，在app.js里先把组件引进来。
  

现在有了组件，那怎么使用呢？在 .wxml里引用组件

<import src="../../components/loading/loading.wxml" />

引用了，可是在什么地方如何使用它呢？

<template is="XtnLoading" data="{{...TData}}"/>

or 
<view>
  <template is="XtnLoading" data="{{...TData}}"/>
</view>

• TData 这个在就是要传给组件的数据了，在组件的js里，是不是也能找到 TData 这个东西吧。要自己的类里操作，这样就不用到所在的Page里操作TData了，个人觉得这样代码分开好些。

在.js里使用它

• 这样使用方便吧，组件就初始化好了，可以用了。第一图里，点击button的时候，弹出Loading来，button绑定的事件

  /**
   * 弹出Loading组件，2秒后关闭
   * 
   */
  onTapLoading() {
    Utility.$Loading();
    let times = 2;
    this.data.LoadingTitle = '将在(' + times + ')后隐藏';
    this.setData(this.data);
    const Interval = setInterval(() => {
      times--;
      this.data.LoadingTitle = '将在(' + times + ')后隐藏';
      this.setData(this.data);
      if (times === 0) {
        this.data.LoadingTitle = '点击显示Loading弹框';
        Utility.$LoadingHide();
        clearInterval(Interval);
      }
    }, 1000);

到这里一个组件就基本上完成好了。

本例子的所有代码 点击 这里可以获取, 里面还写一个tabs的组件及使用。