文档章节

小程序异步操作 跨js执行 在微信小程序里面实现跨页面通信

xiaogg
 xiaogg
发布于 11/14 14:18
字数 667
阅读 13
收藏 0

我们知道,在小程序里面一个页面的变化,是通过调用 setData 函数来实现的。所以想做到在二级页面里让一级页面产生变化,最 Quick And Dirty 的做法就是把一级页面的 this 传入到二级页面去,这样我们在二级页面调用 page1.setData(…) 就可以立即引发外部的变化。

但是这并不是一个好的方案,不仅产生了页面的耦合,而且也并不能处理复杂的数据逻辑,因为二级页面不并清楚也不应该关心一级页面想怎么处理当前数据。所以二级页面只应该把变更后的数据通知给一级页面即可,至于一级页面是想刷新界面,还是想本地存储或者发起网络通信,别人都不需知晓了。

简单的Callback

如果只是想把数据通知给外部页面,那应该怎么做呢?
我们来看看第二个方案,如果想产生一个通知,这里就需要用到 callback 机制了。
即关心数据变化的页面,注册一个 callback 函数到一个公共的地方;而数据变更者在变更数据后,将新的数据放入同一个公共的地方;在放入数据时,同时调用这个 callback 函数,让 callback 函数实现者接收到这个变化。

哪这个公共的地方在哪里呢?
第一反应就是 app.js 里面,因为小程序提供了一个 API 叫做 getApp(),让 page 初始化时,可以通过以下代码:

var app = getApp()

来获取 app 实例,从而实现全局的数据共享,并且微信也很贴心的在 Demo 代码里面留了一个 globalData 字段,以暗示开发者这里是可以用来存储全局数据的。

App({
    ...
    globalData:{
        userInfo:null
    }
    ...
})

基于 app.js 方案的伪代码如下:

//app.js
App({
    addListener: function(callback) {
        this.callback = callback;
    },

    setChangedData: function(data) {
        this.data = data;
        if(this.callback != null) {
            this.callback(data);
        }
    }
})

然后我们在一级页面的 onLoad中 调用 addListener:

//page1.js
var app = getApp()
Page({
    onLoad: function () {
        app.addListener(function(changedData) {
            that.setData({
                data: changedData
            });
        });
    }
})

在二级页面数据变更的地方调用:

//page2.js
var app = getApp()
Page({
    onBtnPress: function() {
        app.setChangedData('page2-data');
    }
})

本文转载自:https://www.jianshu.com/p/2ba137a02f09

共有 人打赏支持
xiaogg

xiaogg

粉丝 22
博文 91
码字总数 26692
作品 8
石家庄
技术主管
私信 提问
微信小程序运行流程看这篇就够了

一.微信小程序是啥 本质其实就是(混合)的app 介于web app与native 原生app之间,具备丰富的调用手机各种功能的接口,同时又具备灵活性,跨平台 1. 运行环境差异 微信小程序运行在三端:iOS...

05/17
0
0
【微信小程序项目实践总结】30分钟从陌生到熟悉

前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的U...

叶小钗
08/13
0
0
论如何将 h5 页面快速转换成微信小程序

前言 微信小程序自开放出来到现在也有一段时间了,相信其底层架构也被琢磨得差不多了。微信小程序本身是双线程运行的结构,而 h5 页面是单线程的运行模式,因此两者无法直接互通。微信小程序...

june01
11/15
0
0
【开源】Westore 1.0 正式发布 - 世界上最小却强大的小程序框架

世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: github.com/dntzhang/we… 众所周知,小程序通过页面或组件各自的 setData 再加上各种父子、祖孙、姐弟、嫂...

当耐特
09/25
0
0
微信小程序性能优化方案——让你的小程序如此丝滑

微信小程序如果想要优化性能,有关键性的两点: 提高加载性能 提高渲染性能 接下来分别来介绍一下: 提高加载性能 首先,问一个问题,当用户点击小程序后发生了什么? 上图中的三个状态,我们...

杜俊成要好好学习
11/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机系统要素 C5

本章值得一提的是组织计算机的结构。Hack 的指令和数据是分开存储的,因此它的 CPU 有两个 input: IN inM[16], // M value input (M = contents of RAM[A]) instruction[16],...

lionets
16分钟前
0
0
SpringSecurity404需要注意的地方

在使用@RequestMapping的时候路径的值如果写为("auth"),虽然用的时候前面加不加"/"没有区别,但是在配置了SpringSecurity的http.authorizeRequests().antMatchers()时就必须要注意了! 🌰1...

百萬馬力
20分钟前
0
0
10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享

作者:闲鱼技术-宗心 12月4日,google flutter团队宣布第一个flutter正式版本发布。次日,Flutter Live Beijing 会议上,google flutter团队邀请了在这一技术方案中重要的合作伙伴闲鱼团队分...

阿里云官方博客
20分钟前
1
0
RxJava window操作符

原文:https://github.com/Froussios/Intro-To-RxJava/blob/master/Part%204%20-%20Concurrency/3.%20Sequences%20of%20coincidence.md Sequences of coincidence Rx试图避免管道(pipeline)外......

woshixin
27分钟前
1
0
05.Beetl标签函数以及定界符、占位符介绍---《Beetl视频课程》

本期视频实现了博客的详情页面; 内容简介:使用了标签函数layout完成详情功能 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者:GK #标签函数 layo...

Gavin-King
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部