小程序示例 - 不同页面间的消息传递

场景

假设有两个页面:用户列表页、信息编辑页

在列表中点击后某条信息后,进入编辑页面

修改了用户信息后,返回到列表页,列表中需要显示修改后的信息

例如把 “李四” 改为了 “李六”,那么返回列表页后,第2条记录就应该显示的是 “李六”

如何更新?

例如可以重新加载列表,返回到列表页时,触发的是onShow事件,那么就在 onShow 处理函数中重新请求数据进行加载

但这样做不太好处理用户体验问题,例如修改的是经过多次下拉翻页后的某条用户信息

也可以不用重新加载,在保存之后设置缓存,指明修改的用户ID、修改后的数据,然后在列表页的onShow处理函数中读取缓存,直接修改现有列表中的数据

解决

上面的更新方式都不太优雅,建议使用 broadcast 广播机制

列表页设置监听,编辑页修改完成后发送广播通知

列表页

const broadcast = require("../../utils/broadcast")

...

onLoad: function (options) {
    ...
    
    // 设置广播监听
    broadcast.on("broadcast_user_modified", (data) => {
        // 处理逻辑
        ...
    });
}

...

编辑页

const broadcast = require("../../utils/broadcast")
...

// 广播
broadcast.fire("broadcast_user_modified", 
    {
        userid:user_id, 
        ...
    }
)
...

列表页收到广播后就会触发处理函数,取得广播传递过来的数据,对现有列表数据进行修改,使用 setData 更新

从详细页返回到列表页时,列表中的数据就已经是最新的了

小结

broadcast 是一个非常小巧实用的广播工具,非常适合在不同页面间传递消息

项目地址:

https://github.com/binnng/broadcast.js

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2017-01-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从流域到海域

Vue.js项目目录结构

folder/flie 说明 bulid 最终生成代码存放位置。 config 配置目录,存放配置文件。index.js中存放了环境和端口等配置...

3105
来自专栏自由而无用的灵魂的碎碎念

针对toad的schema brower和plsql developer的对象浏览器的一些分析

以前做JAVA开发时,一直用的都是plsql developer,搜索对象(表、触发器、DB_LINKS、同义词、序列)都是使用的对象浏览器:

862
来自专栏向治洪

Jar mismatch! Fix your dependencies

  在开发Android项目的时候,有时需要引用多个项目作为library。在引用项目的时候,有时会出现“Jar mismatch! Fix your depe...

1948
来自专栏mathor

XSS攻击常识及实战

 XSS全称是Cross Site Scripting(为了和CSS进行区分,就叫XSS)即跨站脚本,当目标网站目标用户浏览器渲染HTML文档的过程中,出现了不...

8312
来自专栏西安-晁州

hexo&github博客搭建

闲来无事,偶然看到hexo,便试着玩玩,hexo是一种静态博客工具,使用nodejs流生成静态博客,速度快,主题多,附地址:https://hexo.io/ 下...

4380
来自专栏cnblogs

hexo配置自己的博客站点

最近业余时间利用hexo为自己搭建一个高度自定义的个人站点,站点发布在github上,访问地址为:https://cqhaibin.github.io/。本博客...

2147
来自专栏xingoo, 一个梦想做发明家的程序员

Angular2入门体验

好的工具往往使得开发应用更快更简单,而不是任何模块都手动开发。angualr cli就是一个支持 创建工程,添加文件,对各种任务如测试、打包、部署等迭代。 本文...

2896
来自专栏coder修行路

Python爬虫番外篇之关于登录

常见的登录方式有以下两种: 查看登录页面,csrf,cookie;授权;cookie 直接发送post请求,获取cookie 上面只是简单的描述,下面是详细的针...

29310
来自专栏IT派

Vue + Node + Mongodb 开发一个完整博客流程

前言 前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统。 服务端用的是 koa2框架 进行开发。 技术栈 ...

5345
来自专栏iOS开发笔记

iOS开发之-cordova环境搭建

目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App ? 今天就写一些关于hybrid APP的一些东西 环境说明: 操...

3265

扫码关注云+社区