微信小程序在其他页面监听globalData中值的变化


Posted in Javascript onJuly 15, 2019

前言

这几天去面试,多次碰到同一个知识点。而且有一次面试挺有趣的,是关于小程序的。共有3个问题。

1、小程序中Page.watch()方法是做什么用的?

2、小程序中如何在其他页面中监听到globalData中值的变化?

3、如果在app.js执行登录部分的代码,由于时序问题,如何处理其他页面请求时未获取到身份识别标记的情况。(session,userid等)。(大意是:怎么能够保证其他页面请求是在登录之后?)

知识点

有经验的同学可能一下子就看出来了,这其实说的是同一个东西,那就是Object.defineproperty()这个方法。

下面我来尝试回答一下:

第一题:小程序中并没有Page.watch()方法,但其实这里面试官的要问的东西就是第二题的题目,也就是属性监听器。

第二题:由于要监听到globalData中的值的变化,所以一般要在globalData改变时回调一个方法。例如我们监听一个name属性,大致代码如下:

// app.js中
//app.js
App({
 onLaunch: function () {
 let that = this
 // 在这里用定时器模拟网络请求的过程
 setTimeout(function(){
  that.globalData.name = 'pxh'
 },3000) 
 },
 // 这里这么写,是要在其他界面监听,而不是在app.js中监听,而且这个监听方法,需要一个回调方法。
 watch:function(method){
 var obj = this.globalData;
 Object.defineProperty(obj,"name", {
  configurable: true,
  enumerable: true,
  set: function (value) {
  this._name = value;
  console.log('是否会被执行2')
  method(value);
  },
  get:function(){
  // 可以在这里打印一些东西,然后在其他界面调用getApp().globalData.name的时候,这里就会执行。
  return this._name
  }
 })
 },
 globalData: {
 userInfo: null,
 _name:'msr'
 }
})


// 然后在index.js中的声明周期中实现
onLoad: function (options) {
 let that = this;
 getApp().watch(that.watchBack)
 },
 watchBack: function (name){
 console.log(22222);
 console.log('this.name==' + name)
 }

看看执行效果(可以看到,我们在其他界面完美实现了监听到globalData的变化)

微信小程序在其他页面监听globalData中值的变化

第三题:emmm。第二题的答案就是第三题的答案啦。我们可以在index.js中的回调方法中再进行网络请求,请求需要识别身份的资源。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
jquery仿微信聊天界面
May 06 jQuery
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 #Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 #Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 #Javascript
详解vuex的简单todolist例子
Jul 14 #Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 #Javascript
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
理论讲解python多进程并发编程
2018/02/09 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
大学生求职工作的自我评价
2014/02/13 职场文书
物理研修随笔感言
2014/02/14 职场文书
元旦晚会主持词
2014/03/24 职场文书
聚会通知怎么写
2015/04/23 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
python字符串的一些常见实用操作
2022/04/06 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏