微信小程序学习笔记（五）——优化

• 下拉刷新后主动关闭

  Page({
   onPullDownRefresh: function() {
     // ...
     wx.stopPullDownRefresh()
   }
  })
  

• 在发起请求时设置 loading，请求结束后关闭

  Page({
   onLoad: function(options) {
     wx.showLoading({title: '数据加载中...'}) // 展示 loading
     wx.request({
       // ...
       complete: () => {
         wx.hideLoading() // 隐藏 loading
       }
     })
   }
  })
  

• 通过节流来优化请求时的下拉刷新

  // xx.js
  
  Page({
   data: {
     isLoading: false
   },
   getData() {
     this.data.isLoading: true
     wx.request({
       // ...
       complete: () => {
         this.data.isLoading: false
       }
     })
   },
   onLoad: function (options) {
     this.getData()
   },
   onReachBottom: function () {
     if (this.data.isLoading) return
     this.getData()
   }
  })
  

• 通过分包优化首页启动时间

• 未绑定在 .wxml 中的数据不要使用 this.setData()，因为 setData 会重新渲染页面中对应的部分

  // xx.js
  
  Page({
    data: {
      cla: false
    },
    onLoad() {
      // 正确的做法
      this.data.cla = true;
        
      // 错误的做法
      // this.setData({
      //   cla: true
      // })
    }
  })
  

• 通过 storage API 缓存异步请求的数据，第二次启动时先利用缓存数据渲染页面，下拉刷新或缓存过期才更新数据

  // xx.js
  
  Page({
    data: {
      requestData: null
    },
    getData() {
      const _this = this;
      wx.request({
        // ...
        success(e) {
          wx.setStorageSync('requestData', e.data)
          _this.setData({
            requestData: e.data
          })
        }
      })
    },
    onLoad() {
      // 本地存在缓存数据
      if(wx.getStorageSync('requestData')) {
        this.setData({
          requestData: wx.getStorageSync('requestData')
        })
      } else {
        this.getData()
      }
    },
  })
  

• 图片懒加载

  // xx.wxml
  
  <view wx:for="{{ imgList }}" wx:key="index" class='img-item-{{ index }}'>
    <image src='{{ item.src }}'></image>
  </view>
  

  // xx.js
  
  Page({
    data: {
      imgList: Array(5).fill({
        "data-src": "url",
        src: ''
      })
    },
    // 监听函数
    imgLazyLoad() {
      this.data.imgList.forEach((item, index) => {
        // 开启监听器
        const observer = wx.createIntersectionObserver(this).relativeToViewport()
        // 监听 .img-item-xx 的元素，执行第二个参数（回调函数）
        observer.observe(".img-item-" + index, (res) => {
          // 定义新图片列表
          const newImgList = [...this.data.imgList]
          newImgList[index].src = newImgList[index]["data-src"]
          // 当对应图片出现在视口中时
          if (res.intersectionRatio > 0) {
            // 修改图片列表 imgList
            this.setData({
              imgList: newImgList
            })
            // 注销对应元素的监听
            observer.disconnect()
          }
        })
      })
    },
    onLoad() {
      this.imgLazyLoad()
    }
  })
  

• 在使用 wx:for 时配合 wx:key 使用

• 初始化代码中尽量减少或不调用同步的 API

• 组件按需引入

• 启动初始渲染缓存

  初始渲染缓存可以在小程序非首次加载时，使视图层无需等待逻辑层初始化完毕，直接将初始的数据渲染到页面

  1. 静态初始渲染缓存：只将 data 中的数据渲染到页面中

     局部配置：页面的 .json 文件

     {
       "initialRenderingCache": "static"
     }
     

     全局配置：**全局的 app.json **

     // app.json
     
     {
       "window": {
         "initialRenderingCache": "static"
       }
     }
     

  2. 动态初始渲染缓存：除了 data 外还有一些数据渲染到页面中

     步骤一：页面的 .json 文件

     {
       "initialRenderingCache": "dynamic"
     }
     

     步骤二：页面的 .js 文件

     Page({
       data: {
         loading: true
       },
       onReady: function() {
         this.setInitialRenderingCache({ // 多次调用只有最后一次调用生效
           loadingHint: '正在加载' // 这一部分数据将被应用于界面上，相当于在初始 data 基础上额外进行一次 setData
         })
       }
     })
     

• 在 Page.onLoad 或更早的时候发起首页的数据请求

  Page({
    data: {
      list: []
    },
    getList() {
      wx.request({
        // ...
      })
    },
    onLoad() {
      this.getList()
    }
  })
  

• 生成骨架屏

  步骤一：工具可以为当前正在预览的页面生成骨架屏代码。工具入口位于模拟器面板右下角三点处。

  

  步骤二：点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 page.skeleton.wxml 和 page.skeleton.wxss 两个文件，分别为骨架屏代码的模板和样式。

  

  步骤三：可在 project.config.json 增加字段 skeletonConfig 进行骨架屏相关配置，页面配置会覆盖掉全局配置。

  详见：骨架屏

• 与页面渲染无关的数据设置为纯数据字段

  Page({
   data: {
     _a: 1 // 使用 _数据名 定义纯数据字段
   }
  })
  

• 动画尽量通过 WXSS 或 WXS 来实现，避免通过连续的 setData 来实现