[筆記]React+Cordova踩坑

以前作過一點前端的小項目因此前端還算熟練
由於最近在準備GRE因此想能不能寫一個背單詞軟件
正好這學期有個Android開發課，就用來當大做業了

前端: webpack+react+redux
後端: sinatra+grape(API)+datamapper

Cordova

如何在Webpack Dev Server下調試AJAX?

固然是代理啦！
在以前兩個項目中爲了避免用代理強行在後端啓用了nodejs
事實證實這是個愚蠢的決定
由於nodejs徹底不適合作後端，express的結構卻是易懂，但異步編程模式很容易產生難以預料的錯誤
比方說: 若是你傳一個回調函數用來接受數據庫的數據，若是這個函數拋出異常，express不會返回錯誤信息，整個後端會崩潰，由於真正運行這個函數的時候已經脫離express控制的範圍了，而這一點很難注意到
另外sequelize就是一坨翔，命令行工具居然和庫不兼容，尚未任何提示

我選擇Ruby

若是但願dev server和後端同時開啓關閉的話，能夠考慮concurrently

文件路徑

在引用其餘js/css/html文件的時候不能用"/xxx.js"，由於cordova並非開了一個本地服務器，cordova的webpack使用的是file://協議，也就是說路徑應該長這樣:"./xxx.js"，在使用create-react-app建立的項目中，能夠寫一份新的paths.js和配置文件解決這個問題，更改%PUBLIC_PATH%就能夠

圖片路徑

很是詭異的是圖片並不能按照上述作法訪問到
以致於我一度覺得cordova不能加載本地文件

不過事實證實其實只是須要寫完整路徑而已

若是你的圖片路徑是www/image.png的話，應該用
cordova.file.applicationDirectory+"www/image.png"

可能須要安裝插件

調試

由於我本身的手機是iOS的，只能用Android模擬器調試
網上給出的作法大部分是基於adb 的，查了好久沒看到怎麼直接看控制檯輸出

直到我看到這個: chrome://inspect/#devices

Chrome提供的調試工具，能夠直接看到Cordova裏Webview的控制檯

惋惜不支持Redux和React的dev tool

並且更新界面的時候好TM閃！

默認狀況下AJAX是跨域的

糾結了好久若是禁止跨域的話就須要在cordova里弄個代理代理到個人服務器上(就像webpack那樣)
不過這個問題是不存在的

不是全部HTML5的特性均可用

window.speechSynthesis不能用，結合下一條致使我查了4小時BUG

React

Redux的Reducer不報錯？！

若是一個reducer崩潰的話控制檯不會有任何輸出，就是單純的沒反應了我打了一堆console.log才確認這個問題