关于小程序跨页面传值回调的一点点想法
写小程序时难免遇到组件里面套组件,例如自定义表单是一个组件,表单里有选择照片又是一个组件,这时如果想从照片选择组件直接把照片传给表单,而不是页面,就比较麻烦。(这里我没想到好办法,如果有大佬知道可以在评论区告知)
作者君本是一枚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);
},
这样就实现了跨界面跨组建的传值回调,这只是作者君的一点点想法,希望大佬有更方便更好用的办法,来指正下。毕竟不是精通小程序。
网友评论