微信小程序在其他页面监听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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
js如何取消事件冒泡
Sep 23 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
详解js闭包
2014/09/02 Javascript
js中日期的加减法
2015/05/06 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
react 生命周期实例分析
2020/05/18 Javascript
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
使用pip安装python库的多种方式
2019/07/31 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
优秀教师事迹简介
2014/02/02 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
试用期辞职信范文
2015/03/02 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书