微信小程序在其他页面监听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滚动条多种样式,推荐
Feb 05 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue 通过base64实现图片下载功能
Dec 19 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
javascript中定义类的方法汇总
2014/12/28 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
pandas对指定列进行填充的方法
2018/04/11 Python
python实现Virginia无密钥解密
2019/03/20 Python
Django中提示消息messages的设置方式
2019/11/15 Python
高中生学习的自我评价
2013/12/14 职场文书
大学四年规划书范文
2013/12/27 职场文书
调解员先进事迹材料
2014/02/07 职场文书
火车来了教学反思
2014/02/11 职场文书
少先队活动总结
2014/08/29 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
英语教学课后反思
2016/02/15 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android