起源:因为最近公司需求,为了满足客户需求快速迭代项目原生已经无法跟上迭代周期所以公司提出要用Cordova进行混合式开发,之前用过WKWebView进行oc与js交互但是网络慢的时候会出现空白页体验也不是很好,经过一周对cordova的研究也算是有一点心得,拒绝懒惰知识需要点点滴滴积累。——本人对简书的排版很是头痛俩字概括(不会)纯文字版本过后会花费时间琢磨哈哈😄
注:cordova集成环境本人就不再叙述了。
1.什么是混合模式开发
我经过一周时间研究一下cordova了解了一下混合模式开发,HTML5+CSS+jquery(jquery mobile推荐使用)搭建页面,通过桥接方式用js调用本地原生方法实现一些web端无法实现的功能。(例如:照相机,通讯录等)
2. 创建你的第一个Cordova工程
2.1 新建项目
cordova create helloCordova com.example.hello HelloWorld
helloCordova(参数是必填):将为你的项目生成一个helloCordova目录。
com.example.hello(参数可选):App ID。
HelloWorld(参数可选):应用程序的项目名。
2.2 添加平台支持
所有后续命令在项目的目录中进行:
cd helloCordova
在构建项目之前,你需要指定一组目标平台。
cordova platform add ios
如果需要查看Cordova支持平台以及已经添加的平台,终端输入命令
cordova platforms ls
3.cordova目录结构分析
3.1根目录
config.xml配置文件(相当于iOSplist文件):配置工程基本信息比如bundle id, app version, app name,是否支持http请求之类的。(配置很多最重要的cordova插件)
platforms原生工程目录:这个目录就是我们xcode启动的项目目录。
www目录:这个是web端目录编写代码要到这个目录下编写。
plugins插件目录:这篇不做讲解。
3.2xode工程目录
注:MyMath大家无视它,这是我写的自定义插件
首先我们看工程文件你们会发现有两个重复文件分别是config.xml和www
这两个位置的文件不要混淆,Staging作为分界线。
Staging外面的web端的工程目录,当我们手动改了里面的东西你用xcode直接run你会发现页面内容都不会变,你必须终端执行cordova run iOS这样启动才有效果
Staging里面的是我们工程目录,当我们手动改了里面的东西你用xcode直接run会立即生效,不需要终端执行。
非常重要老铁门:当我们做开发的时候我们一定要修改根目录下的www,如果你对platforms我们原生工程里的www(也就是Staging里面的)做修改当你执行cordova build(终端执行)Staging里面的所有代码都会被还原,巴拉巴拉写了一天的代码就这么没有,切记一定要到Staging外面的www和config去做修改
4.cordova开发工具以及代码编写
4.1开发工具WebStorm
4.2代码简单编写
重要的事情再说一遍编写代码不要编写platforms里面的www和config,一定要修改platforms外面的
这个是index.html这里面只做界面显示,不要将js代码写到这里面不然会报错,因为cordova规定js必须与html分离为什么这样我也不理解照葫芦画瓢我倒是会。
如果你前期测试不想吧js写到单独js文件就要写在这里也是可以的为了不报错你必须去掉head中的一行代码(这个是我无意中发现的)
网友评论