首页 > 代码库 > 基于ionic2的跨平台项目(六)cordova多项目热修复
基于ionic2的跨平台项目(六)cordova多项目热修复
上篇文章详细介绍了cordova+Android项目的热修复过程,本篇探讨下,一个cordova项目如何集合多个cordova项目,它们是如何协作的,以及如何对他们分别进行热修复。
多cordova项目集合
我们探讨这样一种情况,要做一个综合管理的ionic项目。需要多个团队共同开发多个项目然后集合到这一个项目里,最终实现的效果是在ionic项目中或者是在原生项目中,能进入另外若干个完整的ionic项目。
1.首先创建一个ionic2项目,然后使用$ ionic platform add ios添加ios+cordova项目。
2.打开AppDelegate.m,修改入口控制器:
self.viewController = [[MainTabBarController alloc] init];
3.给tabBar控制器添加几个原生导航控制器(其中第一个起名叫RedViewController)。
4.创建一个自定义控制器MainViewController,继承于CDVViewController,添加一个构造方法:
- (id)initWithFolderName:(NSString *)folderName StartPage:(NSString *)startPage {
self = [super init];
if (self) {
self.wwwFolderName = folderName;
self.startPage = startPage;
}
return self;
}
5.在RedViewController中添加两个按钮,分别跳转到两个MainViewController:
- (void)btn1Click {
MainViewController *vc = [[MainViewController alloc] initWithFolderName:@"www/proj1" StartPage:@"index.html"];
[self.navigationController pushViewController:vc animated:true];
}
- (void)btn2Click {
MainViewController *vc = [[MainViewController alloc] initWithFolderName:@"www" StartPage:@"index.html"];
[self.navigationController pushViewController: vc animated:true];
}
6.编辑另一个ionic项目(称为”子项目1“),执行$ ionic build ios,完成后把platforms/ios/www文件夹拷贝到主项目,修改名称为proj1。
以上几个步骤完成后,即可以从原生项目任意跳转到ionic项目。通过这篇文章中讲到的广播(通知)方式,在ionic app中添加返回按钮,就可以把MainViewController从导航控制器中pop掉,从而返回到原生界面。
多cordova项目热修复
完成一个有能力集合多个cordova项目的ios项目后,如何能对各个项目定向热修复?下面搭建一个本地服务器,通过修改服务器上的www文件,使线上项目通过比较差异文件清单、下载差异文件到本地来修复线上的各个ionic项目。
配置本地服务器
http://blog.csdn.net/huyisu/article/details/38372663
环境配置(最好使用多窗口操作终端)
- 在每个项目中添加热更新插件(加入–save参数会让ionic将插件或node库加入到配置文件,并保存ionic状态)
ionic plugin add –save cordova-hot-code-push-plugin
npm install -g –save cordova-hot-code-push-cli
- 在主项目根目录下的config.xml中加入如下代码
<chcp>
<config-file url="http://192.168.100.251:8080/www/chcp.json"/>
<local-development enabled="true"/>
</chcp>
其中的网址是服务器地址.
修改主项目CDVViewController.m中的loadSettings方法,self.startPage赋值 = xxx
在主项目HCPPlugin.m中的indexPageFromConfigXml方法改为_indexPage = xxx
在需要跳转项目时,使用单例或者全局变量将值赋给上两步里的xxx
进入子项目,运行ionic build ios,然后将子项目platform/ios中的www文件夹拖到主项目的www目录。
修复前操作
1.进入tomcat路径。
cd /usr/local/apache-tomcat-7.0.77/bin
2.启动服务器。
sh startup.sh
3.进入项目根目录后,执行:
ionic build ios
4.把编译后的www文件夹拷贝到tomcat后台的webapps目录下。
5.打开ios项目,打开staging目录里的config,把
<content src="index.html" />
注释掉。
6.提高build号,运行项目。
开始修复
1.进入主项目修改主项目的src。
2.编译主项目:
ionic build ios
3.hcp编译:
cordova-hcp build
4.将变化后的根目录下的www文件夹拖到tomcat的webapps文件夹。
5.退出正在运行的ionic项目(也可以pop到原生)。
6.再次进入可以看到修改结果。
7.进入子项目,修改子项目的src。
8.编译子项目。
ionic build ios
9.将变化后的子项目的platform/ios中的www文件夹拖到父项目www中。
10.将父项目www拖到tomcat的webapps文件夹。
11.退出重进子项目。
基于ionic2的跨平台项目(六)cordova多项目热修复