近日使用Taro框架的一點小心得

本文轉載自查看原文 2019-01-02 13:37 7185

1.yarn npm安裝的包，跟權限問題有關，與網絡也有關

2.Vue框架首先，是解決了view-model的問題，解放開發的雙手，使得顯示和數據和控制分開

3.當你覺得最近沒有技術文章看時，就看收藏的

4.必須熟悉es6的對象、數組拓展，熟悉觀察者模式，熟悉lodash

5.瀏覽器的圖片上傳限制,同文件無法觸發2次上傳，改type為其他，再改回為text即可

6.做靜態頁面時，絕對不要做交互

7.用after和before在一張圖上定位，但是無法突破圖的邊緣限制，解決方法是，外層套View設置為position:relative，即可把突破定位到img邊角上

8.看到設計圖不要多想，太考慮細節，若注重數據，就不必在頁面上下太多功夫，大部分用組件代替

9.MapReduce: Simplified Data Processing on Large Clusters

10.前端處理數據要不要用后端id，可以斟酌的，可以用用前端的數據索引，如：map的index，可以用后端id，配合find() filter()等

11.計算不一定是后端做，可能也需要終端去分擔

12.做一個標題樣式(前面帶有色塊)

    <View className='matchDetails-square'>
                    <View className='matchDetails-squareAfter'></View><View className='matchDetails-title'>主辦單位</View>
                </View>

.matchDetails-square{
    position: relative;
    padding: 0 50px
}

.matchDetails-squareAfter{
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #fee471;
    left: 0;
    bottom: 14px;
}

13.分割線

<View className='recheck-line-cover'>
       <View className='recheck-line'></View>
</View>

.recheck-line-cover{
    overflow: hidden;
    margin: 20px 0
}

.recheck-line{
    width: 100%;
    height: 2px;
    background-color: #E8E8E8
}

14.超出換行並居中

換行居中： flex+ text-align: center+width:80%;

15.注意find和map的區別

find 和 filter 都是不改變原數組的方法，但是find只查出第一個符合條件的結果像例子里是直接返回了一個對象而不是數組！

，而filter返回全部結果仍然是數組。（https://blog.csdn.net/qq_39652441/article/details/79248127）

16.不是所有的框架都很靈活的，因此你可以按部就班的用，需要什么，找到相似的，拷貝過來，你只需要打通你自己的邏輯即可，知道你需要什么

17.小程序不支持PATCH

18.Taro.navigateTo 對應到小程序，是有帶左上角返回鍵的，不能用得太多。aro小程序時，多次redirect會產生錯誤，導致webview疊加過多，所以改為redirect

19.小程序的radio設置color，不可以用rbg

20.async 會對if產生影響

21.編譯為weapp時，margin 會泄露，padding就不會，因此用外層設置padding包裹原來要設margin的標簽

22.微服務，dva

23.用&&會導致組件被銷毀或並未生成，若想做隱藏，可以用三目運算符代替

24.一定要做無效數據的處理：team&&team.id或team&&team.id?team.id:null

25.使用taro.redirect() 來解決頁面緩存，頁面后退的問題

26.多端開發的h5還是不太適合微信網頁開發，調用微信jssdk還是很麻煩

27.移動端不怕計算，就怕渲染

28.排除bug時，必要時可以改源碼

picker的bug：選擇后無效

29.mobx比redux更松散

30.組件化調試時，有問題不要先看問題，先看代碼規范，例如組件名：大寫

31.樣式沒出來，可能是cssloader的問題

32.只有在scss中的px才會被轉換,taro-ui某些組件也支持

33.組件名、組件變量，一定要大寫

34.disabled一般為 disbaled="disabled"

35.但當條件變得過於復雜，可能就是提取元素抽象成組件的好時機了。

36.在少數情況下，你需要在常規數據流外強制修改子元素:rels

37.注意，jsx列表渲染和篩選一律用高階函數：filter map find 等，用 a&&語句和三木運算符代替 if else

38.

所以當調用一些 API 需要傳入小程序的頁面或者組件實例時，可以直接傳入 this.$scope，例如 Taro.createCanvasContext(canvasId, this) 這個 API，第二個參數就是自定義組件實例 this，在 Taro 中就可以如下使用

Taro.createCanvasContext(canvasId, this.$scope)

39.

使從父級傳過來的樣式生效：

使從父級傳過來的樣式生效：

父
<CustomComp my-class="red-text" />  

子
 static externalClasses = ['my-class']

 render () {
    return <View className="my-class">這段文本的顏色由組件外的 class 決定</View>
  }

40.使外部css或scss的樣式對組件內產生影響，而非組件自己的scss文件的樣式

static options = {
    addGlobalClass: true
  }

41.

增加一個 UI 庫入口文件
需要在 src 目錄下添加 index.js 或者 index.ts 來作為 UI 庫的入口文件，用於輸出 UI 組件，如果有多個 UI 組件，可以如下書寫

export { default as A } from './components/A/A'
export { default as B } from './components/B/B'
這樣的話，這個組件庫使用起來，會是如下的方式

import { A } from 'taro-ui-sample'

<A />
如果只有 UI 組件，也可以如下書寫

import A from './components/A/A'

export default A
這樣的話，這個組件庫使用起來，會是如下的方式

import A from 'taro-ui-sample'

<A />

41.移動端的交互盡量少

42.寫代碼不要穿插（待續。。。）

43.后端數據返回，有error：string，就要有code：number搭配，方便給出錯誤提示和進行錯誤處理，403，404跳轉等等

44.項目運行后出現這個問題：