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

平常排坑

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上