微信小程序在其他页面监听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 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python扫描线填充算法详解
2020/02/19 Python
python创建文本文件的简单方法
2020/08/30 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
委托书范本
2014/04/02 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
小学领导班子对照材料
2014/08/23 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
销售内勤岗位职责
2015/02/10 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android