[笔记]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才确认这个问题