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

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...