微信小程序在其他页面监听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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
mysql建立外键
2006/11/25 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
33道php常见面试题及答案
2015/07/06 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
Python实现多线程HTTP下载器示例
2017/02/11 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
公司薪酬管理制度
2014/01/31 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
投资合作协议书范本
2014/04/17 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
文言文辞职信
2015/02/28 职场文书
夫妻吵架保证书
2015/05/08 职场文书