微信小程序在其他页面监听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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
Bootstrap布局方式详解
May 27 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python 使用get_argument获取url query参数
2017/04/28 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
python开发游戏的前期准备
2019/05/05 Python
python匿名函数用法实例分析
2019/08/03 Python
python实现车牌识别的示例代码
2019/08/05 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
幼儿园托班开学寄语
2014/01/18 职场文书
施工单位安全责任书
2014/07/24 职场文书
读群众路线的心得体会
2014/09/03 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
入党后的感想
2015/08/10 职场文书
2016年寒假生活小结
2015/10/10 职场文书
Python打包为exe详细教程
2021/05/18 Python