微信小程序6 - 页面之间传参及通知系统封装

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对象

}

　　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时,会销毁所有本页面的监听

转载于:https://www.cnblogs.com/jifsu/p/7851183.html

微信小程序6 - 页面之间传参及通知系统封装相关推荐

微信扫码---进入小程序指定页面（传参）
使用场景: 商场的游戏机,用微信扫码获取机器id,进入到小程序指定页面,进行下单购买. 微信公众平台中开发--开发设置--扫普通链接二维码打开小程序中配置的二维码有数量限制,不能满足多台机器的需要. ...
微信小程序之bindtap事件传参
之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件 ...
微信小程序 bindtap绑定如何传参
在写微信小程序代码的时候,对于前端一个组件需要进行前端向后端绑定,我们可以使用bindtap,如下面的例子: <view bindtap="upload_image"> ...
微信小程序之页面之间四种通讯方式
类似于vue中的组件传值,可以应用于很多场景,用的最多的则是路由跳转传值和获取上一页面的数据一. 页面跳转传参:直接在url后拼接 wx.navigateTo({//可以使用反引号,用${}的形式, ...
微信小程序——点击事件传参没有数据(undefined)
今天在wxml和js传参的时候,为了和后台的命名规则保持一致,在data-questionId的驼峰式命名,结果发现参数传到js的时候,js打印出来为undefined.今天把这个坑填了! 微信开发者 ...
微信小程序bindtap普通事件传参方法
使用bindtap在组件中绑定一个事件处理函数,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. 使用data-* 进行传参, <view id="tapTes ...
微信小程序之----页面之间相互传递数据
一.使用全局变量globalData 最外层的app.js中定义全局变量 globalData: {js_code:null} 可以在page1的登陆函数中设置值 wx.login({success: ...
【微信小程序】behaviors使用传参
behaviors类似vue中mixins的功能,官方文档:Behavior,简单写一个倒计时功能,properties传入参数. 一.定义Behavior // useCountdown.js le ...
微信小程序 - 点击事件传参
首先给某个按钮或者某个组件添加 bindtap点击事件再加上 data-xxx="传值内容" (xxx可以自定义单词) 例如: //xx.wxml <view bindt ...

微信小程序6 - 页面之间传参及通知系统封装

微信小程序6 - 页面之间传参及通知系统封装相关推荐

最新文章

热门文章