微信小程序 onLoad与onShow之间传值「建议收藏」

微信小程序 onLoad与onShow之间传值「建议收藏」在写一个页面的刷新效果,需求是在页面第一次进来时,做出一次数据加载,之后在页面有个评论操作,每次评论成功都将本页的数据进行刷新。考虑到如果刷新都用onLoad()的话,会造成比较大的资源浪费,所以,把需要进行数据刷新的部分放到onShow页面进行刷新。因为我的函数在加载评论数据的时候,需要一个bookid数值,传参到服务器这样才能获取相对应的数据。但是bookid是从上个页面通过option…

大家好,又见面了,我是你们的朋友全栈君。

在写一个页面的刷新效果, 需求是在页面第一次进来时,做出一次数据加载,之后在页面有个评论操作,每次评论成功都将本页的数据进行刷新。

考虑到如果刷新都用onLoad()的话,会造成比较大的资源浪费,所以,把需要进行数据刷新的部分放到onShow页面进行刷新。
因为我的函数在加载评论数据的时候,需要一个bookid数值,传参到服务器这样才能获取相对应的数据。但是bookid是从上个页面通过options传参过来的,而这个参数到onLoad()为止就结束了,无法再其他的地方使用。但是在页面刚进行加载的时候,data中的数据是没有的,也就是说不能通过onLoad()将 data中的数据进行更新,然后在onShow()中进行调用。
这就造成了本页面中onLoad()与onShow()之间无法进行一个有效时间内的数据交流。
所以我想了个比较偷鸡的方法。
直接上代码:

 onLoad:function(options){
    console.log("onload加载刷新");
    var that = this;
    wx.request({
      url: 'https://www.*******.cn/BookStoreProject/public/store.php/getInformation',
      data: { isUser : 0 , bookid : options.bookid},
      method: 'GET', 
      header: { "content-type": "application/json" },
      success: function (res) {
        console.log(res.data[0]);
        var bookurl1 ='imgUrls['+ 0 +']';
        var bookurl2 = 'imgUrls[' + 1 + ']';
        var bookurl3 = 'imgUrls[' + 2 + ']';
        that.setData({
          bookmsg: res.data[0],
          [bookurl1]: res.data[0].pic1_url,
          [bookurl2]: res.data[0].pic2_url,
          [bookurl3]: res.data[0].pic3_url,
        });
        console.log("获取数据成功")
      },
      fail: function (res) {
        console.log("获取数据失败!");
      },
      complete: function () {
        // complete
      }
    });
    that.onShow(options.bookid);
  }

函数内容可以不必理会,只要看最后一句加了that.onShow(options.bookid);
将onLoad接受到的数据传递到了onShow中。
同样的,onShow函数如下需要接收这个数据:

  onShow: function (bookid){
    var that = this;
    // 获取评论,用来刷新,第一次页面初始加载时无法得到执行结果
    wx.request({
      url: 'https://www.***********.cn/BookStoreProject/public/store.php/showComment',
      data: { isUser: 0, bookid: bookid },
      method: 'GET', 
      header: { "content-type": "application/json" }, 
      success: function (res) {
        const temp = res.data;
        for (var i = 0; i < res.data.length; i++) {
          temp[i].comtime = time.formatTimeTwo(temp[i].comtime, "Y/M/D h:m:s");
        }
        temp.reverse();//评论逆序输出
        that.setData({
          comments: temp,
        });
      }
    }); 
  }

可以看到再request请求中,参数bookid被使用到。
从原理上来讲。页面刚进入的时候,执行onLoad,在onLoad中调用onShow。这个时候页面数据被加载好。然后页面正常调用onShow,此时因为没有参数,所以此次onShow会无法得到有效的结果。我将这次的onShow叫做无效加载。
之后每次需要刷新数据的时候,只需要直接调用onShow就可以了。

我突然发现犯了个傻吊的错误,onShow里面的内容可以直接重新写一个函数封装起来啊,然后直接在onLoad里面调用,之后刷新也直接调用就好了。为什么要多次一举写在onShow里面呢???哭辽。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149411.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vue支持es6_vue2转vue3

    vue支持es6_vue2转vue3转载:Vue2.0ES6语法降级ES5由于部分低版本的手机还不支持ES6语法,将会导致vue报错。综合了网上的各种办法,我的项目现在终于成功降级ES5.首先安装插件npminstall-Dbabel-preset-es2015babel-corebabel-preset-stage-2babel-loader编辑配置文件…

  • 虚拟机怎么安装win7系统教程_win10怎么安装虚拟机

    虚拟机怎么安装win7系统教程_win10怎么安装虚拟机虚拟机安装xp经验1.打开vm软件 2.创建虚拟机选中单个文件 用pe系统打开3.用驱动精灵创建2个分区50g50g(一定要创建2个gost版要在d盘分配文件夹的)分配8g内存4核cpu4.将系统安装到分区上 …

  • 精美的液晶数字字体素材[通俗易懂]

    精美的液晶数字字体素材[通俗易懂]液晶数字应该比较常见,那么液晶数字字体的应用也是相对广泛了,可以运用于一切需要液晶显示屏上的数字字体显示。对于这样一种有着广泛的应用数字字体,选择使用哪款液晶数字字体也是一个很重要的问题啦!为此,特意为大家收集了几款液晶数字字体供大家选择,喜欢的朋友赶紧收藏起来吧!  DS-Digital字体是一款比较常规的液晶数字字体,这款字体的仅支持数字和大写字母输入,字体端正,结构完整,整体视觉呈现效果…

    2022年10月25日
  • win2008安装mysql8.0「建议收藏」

    win2008安装mysql8.0「建议收藏」mysql升级到8.0还是有一些变动,先说一下变动的地方有有些:不能直接修改root的权限了,需要新建用户然后再设置用户的权限;更改了密码的加密方式,mysql8之前是使用的mysql_native_password规则,mysql8是使用的caching_sha2_password规则安装mysql8时win2008需要安装MicrosoftVisualC++2015补丁需要自…

  • NODE.JS的简单的例子

    NODE.JS的简单的例子

  • pythonfor循环怎么写_python循环语句while

    pythonfor循环怎么写_python循环语句whilepython的for循环语句怎么写for循环列表操作方法>>>a=[1,2,3,4]>>>foriina:>>>printi,1234for循环元组赋值>>>x=[(‘hello’,’python’),(‘very’,’good’)]>>>for(a,b)inx:>>>print(a,b)(‘hello’,’python’)(‘very’,’good’)还有fo…

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号