微信小程序平常排坑(持续更新)

平常排坑

1. 学到了就要教别人，小程序问题可进来咨询，我会把问题写在下面，实时记录,以为有帮助的帮我点个赞，哈哈哈哈哈哈

关于小程序的脚手架选择，这块我以为有必要说一句，前端小程序框架多，如Taro,uni-app,wepy,mpvue等等，或者最近滴滴又出了一个框架Chameleon，我是以为不要把过多的时间用在框架上，稍微知道一下原理就好了，千万不要为了学而学，前端天花板没那么高，我我的认为就是太杂。找准本身的核心。专精就行了。这是我本身的一个小想法

连接

小程序-商城类思路开拓

脚手架

分享一个cli(看我的习惯用js仍是ts)

连接地址

首次加载慢的问题

直接说重点吧，若是有问题在下方留言,先后端一块儿加速，才能让页面更快

首讲

通过分包的处理，初次加载只有主包内容,那么逐步排查主包的页面加载状况，可是有一个前提条件须要注意，微信开发者工具毕竟不一样于微信的宿主环境，双方加载速度确定不同，因此微信开发者工具快不表明宿主环境快。

在当前页面使用netWork逐步排查资源的加载速度

1. 图片这块直接服务器排查，看看有没有cdn缓存,图片压缩
2. 在看看前端JS这块 ，删掉一些无心义的函数，图片，以及其余的，压缩后上传。
3. 初次加载数据切记不宜过大，能够放占位图，不要出现高度塌陷这种问题，省得UI小姐姐找你麻烦
4. 后台接口测试

requesst封装

• 通常只看掘金啊，思否这些,本身代码的质量还不是很能保证。但愿这里能有大佬给出优化

let $ajax = {
      header: {
        "content-type": "application/json"
      },
      get: function(param) {
        return this.methods("GET", param);
      },
      post: function(param) {
        return this.methods("POST", param);
      },
      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小姐姐讲讲不要同一个功能各类花里胡哨...
• 在实际运用中,建议使用分包加载功能，在初次进入时,减小加载的代码体积，提升速度，等进入到分包的页面，才加载
• 代码方面 我通常是一个函数就作一件事情，不混在一块儿，好比购物车等，这样子也方便维护

分包加载

分包加载对于大型小程序来讲能够算的上是福音，原理官方都有，我也不啰嗦了直接贴地址，这里我主要讲一下步骤和使用分包好处

官方传送地址

好处

好处就是快，小程序顾名思义就是快，还有一个最大的好处，能够扩容，让你的小程序能够放入更多的代码

步骤

第一步在app.js里subpackages配置

• 下面我以官方截图打个比方，你能够根据逻辑去分包，也能够根据页面去分包，这个看技术组的讨论，若是只有本身去撸一个完整的项目，那老铁你随意。。

若是选择其中去分包，建议就至始至终就用这种方式，由于若是根据逻辑和页面两种并行。。不咋的好维护

1. 修改收货地址，这个通常不是对这个平台很感兴趣，不多会用到，因此这个逻辑及页面扔进packageA分包中，等真正到了这个环节再去加载这个页面以及相应的逻辑.

2. 修改用户资料 这一块我以如今火热的CPS项目(帮拼多多，淘宝等大型电商分销)打个比方,当用户进入到你的小程序时，最重要就是快，CPS最重要是帮助用户解决拿到优惠券而后转到各种大型平台身上，因此这种使用频率不高，可是大部分电商会保留的系列页面直接扔到packageB上