最近使用 taro 來開發(fā)擴(kuò)平臺的電商項目。首先兼容的是小程序，使用的工具是微信開發(fā)者工具，H5 和 RN 在以后兼容。現(xiàn)在使用的 taro 的版本是 2.0.7，在對 RN 的兼容上據(jù)說有很多問題。。。

先總結(jié)一下遇到過的幾個問題。

1. 在 taro 1.3.9 的版本中， className 中 使用三元運算符

按照原來使用 vue 或 react 的習(xí)慣，會直接在模板中使用三元運算符去動態(tài)設(shè)置className，像這樣：

  <div v-bind:class="{ isActive ? 'active'  :  'not-actice' }">是否選中</div>

或這樣：

<div className={ index === this.state.currentIndex ? 'active' : 'not-active' }>是否選中</div>

當(dāng)時如果在taro 中按照原來的習(xí)慣來寫，你會發(fā)現(xiàn)不好使，你得到的不是你想要的 active 或 not-active，而是會返回 true 或 false 。如下：

 <View className={`${ isActive? 'active' : 'empty'}  empty-tip`}>暫無數(shù)據(jù)</View>

在 1.3.9 中，編譯后為：

<view class="false empty-tip">暫無數(shù)據(jù)</view>

原來解決這個問題比較快的方式是使用 一個變量去處理，也可以使用別的方式。

不過在 taro 2.0.7 的版本中已經(jīng)修復(fù)，現(xiàn)在可以正常使用（我還一直以為沒有好，還在使用變量寫法，寫這篇總結(jié)的時候才發(fā)現(xiàn)好了??）。

2.0.7 的版本編譯后為：

<view class="empty empty-tip">暫無數(shù)據(jù)</view>

2. 在頁面中使用了 transform: skew() 之后，出現(xiàn)的各種神奇問題

先說一下使用的場景，在 tabbar 頁面中，點擊某個按鈕，進(jìn)入它下面的頁面 A，然后在 A 頁面中，結(jié)構(gòu)和設(shè)置的樣式如下所示：

transform skew 問題

3. page 頁面使用 defaultProps ，defaultProps 失效

具體的問題描述可以看這個 issue，可以看我（yuminMorning這個用戶）標(biāo)注的倆個代碼片段，一個是正確的實現(xiàn)，一個有問題的實現(xiàn)。雖然實現(xiàn)的是不嚴(yán)禁，但是導(dǎo)致這個問題出現(xiàn)的原因還是因為我嘗試在 page 頁面中設(shè)置 defaultProps，這個做法是不合理的。頁面不是組件，按使用規(guī)范來說是不能設(shè)置 defaultProps 的，如果想要設(shè)置默認(rèn)值，可以試試使用 state。

這個問題告訴我們，要想少遇到坑，就要規(guī)范使用三方框架，按照他們的游戲規(guī)則來才會少踩坑。

4. tabbar 頁面，既想要 tabbar 的展示效果，有想要普通頁面的展示效果，怎么弄

在電商項目中，有個比較特殊的頁面：購物車頁面。
這個頁面既是 tabbar 中不可缺少的頁面，也是在其他頁面可以訪問的頁面。他特殊在 tabbar 頁面，是沒有返回的，而在其他頁面進(jìn)入購物車頁面時，正常邏輯還是要返回原來的頁面的。
但是在 taro 中，tabbar 的路由會清空路由記錄中的其他頁面信息，值保留當(dāng)前的 tabbar 頁面。我們?nèi)绻谄渌撁?，比如商品詳情頁，進(jìn)入了購物車頁面，路由信息中就會清空上個頁面的記錄，只保留購物車的路由信息（可打印日志查看），這樣即使在頁面中添加一個返回按鈕也是不起作用的。
解決方式有兩種，一種是比較麻煩的，自己自定義 tabbar，自己處理路由，這個比較自由，tabbar 的樣式也可以自己自由定義了。
另一種比較簡單，一種比較取巧的方式。
taro 提供了一個 copy.patterns 的配置，他允許你只需要配置好 from 某個 src 下的頁面，to 某個 dist 下的頁面（也可以是 src 頁面，建議 dist），taro 在編譯時，就會根據(jù) from 的頁面生成一個一模一樣的 to 的頁面，這個頁面我們可以在 pages 中寫入路徑，然后就可以訪問了。代碼如下：

copy: {
        patterns: [{
            from: 'src/pages/cart',
            to: 'src/pages/cart-info'
        }]
    },

config: Config = {
        pages: [
           ...
              'pages/cart/index',
              'pages/cart-info/index',
           ...
        ],
        ...
}

看效果圖（圖比較大??）：

tabbar 頁面.png

普通頁面.png

這個做法比較好的一點是代碼量少，實現(xiàn)簡單，tabbar 和 頁面的交互完全是原生實現(xiàn)，也保證了一致性。
copy.patterns 具體的用法可以參考文檔。
但是這個也有個缺陷，第一次編譯時，會報錯，在文件沒有生成的時候就訪問了，找不到文件。生成文件之后再編譯就好了。

如果不想這么麻煩，可以自己實現(xiàn) copyPatterns，示例代碼如下：

// 需要依賴兩個庫用于處理文件
const fs = require('fs-extra');
const chokidar = require('chokidar');

const copyPatterns = [{
    from: 'src/pages/cart',
    to: 'src/pages/cart-page'
},
{
    from: 'src/pages/mine',
    to: 'src/pages/mine-page'
}];

for (let i = 0; i < copyPatterns.length; i++) {
    let from = copyPatterns[i].from;
    let to = copyPatterns[i].to;
    fs.copySync(from, to);
    chokidar
        .watch(from, { ignored: /^\./, persistent: true, ignoreInitial: true })
        .on('all', () => {
            fs.copySync(from, to);
        });
}

先記錄到這里，后續(xù)遇到值得記錄的問題會再補充。

本人博客地址：taro 踩坑 ing