日常排坑

1. 小程序这些发展很火，当时被公司派去做小程序是17年底，是一个无人货架的小程序，至今已经过了这么久，总结一下自己的经验教训吧，从原生小程序到框架小程序谈谈自己看法的同时，也记录一些排坑，不是大神，简陋勿怪

脚手架

分享一个cli(看个人习惯用js还是ts)

链接地址

requesst封装

• 一般只看掘金啊，思否这些,自己代码的质量还不是很能保证。希望这里能有大佬给出优化

    let $ajax = {
      header: {
        "content-type": "application/json"
      },get: function(param) {
        return this.methods("GET",param);
      },post: function(param) {
        return this.methods("POST",methods: function(type = "GET",param = {}) {
        const token=wx.getStorageSync('token');
        token===undefined?wx.navigateTo({
          url:'/login'
        }):""
        return new Promise((resolve,reject) => {
          wx.request({
            url: "test.php",//仅为示例，并非真实的接口地址
            data: param,header: this.header,success(res) {
              resolve(res);
            },fail(err) {
              reject(err);
            }
          });
        });
      }
    };
    }

复制代码

小程序优化方案

1. 唔。。大家一起折腾一下 欢迎留言

滚动和点击优化

函数优化,防抖节流(代码网上一堆，不搬了)

我用的最多就是节流函数，一般在页面滚动scroll,按钮反复点击(如果网络比较慢，反复点击会发现从A->B页面时进入了两次)

1. 节流函数

比如5秒内，无论你怎么触发，都不会执行，原理利用了定时器Timeout。

2. 防抖函数

说白了就是延迟函数。即触发之后立即执行，5秒后再执行

数据优化

1.反复setData一个很大的数组不是一件好事，会重绘

如果只修改单条数据

let obj={
    name:'张三',age:'23',gender:'男'
}
let userList=[{
    userName:'小明'
},{
    userName:'小王'
}]
//数组
this.setData({
    'userList[0].userName':value
})
//对象
this.setData({
    'obj.gender':value
})
复制代码

滚动底部加载分页数据，优化一次性setData数据过多的情况

• 采用二维数组的形式

理由:小程序有数据限制，一次性setData太多数据不然会凉凉,当然这是考虑大佬们的公司数据特多的时候，一般情况还是没问题的。

//场景如下：此时已经加载了两页数据即两个数组userList
let userList=[[{a:2}],[b:2]] //目前所存
let page=3;  //
let data=[{a:3}]  //是后台返回第三页的数组
this.setData({
    ['userList[' + (page - 1) + ']']: data
})
复制代码

图片优化

1.前端一些小icon图片压缩,其余用cdn服务器

2.微信也提供了API 监听wxml的位置是否出现在界面上，API我就放到这了，大概的作用就是监听wxml是否在用户显示区域，如果不在 就可以不加载看不见的图片(最好用Proomise和匿名函数封装一下再用)

key值

这点应该不止在小程序，在Vue,React中都有体现，Key是有作用的，如果不是很有用的数据用index做key没啥问题，如果不是，首先用key，因为index是会改变的，原本缓存的数据会因为key值的改变导致重绘,消耗了小程序的性能

• 我就讲大白话了。。key值就是后端传入的数组中唯一的值，以此作为key

代码优化

• 在目录设计上要有公共的utils,css,以及组件(在app.js中使用usingComponents)，能复用就复用，跟UI小姐姐讲讲不要同一个功能各种花里胡哨...
• 在实际运用中,建议使用分包加载功能，在初次进入时,减少加载的代码体积，提高速度，等进入到分包的页面，才加载
• 代码方面 我一般是一个函数就做一件事情，不混在一起，比如购物车等，这样子也方便维护