微信小程序在其他页面监听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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
vue+django实现下载文件的示例
Mar 24 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php设计模式之单例模式代码
2016/06/11 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
php支付宝APP支付功能
2020/07/29 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
社区党建工作方案
2014/06/10 职场文书
开服装店计划书
2014/08/15 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
面试复试通知单
2015/04/24 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
详解nginx location指令
2022/01/18 Servers
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript