Cordova+Vue开发跨平台的跑步定位应用

前端部分项目代码

Runing-Location

需求简介

  • 首页扫描二维码或者手动输入token登录
  • 登录成功跳转至赛事页面
  • 持续向后台发送当前用户的token、经纬度、定位时间
  • 赛事页面有报警功能和退出登录功能

详细需求

详细需求

应用界面

应用界面

开发工具

Cordova

  1. 使用npm安装Cordova

    $ npm install -g cordova

  2. 创建项目目录

    $ cordova create MyApp

  3. 添加目标平台

    $ cd MyApp
    $ cordova platform add <platform name>

  4. 编译运行

    $ cordova run browser

配置目标平台环境

官方文档 Android iOS

前端部分

前端框架使用了Vue2.0 ,全局状态管理使用了Vuex,因为页面跳转很简单,用组件切换就可以实现,所以没有用Vue-Router。网络请求用到了官方推荐的 axios ,项目结构使用vue-cli工具生成webpack-simple(结构相对简单的版本)JS使用ES6版本,Babel做语法转换。

项目结构

项目结构

项目依赖

"dependencies": {
  "axios": "^0.15.3",
  "mint-ui": "^2.1.0",
  "qs": "^6.3.0",
  "vue": "^2.1.0",
  "vue-axios": "^1.2.2",
  "vuex": "^2.1.1"
},
"devDependencies": {
  "babel-core": "^6.0.0",
  "babel-loader": "^6.0.0",
  "babel-plugin-component": "^0.5.1",
  "babel-preset-es2015": "^6.0.0",
  "cross-env": "^3.0.0",
  "css-loader": "^0.25.0",
  "file-loader": "^0.9.0",
  "style-loader": "^0.13.1",
  "vue-loader": "^9.5.0",
  "webpack": "^2.1.0-beta.25",
  "webpack-dev-server": "^2.1.0-beta.0"
}

项目难点

调试困难

前端代码需要编译过程,编译后的文件放到Cordova项目中还需要编译,如果使用的插件中有不支持Android虚拟机(X86框架)必须打包到手机上才能测试,而且不能记录日志。

调用原生功能困难

Cordova有很多官方和非官方的插件,用来调用原生功能,但因为多数插件长期无人维护,和跨平台的复杂度较高,实际使用效果非常不理想。

举例说明:

定位功能

官方的定位插件cordova-plugin-geolocation在Android平台上使用了Google的一套技术,在墙内无法使用。
国内有不少开发者开发了基于百度Android定位SDK的插件,用过5个左右不同的插件,只有一个可以正常使用,这些项目基本上都长时间无人维护,开发过程非常痛苦。

二维码扫描

官方有phonegap-plugin-barcodescanner插件可用,使用基本正常,但是因为插件调用的是原生界面,前端不能对界面进行修改,想添加自定义功能修改按钮文字是不可能的。

平台差异性大

Cordova在一个项目中可以同时添加多个平台,一次编译多个平台的代码,这听上去很不错,但实际操作中,两个平台要实现相同的功能使用一套代码是不行的,需要为不同平台创建独立的项目,并且同时维护两套前端代码,Git的分支功能在这个时候很有用。

在国内,Android系统有很多定制ROM,这些ROM厂家随意制定自己的规范,例如更换自己喜欢的浏览器内核,制定自己的系统权限规则。浏览器内核不同导致webview在不同ROM表现差异大。为了省电网络通信会被随意断掉(锁屏后和长时间数据请求),手动加入白名单的用户引导成本太高,无法实现连续长时间发送请求的功能。

项目总结

第一次尝试用Cordova开发原生应用,只考虑到了前端技术难点,没有原生开发经验,在系统权限等地方浪费了大量时间。

类似Cordova这种跨平台的开发十分不靠谱,本应该是为了降低工作量而选择跨平台开发,实际上为了解决Cordova自身的缺陷导致开发成本比同时开发两个原生版本还要高。

以后不会再碰类似的工具,对于React-Native和Weex更高级一点的工具持观望态度,并不乐观。

加载评论框需要翻墙