首页 > 代码库 > 基于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.退出重进子项目。

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

    基于ionic2的跨平台项目(六)cordova多项目热修复