美文网首页
小程序跨页面,跨组件,传值回调想法

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

作者: 激动的厨师 | 来源:发表于2022-02-09 13:31 被阅读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);
  },

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

相关文章

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

    关于小程序跨页面传值回调的一点点想法    写小程序时难免遇到组件里面套组件,例如自定义表单是一个组件,表单里有选...

  • 微信小程序 页面传值详解

    微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator,...

  • 关于微信小程序页面传值

    方向: 1,跨页面传值 2,input输入框值得获取方式 进程: 1,跨页面传值方式 ->借由navigatio...

  • 微信小程序自定义组件传值问题

    微信小程序自定义组件传值问题 自定义组件 · 小程序 父组件(引用组件的页面模板)页面 子组件页面 表示父组件页面...

  • vue组件间通信

    本文主要介绍父->子、子->父、兄弟组件间、跨级组件间的传值方式。 一、props【父->子】 在父组件页面使用v...

  • 微信小程序系列4——传值详解

    前言   在开发程序过程中,会遇到各种各样的传值的情景,例如:页面之间的传值、回调、代理、通知等。而在微信小程序中...

  • js对通过url传值转码问题

    今天遇到一个问题,跨域调其他系统接口,需要传一个回调地址过去,由于是单页面应用,回调地址中存在特殊字符‘#’...

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • Vue 组件传值

    一、组件间通信传值的各种方式与场景 1、父组件向子组件(跨级)传值 1.1 父组件通过props给子组件传值 1....

  • iOS 六种基本的传值方式

    1、属性传值 利:正向传值、简单单一 弊:不能反向传值,也不能 跨页面传值 NextViewController*...

网友评论

      本文标题:小程序跨页面,跨组件,传值回调想法

      本文链接:https://www.haomeiwen.com/subject/zjuwkrtx.html