微信小程序在其他页面监听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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
使javascript也能包含文件
2006/10/26 Javascript
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python简单读取大文件的方法
2016/07/01 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
校园活动策划书范文
2014/01/10 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书