有关Cordova(更新)

事先声明

本文不是教程

前言&需求分析

由于华理杯电子商务大赛的意外获得了校内特等奖,要接下来参加六月的市赛,因此作为技术“顾问”的本人最近被要求做APP。
然本人只有过硬的PHP全站开发经验和少许JS(主要jquery)尝鲜,再加上egg pain的JAVA完全不会【因为是只求了我Android版】,因此想到了大一上时关注的跨平台开发,决定尝试一下。
有关选择跨平台开发我也是考虑良久的。首先众所周知跨平台往往是采取了类似网页的项目架构来保证不同机型的适配,而网页正是我所擅长的;再者我们的项目为一个 ** 为电动汽车车主提供的更方便地寻找与获取周围充电桩信息的充电桩信息集合APP **,而此类APP对系统要求较小,跨平台开发完全可以满足;最后个人决定依存于百度地图提供的LBS服务来实现,而百度也提供了对应的JS的Api(虽然不如Android和iOS的SDK强大但已满足需求)。
也不是说国内的wex5,apicloud,appcan就是辣鸡。个人在大一试用了这些国产之后对它们并不抱有好感。而react native个人感觉这个纯 js的网页制作挺难立即适应。最后我选择了Cordova(phonegap)


主角出场

先安装nodejs,然后在命令行中使用npm install -g cordova来安装cordova
【nodejs我这里是下载最新6.0】
【-g表示全局安装(global),勿忘】

起步

总而言之我开始做我的Cordova APP了
首先创建项目
cd ~
cordova create powerpump com.ecustcic.powerpump powerpump
这里就把PowerPump能量帮这个项目构建成功了我们可以cd powerpump来进去项目文件夹进行进一步cordova操作
然后通过cordova platform add android browser来添加安卓和浏览器两个平台的支持。【browser可以方便我没带Android手机时调试,毕竟系统里都有浏览器不是嘛2333】
由于我还没根据那群女生的设计读懂程序具体功能,所以先不添加plugin了。
根据官网的教程显示我们的安卓调试是需要*安装jdk ** , ** 安装Android SDK ** ,然后 ** 添加jdk和Android SDK的安装地址到path **
这里要提一下最新cordova是用sdk 23.01,建议23.
都安装上【也就是最新版的各个小版本】。
现在把Android手机插上装好驱动就可以通过在项目文件夹里命令行输入cordova run android来测试这个HelloWorld程序。
【用浏览器测试就是用cordova run browser

设计

接下来就是根据产品设计原型来制作对应的网页版

本人大致上浏览了主流的JS的UI库,根据我们队伍除了我一个程序员以外的四位产品经理的设计,我选择了风格大致相近的SUI Mobile。


这就是本队情况

所以本质就是Zepto+Cordova了 【SUI Mobile基于Zepto

根据SUI Mobile给我们的组件我们可以很快的完成

简单一说,为了实现更方便的交互,我又增加了Angular。。。感觉这下就有点乱糟糟的。又由于过了市赛我决定重构一下。

市赛找了兼职的美工,用了Ionic Framework,整体上更加好看了,而且有了iPhone和Android平台不同的样式,但是——在低端机上相当卡,中高端机体验完美。


后来拿了全国一等奖,最近拿这个参加其他比赛,又忍不住想重构,于是开始学习React-Native。

不管是哪个平台,React-Native都相当流畅,但是对于一个原生Js写习惯的总觉得React不习惯……

而且很多React-Native插件啥的都结合了Android或iOS底层Api,没法像Cordova add plugin那样省力,个人觉得其实并没有大幅度加快开发速度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,885评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,417评论 2 45
  • 持续更新中...... 一套企业级的 UI 设计语言和 React 实现。 https://mobile.ant....
    日不落000阅读 5,674评论 0 35
  • 忘记了去害怕, 然后不会游泳的我 呛了一口水。 那是一瞬间的绝望, 也是所有希望最强烈的爆发。 原来世界在另一个地...
    余音觉浅阅读 158评论 0 0
  • 你有故事我有酒,你来么?
    婧仔001阅读 207评论 0 0