资讯专栏INFORMATION COLUMN

微信小程序开发-断网重新加载问题

codecook / 2855人阅读

摘要:分析微信小程序目前没有提供刷新,所以要自己去记录当前操作,点击刷新重新执行一遍效果点击重新加载重新加载页面实现由于做项目时,页面渲染离不开接口请求,所以我封装了一下来判断是否断网,及断网后记录本次请求请求参数请求成功回掉当前实例执行时当断网

分析

</>复制代码

  1. 微信小程序目前没有提供刷新API,所以要自己去记录当前操作,点击刷新重新执行一遍
效果

</>复制代码

  1. 点击‘重新加载’重新加载页面

实现

由于做项目时,页面渲染离不开接口请求,所以我封装了一下wx.request来判断是否断网,及断网后记录本次请求

</>复制代码

  1. /**
  2. * obj request请求参数
  3. * cb requrst请求成功回掉
  4. * page 当前page实例
  5. **/
  6. function wxRequest (obj, cb, page, type) {
  7. var isOne = true
  8. var cachFn = function () {
  9. wx.request({
  10. url: obj.url,
  11. data: obj.data || {},
  12. method: obj.method || "GET",
  13. success: function (res) {
  14. cb.call(page, res)
  15. if (!page.data.isNet) {
  16. page.setData({
  17. isNet: true
  18. })
  19. }
  20. },
  21. // fail执行时当断网处理
  22. fail: function () {
  23. // 防止fail 有时会执行两次,影响渲染
  24. if (!isOne) {
  25. return
  26. }
  27. page.setData({
  28. isNet: false,
  29. isRequested: false
  30. })
  31. // 记录本次请求,加载时,执行page实例的reloadFn即可
  32. page.reloadFn = wxRequest(obj, cb, page, 1)
  33. isOne = false
  34. }
  35. })
  36. }
  37. if (type) {
  38. page.isRequested = true
  39. }
  40. return type ? cachFn : cachFn()
  41. }
应用

</>复制代码

  1. let data = {
  2. url: "",
  3. data: {},
  4. method: ""
  5. }
  6. wxTools.wxRequest(data, (res) => {
  7. // 数据渲染
  8. this.setData({})
  9. }, this)

</>复制代码

  1. 断网时,执行this.reloadFn就回重新上一次请求,isNet及判断是否断网

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115464.html

相关文章

  • 微信小程开发-断网重新加载问题

    摘要:分析微信小程序目前没有提供刷新,所以要自己去记录当前操作,点击刷新重新执行一遍效果点击重新加载重新加载页面实现由于做项目时,页面渲染离不开接口请求,所以我封装了一下来判断是否断网,及断网后记录本次请求请求参数请求成功回掉当前实例执行时当断网 分析 微信小程序目前没有提供刷新API,所以要自己去记录当前操作,点击刷新重新执行一遍 效果 showImg(https://segmentfau...

    alanoddsoff 评论0 收藏0
  • 微信小程开发-断网重新加载问题

    摘要:分析微信小程序目前没有提供刷新,所以要自己去记录当前操作,点击刷新重新执行一遍效果点击重新加载重新加载页面实现由于做项目时,页面渲染离不开接口请求,所以我封装了一下来判断是否断网,及断网后记录本次请求请求参数请求成功回掉当前实例执行时当断网 分析 微信小程序目前没有提供刷新API,所以要自己去记录当前操作,点击刷新重新执行一遍 效果 showImg(https://segmentfau...

    dailybird 评论0 收藏0
  • 微信小程开发中遇到的问题及解决办法:微信小程ad自适应布局(二)

    摘要:问题添加微信广告的小程序在正式上线并且通过审查后,如果有除了纯展示的其他需求,比如需要点击观看广告秒才能领取奖励。 场景:微信小程序中添加广告,可以是微信广告和自定义广告的自适应布局; 问题:微信广告在小屏(比如:320)手机上或是设置ad组件父组件宽度小于300px,内容会超出布局范围; 截图效果:showImg(https://segmentfault.com/img/bVbq...

    Freeman 评论0 收藏0
  • 微信小程开发中遇到的问题及解决办法:微信小程ad自适应布局(二)

    摘要:问题添加微信广告的小程序在正式上线并且通过审查后,如果有除了纯展示的其他需求,比如需要点击观看广告秒才能领取奖励。 场景:微信小程序中添加广告,可以是微信广告和自定义广告的自适应布局; 问题:微信广告在小屏(比如:320)手机上或是设置ad组件父组件宽度小于300px,内容会超出布局范围; 截图效果:showImg(https://segmentfault.com/img/bVbq...

    tanglijun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<