小程序实现数据监听

32 篇文章 2 订阅
30 篇文章 0 订阅

项目描述:

本人是这个项目中需要使用websocket返回的数据,但是websocet如果放在页面中切换就会频繁的断开重连。这是不切实际的。

所以将websocket写在了app.js下面,但是问题也随之而来。虽然app.js下面数据实时变化,但是我websocket的数据不会对应实时更新到别的页面。

最后感谢简书的一位大佬,具体链接在最后

代码部分:

//app.js
App({
  onLaunch: function() {},
  util: { showToast },
  //实现数据监听,其他页面自动获取app.js页面数据,注意修改数据方式:this.sockData.data = 'pxh'
  watch:function(method){
    var obj = this.sockData;
    Object.defineProperty(obj,"data", {
      configurable: true,
      enumerable: true,
      set: function (value) {
        //console.log("监听数据已修改");
        this._data = value;
        method(value);
      },
      get:function(){
        // 可以在这里打印一些东西,然后在其他界面调用getApp().globalData.name的时候,这里就会执行。
        return this._data;
      }
    })
  },
  //websocket数据,取用数据两个都可以,推荐使用app.sockData.data
  //websocket数据控制点
  sockData: {
    _data:null,
    data: null,
  },
  globalData: {
  }
});
其他页面使用:
onLoad: function (options) {
    let that = this;
    getApp().watch(that.watchBack)
  },
  watchBack: function (name){
    console.log(22222);
    console.log('this.name==' + name)
  }
代码大概就是这个情况,但是我个人测试得到,监听必须是个对象,并且不能直接监听并且修改data值,所以做了转化,变成_data,这个说实在我个人为了完成项目,没有去仔细阅读文档。如果有大佬愿意指点,谢谢留言。
我个人希望sockData下面只有data这么一个,而不需要_data进行转化。
不过上面代码都是可以直接使用的。

简书文章地址:https://www.jianshu.com/p/8d1c4626f9a3
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序可以通过监听数据变化的方式实时更新界面。具体的实现方式可以通过以下步骤来完成: 1. 在小程序中,可以使用 `setData` 方法来修改数据。当数据发生变化时,可以调用 `setData` 方法更新数据的值。 2. 在需要监听数据变化的地方,可以使用 `watch` 方法来监听数据的变化。首先,需要使用 `this.data` 来获取当前数据的值,然后使用 `this.setData` 方法来更新数据。 例如,假设我们要监听某个数据 `count` 的变化,可以按照以下步骤来实现: 1. 在小程序的 Page 或 Component 中定义 `data` 对象,并初始化 `count` 的初始值: ```javascript Page({ data: { count: 0 }, // ... }) ``` 2. 在需要监听数据变化的地方,使用 `watch` 方法来监听 `count` 的变化。在 `onLoad` 或其他合适的生命周期函数中调用 `watch` 方法: ```javascript Page({ data: { count: 0 }, watch: { count(newValue, oldValue) { // 数据变化时的逻辑处理 console.log('count 变化了', newValue, oldValue); } }, onLoad() { this.watch(); }, // ... }) ``` 在上述代码中,我们定义了一个 `watch` 对象,其中的 `count` 方法会在 `count` 的值发生变化时被调用。在 `count` 方法中,可以对数据的变化进行逻辑处理,比如更新界面或执行其他操作。 需要注意的是,上述代码中的 `watch` 方法是自定义的,需要在合适的地方调用。你也可以使用一些第三方库来实现类似的功能,比如 `miniprogram-computed` 或 `wxapp-computed`。这些库提供了更便捷的方式来监听数据的变化。 希望以上信息对你有帮助!如有更多问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值