小程序跨页面,跨组件,传值回调想法

2022-02-09  本文已影响0人  激动的厨师

关于小程序跨页面传值回调的一点点想法

   写小程序时难免遇到组件里面套组件,例如自定义表单是一个组件,表单里有选择照片又是一个组件,这时如果想从照片选择组件直接把照片传给表单,而不是页面,就比较麻烦。(这里我没想到好办法,如果有大佬知道可以在评论区告知)
   作者君本是一枚iOS原生开发者,对block比较熟悉,也喜欢用。所以我就想能不能直接用block回调的形式在小程序传值。
   小程序有个app.js的文件,因为app是全局唯一的,里面可以定义保存全局变量。就在app.js内定义了block模块的set方法,以及响应on方法。

// 跨界面,跨组件,解耦的传值、回调的方式。
  HRBlocks:[],
  hrSetBlock:function(key,fun,that){
    var needAdd = true;
    for(i = 0; i < this.HRBlocks.length; i++){
      let dic = this.HRBlocks[i];
      if(dic.key == key){
        needAdd = false;
        break;
      }
    }

    if(needAdd){
      this.HRBlocks.push({
        'key':key,
        'fun':fun,
        'that':that,
      });
    }
  },

  hrOnBlock:function(key,parm) {
    var fun;
    var that;
    var blockItemIndex;
    for(i = 0; i < this.HRBlocks.length; i++){
      let dic = this.HRBlocks[i];
      if(dic.key == key){
        fun = dic.fun;
        that = dic.that;
        blockItemIndex = i;
        break;
      }
    }
    if(fun){
      if(parm){
        fun(parm,that);
      }else{
        fun(that);
      }
      this.HRBlocks.splice(blockItemIndex,1);//移除响应
    }else{
      console.log('block回调数组中没有找到Key');
    }
    
  }

   之所以要传that进来,是发现如果不传,在回调的function方法里的this 不是当前的this。无法实现界面刷新赋值等操作。这里就是定义一个block的数组用来保存这些响应事件,用key,value的方式来保存,以便找到对应的function,采用哪里用哪里设置,用完就销毁释放。

用时定义设置block,这里参数第一个是key字符串,第二个是当前页面或者组件的function,第三个是this:

 //通用跳转点击
    onSelectCell: function (e) {
      console.log(e);
      App.hrSetBlock('SelectCustmerKey',this.custSelectCallBack,this); //用来回调的block方法
      let type = e.currentTarget.id;
      if(type == 'user' || type == 'parentcust'){//选择客户
        wx.navigateTo({
          url: "/pages/customerSelect/customerSelect",
        })
      }
    },

    /**
     * 客户选择block回调
     */
    custSelectCallBack(parm,that) {
      console.log(parm);
      console.log(that.data.reportinfo[0]);
      
    },

需要让block回调响应的方法很简单:

//点击cell
  onClickCell:function(e) {
    console.log(e.currentTarget.dataset.index);
    let index = e.currentTarget.dataset.index;
    let clickData = this.data.custData[index];
    // console.log(clickData);
    App.hrOnBlock('SelectCustmerKey',clickData);
  },

   这样就实现了跨界面跨组建的传值回调,这只是作者君的一点点想法,希望大佬有更方便更好用的办法,来指正下。毕竟不是精通小程序。

上一篇 下一篇

猜你喜欢

热点阅读