taro小程序開發、h5前端開發有什麼不一樣呢?

語言: CN / TW / HK

theme: qklhk-chocolate highlight: a11y-dark


接觸了小程序大概半年的時間,今天來淺淺的總結一下和react開發的異同點,首先登場的是相似的地方:

適配問題

  • 對於帶有border的高度儘可能的使用padding去撐開,而不是直接寫死當前view的高度,因為對於不同手機對像素的解釋不一樣,會導致border只有一半。
  • 對於絕對佈局儘可能小像素處理,比如left:300px,我們需要儘可能的讓這個值變小並且儘可能的取0(原因同上,不同手機對像素解釋不同,寫的像素值越大就越有可能導致視覺效果的偏差)。
  • 大View包裹小View的時候,中間又間距的時候要避免使用高度和paddingmargin去處理,儘量使用flex去做居中處理。
  • 對於服務端返回的帶有寬高的圖片(比如大圖、背景圖),在實際展示過程中,要去計算圖片的寬高比,從而減少圖片在頁面上被拉伸的可能性。

接下來就是不同點了:

生命週期

  1. 在小程序開發中除了基本的react生命週期函數constructorcomponentDidMountcomponentWillUnmountshouldComponentUpdatecomponentDidUpdate等,還有componentDidShowcomponentDidHide 等生命週期函數
  2. hooks中除了使用了React Hooks的常用hooks方法,還有一些經常用到的useRouteruseReadyuseDidShowuseDidHide等生命週期相關的鈎子,還有一些常用交互相關鈎子例如usePullDownRefreshuseReachBottomusePageScrolluseResizeuseShareAppMessage、useTabItemTap

小程序預加載機制(跳轉預加載)

  • Taro.preload是小程序中用到的跳轉預加載的API,在Trao中使用Taro.navigateTo方法跳轉頁面,到小程序頁面觸發onLoad的時候會有一些延遲,如果想解決這個問題可以把一些網絡請求提前到發起跳轉的前一刻去請求。
  • Taro中提供了Taro.preload API,可以把需要預加載的內容作為參數傳入,然後在新頁面加載後通過Taro.getCurrentInstance().preloadData獲取到預加載的內容。
  • 主要使用場景:在電商小程序的商品詳情頁面,這個頁面的接口返回數據一般比較複雜,可以在條賺錢就調用Taro.preload方法預加載商品詳情的接口,在詳情頁監聽到有預加載請求時就可以直接減少頁面請求的時間去直接處理數據並展示商品內容,從而減少頁面的加載時間,提高用户體驗。

事件機制

  • 在小程序的開發中,當時用滑動蒙層、彈窗等覆蓋式的元素時,滑動事件會冒泡到頁面上,是頁面元素也會跟着一起滑動,通常情況下我們會通過catchTouchMove去阻止冒泡。但是由於Taro3事件機制的限制,小程序事件都是以bind的形式進行綁定的,所以和Taro1,Taro2不同,調用e.stopPropagation()並不能阻止滾動穿透。

lazyload

  • 在電商的項目中進行列表加載的時候,通常會有很多的圖片展示,這個時候肯定會用到懶加載lazyload,在Taro小程序中圖片Image自身就有lazyload屬性,加上之後就會有懶加載的效果。

JSX渲染問題

  1. Taro不支持render中使用函數進行多條件渲染

```js // 錯誤用法 matchResult = () => { const { isShow, isHave } = this.state; let content = null; // 初始化時,必須賦值,否則小程序報錯undefined if (isShow && isHave) { content = ( 全員通過 ) } else if (!isShow && isHave) { content = ( 一組通過,二組淘汰 ) } else { content = ( 平局 ) } return content; }

render () { return ( {this.matchResult()} ) } ```

js // 正確用法 render () { const { isShow, isHave } = this.state; let content = null; if (isShow && isHave) { content = ( <view>全員通過</view> ) } else if (!isShow && isHave) { content = ( <view>一組通過,二組淘汰</view> ) } else { content = ( <view>平局</view> ) } return ( <view> {content} </view> ) }

  1. 組件內部的渲染jsx必須以render開頭,比如説:renderTitle
  2. 不能對props.children進行任何的操作 對於2、3的具體原因可參考其他小夥伴的解釋 https://lequ7.com/taro-cai-keng-renderjsx-yu-chuan-di-jsx.html

小程序開發過程中重點需要關注包大小問題

> 小程序嚴格要求主包大小不能超過2M 總包大小不能超過8M 。由於電商小程序迭代時間也很長,內容比較豐富,所以包大小問題經常會被困擾。

目前解決的方案: 1. 資源文件都放線上cdn 不放在本地,必須在本地資源文件存儲的要經過壓縮(目前應該只有底部tab要求圖片必須放在本地,新版本API 説是要支持線上了,目前使用版本2.7還不支持) 2. 分包:主包下只有tab 頁面 其他放在分包 ,需要注意的規範是分包相關組件要放到分包下,直接放在src 下的component下  會打到主包 增加主包的大小(這個整體和優化曾經把小程序大小降低20%左右),這個也是開發過程需要注重的一個代碼規範。