記錄微信小程序轉Taro中遇到的問題

環境

系統：windows

開發工具：微信開發工具RC V1.02.1907301 + vscode

微信基礎庫版本：2.8.1

Taro：v1.3.15

npm: 6.4.1

node: v8.12.0

微信小程序代碼轉Taro

這裏我使用了一個簡單的垃圾答題小程序來嘗試，其中使用了自定義組件，以及自定義導航欄，未使用分包等其餘特性，確保項目是正常，轉換前玩了下，沒有任何報錯等問題。

在小程序項目目錄下執行 `taro convert`

一切都順利，第一步成功。

在項目目錄下會出現一個taroConvert目錄，裏面爲轉換後的代碼

既然轉成taro代碼了，那麼就能夠編譯成其餘平臺小程序了，因而我開始嘗試

編譯成微信小程序

1.安裝依賴:

在taroConvert目錄下執行 npm install 我使用的是cnpm

沒有報錯。

2.編譯運行

npm run dev:weapp --watch

出現一個警告 變量衝突

好吧，找到game.js文件，發現全局的index 和 render函數中for循環index衝突了

修改爲i，其實這個變量沒有用到，是能夠直接移除

3.編譯成功

再次編譯後成功，打開微信開放工具導入項目，注意是導入taroConvert下的dist目錄

出現問題

1.regeneratorRuntime is not defined

1.解決方案：

由於代碼中使用了async await 語法，須要安裝插件來支持

安裝 npm install babel-plugin-transform-runtime

在config/index.js中引入插件

2.sitemap.json 未找到

添加到dist文件下，或者移除該配置，我暫時用不上，因此移除了，在app.js下

3.scene 未定義

這個就比較坑了，在componentDidShow下不能獲取n對象

只好本身增長onShow生命週期

4.success屬性未定義

緣由是我在state中定義了questions: {} 而render函數中使用了questions.current.success致使報錯，加上默認值便可

控制檯終於不紅了

5.wxml報錯了 style屬性出問題了

定位到對應代碼

修改後

終於編譯成功了

6.app下的屬性沒法獲取,須要放到globalData下

修改後,對應的引用都須要修改

展現正常

7.triggerEvent無效

因爲微信自定組件使用了triggerEvent,taro並無轉換成功

自行改爲react 的組件通訊方式

修改完以上內容，完美運行了。

轉H5

報錯

轉百度小程序

大部分佈局都沒什麼問題，因爲沒有appid就沒有驗證是否能正常運行

轉支付寶小程序

也是存在不少問題，佈局錯亂

轉RN

編譯不能經過

大部分css代碼都須要調整

總結

很顯然，想要將微信小程序經過轉成taro再編譯成多端開發坑仍是不少，我選擇狗帶