百度小程序之间的页面通信

百度小程序之间的页面通信

作者：

出身背景

它主要针对小程序开发中页面之间的通信问题。在涉及支付的场景中，用户从页面支付门户跳转支付后，返回原始页面，需要刷新原始页面上的相应状态，如用户身份状态、支付状态、文档或商品。

遇到的问题

在使用百度小程序swan时，当navigateBack返回页面时，API中的方法参数不支持携带参数，而只支持数字参数。

因此，涉及多个单独页面之间的通信。下面列出了几种方法供参考。

swan.navigate返回

参数名称

类型

要求的

违约

解释

希腊字母表的第4个字母

数字

不

一

返回的页数。如果增量大于现有页面的数量，它将返回主页1。

成功

作用

不

-

接口成功调用回调函数

失败

作用

不

-

接口调用失败的回调函数

完成

作用

不

-

接口调用结束时的回调函数（如果调用成功或失败则执行）

分解剂

实现页面之间的通信主要有三种方法。

解决方案1：使用app。js设置公共变量

使用app的公共功能。js将变量挂在APP上。

//app。Js启动文件

app({

全局数据：{

isLogin:false，

userInfo:空，

网络错误：false，

networkType:“无”

}

})

在其他页面上使用时，请使用：

//测试.js

常量应用=获取应用（）；

const commonParams=app.globalData.isLogin；

然而，缺点也非常明显。当数据量大、数据关系复杂时，维护会更加复杂，逻辑也会非常混乱。

解决方案2：使用存储

使用小程序的全局存储来访问数据。原理与解决方案1类似。

//存储-异步

swan.set存储({

key:“key”，

data:“值”

});

//存储-同步

天鹅setStorageSync（'key'，'value'）；

//获取-异步

swan.get存储({

key:“key”，

成功：函数（res）{

控制台日志（res.data）；

},

失败：函数（错误）{

安慰日志（'错误代码：'+err.errCode）；

安慰日志（'错误消息：'+err.errMsg）；

}

});

//获取-同步

const结果=swan.getStorageSync（'key'）；

解决方案3：使用事件中心

使用事件中心订阅和发布。

//事件。Js事件中心

类事件{

打开（事件、fn、ctx）{

if（类型fn！==“函数”）{

安慰error（“n必须是函数”）；

回来

}

这个。_stores=此。_存储||{}；

（this._stores[event]=this._sstores[event]| |[]）推送({

cb:fn，

ctx:ctx

});

}

发出（事件，…参数）{

这个。_stores=此。_存储||{}；

让store=这个。_存储[事件]；

如果（存储）{

store=store.slice（0）；

对于（假设i=0，len=存储长度；i

存储[i].cb.apply（存储[i].ctx，参数）；

}

}

}

关闭（事件，fn）{

这个。_stores=此。_存储||{}；

//全部

if（！arguments.length）{

这个。_存储=｛｝；

回来

}

//特定事件

让store=这个。_存储[事件]；

如果（！store）{

回来

}

//删除所有处理程序

if（arguments.length===1）{

删除此。_存储[事件]；

回来

}

//删除特定处理程序

让cb；

对于（假设i=0，len=存储长度；i

cb=存储[i].cb；

如果（cb===fn）{

百货商店拼接（i，1）；

打破

}

}

回来

}

}

单元exports=事件；

在app.js中声明和管理

//app.js

从“./utils/Event”导入事件；

app({

事件：新建事件（）

})

在订阅页面上，使用On方法订阅

//视图。Js订阅阅读页面

第页({

//当页面回滚时，将调用onShow方法

显示（）{

//收回成功付款并调用下载层

批准事件。on（“afterPaySuccess”，this.afterPay Success，this）；

},

支付成功后（e）{

// ....