下拉刷新后主动关闭

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 来实现