微信小程序在其他页面监听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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
JS作用域深度解析
Dec 29 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
js实现秒表计时器
Dec 16 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Vue实现简单购物车功能
Dec 13 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 SQLite类
2009/05/07 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
Javascript之String对象详解
2016/06/08 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python探索之创建二叉树
2017/10/25 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
Java程序员面试题
2013/07/15 面试题
初婚未育证明
2014/01/15 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python