小程序-首页获取openId和依赖于openId的请求数据渲染

小程序的每个页面都有其对应的生命周期:onLoad、onReady、onShow、onHide...等等,在我当前开发的小程序中主要用到的有标出来的四个,在页面加载的时候,我这边显示onShow一般是最快的,然后是onload,再其次就是onReady,这也是在获取openId和某些依赖于openId的请求的书写位置和条件判断的主要因素。

获取openId

获取这个字段的方法网上已经有很多并且成熟的方案,我这边用的是app,js中使用回调函数,然后在index.js中通过回调函数来拿到openId,然后在index.js的data中设置一个openId字段,通过this.setData进行赋值.

小坑1: app.xxxCallBack()函数

app.xxxCallBack()函数只能在页面onLoad的时候加载一次,当从其他页面返回来的时候是不会触发这个事件的,不论把这个回调函数放到生命周期的哪一个阶段都一样!所以只能把这个回调函数放到onLoad里,然后进行openId的赋值,然后发起依赖于openId的请求,进行页面某些数据的第一次渲染。

小坑2:数据同步

可能在小程序的不同页面我们会对某些数据进行操作,但是最后的这些数据在不同的页面应该保持同步,但是在开发的时候发现一个问题就是我在子页面操作了某些数据,然后在首页渲染这些数据的时候居然还是之前的数据,没变化,和后台一对接,发现是请求中的openId字段为空?奥,对,那个callBack函数只能在onload的时候触发一次,怎么办?

在页面第一次onload的时候其实已经将openId字段存起来了,所以当页面来回跳转的时候,onShow这个生命周期是一直触发的,所以在onShow的时候进行判断,如果openId是空的,说明是页面第一次加载,这个请求就交给onload中的callBack函数去完成就行了,else~openId有值,说明是从其他页面跳转回来的,而且可能数据发生了更改,需要重新获取一遍数据,然后再发一遍请求,重新赋值一遍就完事儿了。


代码示意图

小坑3:this.setData

this.setData是在当前页面的生命周期中去操作的,但是在一些类似于callBack的函数中是没有this的,所以当报错是关于this.setData的时候,只要在当前生命周期函数中生命一个类似于_this = this,的操作,然后把下边代码中的this替换掉就OK了

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,694评论 0赞 0
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,720评论 0赞 9
  • 前言: 上一篇文章我们介绍了.wxml和.wxss文件,这篇文章对js文件进行详细的讲解,首先贴上一个简单的js文...
    Smile__EveryDay阅读 20,453评论 0赞 7
  • 小程序 基本知识 项目文件 JSON 配置 小程序配置 app.json app.json 是对当前小程序的全局配...
    勇敢的_心_阅读 1,558评论 0赞 6
  • 姓名: 张景 公司: 扬州方圆建筑有限公司363期(哈尔滨) 《六项精进》“谦虚二组” 【日精进打卡第179天】 ...
    张景_b55f阅读 107评论 0赞 0

友情链接更多精彩内容