小程序模板网

微信小程序页面通讯以及组件化的一些思考

2018-04-16 过手货

作者:Uheinanba,来自原文地址

 

组件页面通信

  • 使用globalData或者storage的弊端(造成的隐蔽的bug)。
  • 使用eventBus的问题。(使用复杂)

尝试解决方案

  • event + emit
  • invoke(推荐)
 

混合(mixin)

混合可以将组之间的可复用部分抽离,从而在组件中使用混合时,可以将混合的数据,事件以及方法注入到组件之中。混合分为两种:

  • 默认式混合
  • 兼容式混合

    1. 默认式混合 
      对于组件data数据,events事件 采用默认式混合,即如果组件未声明该数据,组件,事件,自定义方法等,那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。

    2. 兼容式混合 
      对于组件methods响应事件,以及小程序页面事件将采用兼容式混合,即先响应组件本身响应事件,然后再响应混合对象中响应事件。

event.js

 

  1. var events = {};
  2.  
  3. function on(name, self, callback) {
  4. var tuple = [self, callback];
  5. var callbacks = events[name];
  6. if (Array.isArray(callbacks)) {
  7. callbacks.push(tuple);
  8. } else {
  9. events[name] = [tuple];
  10. }
  11. }
  12.  
  13. function remove(name, self) {
  14. var callbacks = events[name];
  15. if (Array.isArray(callbacks)) {
  16. events[name] = callbacks.filter((tuple) => {
  17. return tuple[0] != self;
  18. })
  19. }
  20. }
  21.  
  22. function emit(name, data) {
  23. var callbacks = events[name];
  24. if (Array.isArray(callbacks)) {
  25. callbacks.map((tuple) => {
  26. var self = tuple[0];
  27. var callback = tuple[1];
  28. callback.call(self, data);
  29. })
  30. }
  31. }
  32.  
  33. exports.on = on;
  34. exports.remove = remove;
  35. exports.emit = emit;

invoke.js

 

  1. function getAllPages() {
  2. let stack = getCurrentPages();
  3. // 第一个入栈
  4. stack.forEach((item) => {
  5. if (myStatcks.length === 0) {
  6. myStatcks = stack.concat();
  7. } else {
  8. for (let i = 0, _len = myStatcks.length; i < _len; i++) {
  9. let ele = myStatcks[i];
  10. if (ele.__route__ === item.__route__) {
  11. myStatcks[i] = item;
  12. break;
  13. } else {
  14. myStatcks.push(item);
  15. break;
  16. }
  17. }
  18. }
  19. });
  20. // }
  21. return myStatcks;
  22. }
  23.  
  24. module.exports = function $invoke(router, method, args) {
  25. let pages = getAllPages();
  26. let targetPage;
  27. for (let index = 0, _len = pages.length; index < _len; index++) {
  28. if (pages[index].__route__ === router) {
  29. targetPage = pages[index];
  30. break;
  31. }
  32. }
  33. targetPage[method].call(targetPage, ...args);
  34. }


本文地址:https://www.eyoucms.com/wxmini/doc/course/23467.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询