微信小程序6 - 页面之间传参及通知系统封装
2017-11-17 13:45
375 查看
1. 简单传参
wx.navigateTo({
url: '/pages/demo/index/index?id=1'
})
/pages/demo/index/index.js 中
onLoad(options){
var id = options.id; //获取通过url参数传递来的参数
}
2. 复杂传参
var json = JSON.stringify({a:1});
wx.navigateTo({
url: '/pages/demo/index/index?json='+ json
})
/pages/demo/index/index.js 中
onLoad(options){
var json = JSON.parse(options.json); //获取通过url参数传递来的参数 , 反解为json对象
}
3.
1 写入storage
2 写入app.globalData
3 写入 其他自定义的全局容器内
以上123点都可以实现数据的传输.都是方式之一
4. 通知系统进行 数据传输
对于大数据量的传输.这个过程可能会涉及到数据量,解析反解性能,或特殊字符等因素的干扰.
以上1,2,3介绍的传输方式,只针对页面跳转前进有效,对于页面后退 如: 选择城市,选择日期等控件型页面,处理则要麻烦一些. 引入通知系统,则要方便许多
Notification 通知系统, 代码来自github做了一些扩展. 所谓的通知,也可叫 订阅-发布模式, 观察者模式 ....
即 有一个全局的通知模块,接收 订阅消息者,接收定向发布消息者.消息发送过来,会检查有没有订阅这个消息的人,有则主动推送消息给对方(具体为某个页面)
原始代码见:
github地址: https://github.com/icindy/WxNotificationCenter
我们封装并扩展了这个逻辑 , 编码
使用 self.addNotifyListener("订阅名称"); 注册订阅者 -- 订阅页面调用
使用 self.onNotify(data消息传输的数据,"订阅名称") 处理消息 -- 订阅页面处理
使用 self.removeNotifyListener("订阅名称") 移除消息订阅 -- 订阅页面处理, 一般 不需要手工调用, 在 扩展Page参数一章中的处理,已经封装了消息的销毁逻辑
使用 self.postNotify("订阅名称",data消息传输的数据) 发布消息 -- 发布页面调用 (和订阅页面可以是同一个,一般都是最后打开的控件页面,比如 城市选择控件)
控件使用通知传递消息,可以见 pages/selectCity/index.js pages/datepicker/datepicker/index.js 引用页面, 主页->立即定制
封装后:
每个Page打开,都会注册一个 当前route.url 为名称的监听
Page Onload时,会首先判断有没有给自己的 消息,有则直接处理
Page OnUnload时,会销毁所有本页面的监听
wx.navigateTo({
url: '/pages/demo/index/index?id=1'
})
/pages/demo/index/index.js 中
onLoad(options){
var id = options.id; //获取通过url参数传递来的参数
}
2. 复杂传参
var json = JSON.stringify({a:1});
wx.navigateTo({
url: '/pages/demo/index/index?json='+ json
})
/pages/demo/index/index.js 中
onLoad(options){
var json = JSON.parse(options.json); //获取通过url参数传递来的参数 , 反解为json对象
}
3.
1 写入storage
2 写入app.globalData
3 写入 其他自定义的全局容器内
以上123点都可以实现数据的传输.都是方式之一
4. 通知系统进行 数据传输
对于大数据量的传输.这个过程可能会涉及到数据量,解析反解性能,或特殊字符等因素的干扰.
以上1,2,3介绍的传输方式,只针对页面跳转前进有效,对于页面后退 如: 选择城市,选择日期等控件型页面,处理则要麻烦一些. 引入通知系统,则要方便许多
Notification 通知系统, 代码来自github做了一些扩展. 所谓的通知,也可叫 订阅-发布模式, 观察者模式 ....
即 有一个全局的通知模块,接收 订阅消息者,接收定向发布消息者.消息发送过来,会检查有没有订阅这个消息的人,有则主动推送消息给对方(具体为某个页面)
原始代码见:
github地址: https://github.com/icindy/WxNotificationCenter
我们封装并扩展了这个逻辑 , 编码
使用 self.addNotifyListener("订阅名称"); 注册订阅者 -- 订阅页面调用
使用 self.onNotify(data消息传输的数据,"订阅名称") 处理消息 -- 订阅页面处理
使用 self.removeNotifyListener("订阅名称") 移除消息订阅 -- 订阅页面处理, 一般 不需要手工调用, 在 扩展Page参数一章中的处理,已经封装了消息的销毁逻辑
使用 self.postNotify("订阅名称",data消息传输的数据) 发布消息 -- 发布页面调用 (和订阅页面可以是同一个,一般都是最后打开的控件页面,比如 城市选择控件)
控件使用通知传递消息,可以见 pages/selectCity/index.js pages/datepicker/datepicker/index.js 引用页面, 主页->立即定制
封装后:
每个Page打开,都会注册一个 当前route.url 为名称的监听
Page Onload时,会首先判断有没有给自己的 消息,有则直接处理
Page OnUnload时,会销毁所有本页面的监听
相关文章推荐
- 微信小程序 页面之间传参实例详解
- 详解微信小程序中的页面代码中的模板的封装
- 微信小程序链接传参,跳转新页面
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序多页面传参通信的探索与实践
- 有一种程序架构是介于C/S和B/S之间的,通常的做法是Windows Form系统在程序中访问Web Form页面来完成相关模块的操作,比如招行网银系统。
- 微信小程序--页面之间相互传递数据方法
- 微信小程序 封装,传参等
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信授权封装+微信系统告警通知
- 微信小程序——动态渲染页面、路径传参
- 前端开发---微信小程序中的页面代码中的模板的封装
- 微信小程序页面跳转并传参
- 微信小程序中多个页面传参通信的学习与实践
- 微信小程序页面之间的跳转
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
- 微信小程序页面跳转传参填充数据的小案例
- 微信小程序 页面间传参的几种方式
- 微信小程序作品集实例:跨页面传参,数据库,换行,空格,css
- 微信小程序页面跳转传参