锐客网

  1. 首页 > it技术 > >

微信小程序--Loading组件

Loading组件

  • 这两天都在看微信小程序开发，在看的过程当中，也会自己写写，有的时候，这个时候就会想到，以前项目当中如ReactJs里会有一些公共的组件好多地方都要用到，于就是想着微信小程序里如何提取出来。
  • 在小程序里提取公共部分叫template。在其它页面上要用的时候，只要引用就可以了，下面就是如何创建一个的步骤吧，自己也标记一下。
  • 效果如下所示，所有完整的代码都github上找到。
    微信小程序--Loading组件
    文章图片
创建一个components目录 由于我个人喜爱，我会将我所有的组件都会继承一个父类，之前C#经常这样用，将一些通用的方法什么都写到父类里去，子类直接调用父类方法，省此代码量
创建一个BaseComponent.js 用于其它组件继承用的
里面的代码也很简单
微信小程序--Loading组件
文章图片

这里写代码片

创建一个loading目录
添加三个文件 loading.wxml,loading.wxss,loading.js。 微信小程序--Loading组件
文章图片

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

样式文件 也很简单，代码如下所示，
.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组件
    文章图片
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 = https://www.it610.com/article/{ 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 = https://www.it610.com/article/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(); }

【微信小程序--Loading组件】上面代码就一个组件基本上就OK了，里面用到了一个类 Utility，EventEmitter等，在这里就贴代码了，点击文件名称，就可能查看内容了。
引用组件 app.js
  • 为了以后组件使用方便，在app.js里先把组件引进来。
    微信小程序--Loading组件
    文章图片
现在有了组件，那怎么使用呢？在 .wxml里引用组件

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