关于微信小程序页面之间的通信


关于微信小程序页面之间的通信

最近在做微信小程序遇到了一个问题 在app.js中获取数据, 等数据获取成功之后再初始化首页,
但是获取的数据需要连续调用两个接口,请求A -> 获取结果s1 请求B拿着s1去调用B接口获取s2,
时间耗费太长导致第二次请求还没发出去, 首页就开始加载了,于是开始寻找能不能等到app.js中的方法执行完成,之后通知首页加载数据的办法.

解决办法

首先我们要知道, 每个页面都是有一个pageModel(即页面的this指向)的, 我们只要拿到这个对象,就可以执行当前页面中的方法. 那么只要设置一个全局数组,将所需页面的pageModel放入数组中,在app.js请求结束时获取首页对象, 执行初始化方(such as onLoad()、 onShow()..)法就可以了

  1. 在app.js中定义数组 pageModelArray = {}; key: 页面路径 value: pageModel
  2. 在首页执行onLoad时,将首页的this放入到pageModelArray中
  3. app.js数据加载完成之后获取 首页恩迪pageModel对象 执行onShow()方法

具体的代码

app.js

App({

    ......

    onLoad: funcion(){
        let that = this;
        requestA( param, resultA => {
            //等待A接口返回数据
            requestB( resultA, resultB => {
                //获取接口B的数据  执行首页的初始化
                that._pageModels.schedule.onShow(resultB);
            })
        })
    },

    //每个PageModel的对象
    '_pageModels': {}

    ......
})

首页

Page({

    data: {...}

    onLoad: function (query) {
        //将当前页面指向存放到全局属性中  schedule: key即路由名称   
        app._pageModels.schedule = this; 
    },

    ...
})

参考: 微信小程序页面间通信的5种方式 https://segmentfault.com/a/1190000008895441


文章作者: zxc
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 zxc !
 上一篇
elmentUI 使用v-if之后表单验证失效 elmentUI 使用v-if之后表单验证失效
elmentUI 使用v-if之后表单验证失效最近发现,element-ui表单验证遇到v-if时不生效 比如登录页面可能含有手机号登录和邮箱登录等多种方式 我通过一个属性,比如type来去决定用户使用哪种登录方式,再展示具体表单,发现部分
2021-01-14
下一篇 
flex布局设置宽高不起作用的解决办法 flex布局设置宽高不起作用的解决办法
解决办法flex-shrink: 0; 当指定view为flex布局后,给子元素定义width是不起效果的。 原因:定义为flex布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够
2021-01-08
  目录