微信小程序開發優化經驗總結

開篇

寫了快兩年小程序，沒有研究nw.js內核原理，沒有去hack小程序內層實現，只是講講開發經驗，畢竟小程序和現代開發體驗差了一截，不少瀏覽器上的h5熟悉開發流程到小程序老是束手束腳，除了介紹本身的經驗，也會附上幾篇不錯的參考連接。 本文主要基於原生開發體驗優化，webpy之類的請忽略。（爲啥不用框架，不必。）

正文

樣式佈局

• 圖標字體文件 使用阿里iconfont
• 全局通用樣式文件引入配合藍狐可以實現快速開發頁面

<!--app.wxss文件-->
@import './margin.wxss';
@import './color.wxss';
@import './font.wxss';
@import './layout.wxss';
@import './btn.wxss';
@import './price.wxss';
@import './line.wxss';
@import './ignore.wxss';

<!--index.wxml-->
<view class="ft14 c9">xxx</view>
複製代碼

推薦引入 async/await

//須要用到的頁面使用方法
const regeneratorRuntime = require("regenerator-runtime");
複製代碼

####性能優化

• setData 能夠經過某個key更新

<!--減小渲染圖層和邏輯圖層通訊的數據量-->
this.setData({
    data[0]:'xxx'
})
複製代碼

• 圖片 | dom 懶加載 IntersectionObserver (data-lazy字段不太好用，由於會一次性加載3屏圖片)
• 首屏優化
  • 精簡dom
  • 懶加載
  • 接口層的數據精簡、前端製做渲染工做
  • 上cdn
• 有條件上TS

使用優化

• 組件調用page 經過hack getCurrentPage函數找到當前Page類

<!--component.js-->
    __pageFunc(api, cb) {
      const originPage = getCurPage();
      const oriApi = originPage[api];
      originPage[api] = mixOpts => {
        oriApi.call(originPage, mixOpts);
        console.log('--- mix Comp ---', api, mixOpts);
        cb && cb();
      };
    }
複製代碼

框架推薦

• wxpage 極其輕量的微信小程序開發框架
• fundebug 監控上報
• wxRequest 請求封裝
• TS版本 請求WeRequest

參考連接

• 微店程序員的小程序優化建議
• 【深度好文】我在作前端構建過程當中的思考

結語

一年前入手小程序開發時候實在是吐槽的不行，不過這都不影響它的使用效果和推廣。小程序提供的api可以讓h5達到接近原生的體驗，以及便利性。我想這也是小程序無論是開發者仍是用戶都可以很容易就接受它的緣由。