微信小程序--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);到这里一个组件就基本上完成好了。