微信小程序云开发教程-微信小程序的JS高级-页面间数据传递
发布于 4 年前 作者 lipeng 4375 次浏览 来自 分享

同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容。


  在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息,在不同页面的接口中都需要这个参数,服务端通过这个参数来判断是哪个用户请求了服务。因此,数据在页面之间的传递在小程序开发中也是必不可少的。



  页面间数据传递主要有两种方式,第一种,通过页面跳转过程携带参数,另一种方式是将数据保存在全局数据中,每个页面再从全局数据中读取。在本小程序中,我们主要使用了第二种,因此我们将讲解第二种方式,对于第一种同学们可以通过微信开发者文档进行学习。



  具体来说,我们可以通过URL传递参数。在原页面中,js文件中调用API进行跳转时在URL路径结尾后带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 "path?key=value&key2=value2" 。


  在打开的新页面中,js文件中onLoad函数接收参数中含有传递过来的数据。例如这里的示例,我们已经学过redirectTo是页面跳转的api,当我们执行后,在新页面就可以收到id变量,由于字符串可以拼接,我们可以在左边写成id=然后引号结束加号加上变量值。



  其次,可以通过页面间事件通信通道(EventChannel)传递参数

在原页面中,js文件中调用API进行跳转时在success回调函数中向被打开页面传送数据。在打开的新页面中,js文件中onLoad函数持续监听事件获取页面传递参数。同样是传递id参数,我们分别拷贝使用这两段代码打开事件通信通道即可。



  下面我们来比较一下这几种方式。URL传递参数,只能从在A页面打开B页面时,从A页面向B页面传递参数。事件通信通道(EventChannel)传递参数,在A页面打开B页面时,可以从A页面向B页面传递参数,也可以同时从B页面向A页面传递参数(我们刚才只介绍了前者,后者给大家作为作业自学)。


  这两种方式通常用于传递简单数据,如标志信息、id信息和字符串等,使用时需要依赖路由API。而全局数据交互:不介意页面的打开顺序,通常用于传递重要共享数据,该数据往往在多个页面都需要而不仅仅限于两个页面之间,使用时需要使用getApp()。


  日拱一卒,功不唐捐。涓流所积,终成沧海。

回到顶部