258资源分享网

一：页面关闭数据传递在页面关闭的时候，将数据传递到上一个界面，这是一个很常用的功能，一般用于数据选择，比如淘宝的收货人选择，需要在收货人管理界面将选择的收货人信息传递到订单 ...

一：页面关闭数据传递

在页面关闭的时候，将数据传递到上一个界面，这是一个很常用的功能，一般用于数据选择，比如淘宝的收货人选择，需要在收货人管理界面将选择的收货人信息传递到订单界面。

在Android中，activity自带有activityForResult，进行传递

在IOS中，一般通过Delegate/Block来处理

在React-Native中，则是通过navigator 在push的时候，传递一个callback，子页面关闭之前，回调该callback进行值传递，然后进行处理

那么在小程序中怎么做呢？

通过文档，我们可以看到小程序没有像Android 和 IOS 那样，有系统提供的api进行操作，而页面跳转是通过

wx.navigateTo(OBJECT)

//url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

//success Function 否 接口调用成功的回调函数

//fail Function 否 接口调用失败的回调函数

//complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

跳转传递的参数和web的连接一样，也不能像React-Native 那样，传递callback。

这tm就尴尬了，大写的懵逼！！！！

看来，不能通过跳转的时候做处理，换个思路，看看是否能在返回的时候做文章，我们看文档，小程序的返回是通过

wx.navigateBack(OBJECT)

// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

//OBJECT 参数说明：

//参数 类型 默认值 说明

//delta Number 1 返回的页面数，如果 delta 大于现有页面数，则返回到首页。

看上去，这个好像并不能做什么文章，只是一个返回操作，参数只能传递返回的页面数，并没有说可以回传数据过去

难道真的没有解决办法了吗？

当然不是！

文档中有句非常重要的提示

可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

我们先看一下getCurrentPages()返回的数据是什么

我们可以看到，返回的是通过 wx.navigateTo方法到当前页面的路径的所有页面，好像有点眉目了，我们是否可以找到上级页面然后去修改他的data属性呢？

Page({

...

submit: function(e) {

let pages = getCurrentPages()

let curPage = pages[pages.length - (delta + 1)];

let data = curPage.data;

curPage.seo?tData({'data.invoice': {key1: "111", "key2": "222"}});

}

})

运行之后，喜极而泣，果然能修改上个页面data属性，从而更新UI

封装自己的pageForResult

这个方法很有可能用的地方比较多，而且可能返回的不是上级页面，我们可以做下简单的封装

class Router {

/**

* 返回并回传值

*

*/

navigateBack(obj) {

let delta = obj.delta ? obj.delta : 1;

if (obj.data) {

let pages = getCurrentPages()

let curPage = pages[pages.length - (delta + 1)];

if(curPage.pageForResult) {

curPage.pageForResult(obj.data);

} elseo? {

curPage.setData(obj.data);

}

}

wx.navigateBack({

delta: delta, // 回退前 delta(默认为1) 页面

success: function (res) {

// success

obj.success && obj.success(res);

},

fail: function (err) {

// fail

obj.function && obj.function(err);

},

complete: function () {

// complete

obj.complete && obj.complete();

}

})

}

}

Router = new Router();

module.exports = Router;

使用起来很简单

// 修改上个界面的invoice

let invoice = {

type: type,

header: header,

content: content,

header_content: this.data.headerContent

}

Router.navigateBack({data: {invoice: invoice}});