Cordova热重装在没有离子的设备上

Question

我在没有Ionic或任何其他框架的情况下使用Cordova.我的问题是,如果不使用Ionic,我找不到Cordova的任何热重载功能或插件.有没有任何框架在iOS模拟器上实时重装的解决方案？

Answer 1

我在Cordova实施了一种自定义的"热重装"方式.我不知道它有多原创,但它能很好地满足我的需求.在广义上,它的工作方式如下:在开发模式下,启动静态Web服务器,并指示cordova内容是此服务器的URL : <content src="http://10.0.3.2:8080" />.

静态服务器还侦听资产(js/css/html)中的更改并自动重新加载.我们使用gulp connect(https://www.npmjs.com/package/gulp-connect)来实现这一目标.

在生产模式中,您必须编译资产并指示cordova使用常规静态文件来加载您的应用程序.

细节:

在cordova.xml中,这是告诉cordova在哪里启动应用程序的行:

<content src="index.html" />

所以这必须替换为允许热重载的"动态"版本.我通过使用gulp-connect启动静态文件服务器实现了这一点.

  gulp.task('connect', function () {
    return connect.server({
      root: 'www',
      livereload: true,
      fallback: 'www/index.html',
      https: false
    });
  });

我创建了两个任务,用于在开发和生产中切换cordova配置:

  // Development
  // adds the localhost(on the emulator as 10.0.3.2) as
  // the content source for the cordova app
  gulp.task('cordova-dev-server-android', function () {
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1http://10.0.3.2:8080$3"))
      .pipe(gulp.dest('.'));
  });

  // Production
  // adds the static file as
  // the content source for the cordova app
  gulp.task('cordova-static-file', function () {
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1index.html$3"))
      .pipe(gulp.dest('.'));
  });

您必须确保开发Web服务器可以访问Cordova javascript文件.我再次通过两项开发/生产任务实现了这一目标.

  // Development
  // Creates symlinks for the devserver
  // so the app has access to cordova files
  gulp.task('create-cordova-symlink-android', ['remove-cordova-symlink'], function () {
    return gulp.src('')
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova_plugins.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/plugins www'))
      .pipe(exec.reporter());
  }); 


  // Production
  // Removes symlinks for production
  // see create-cordova-symlink-android
  gulp.task('remove-cordova-symlink', function () {
    var options = {
      continueOnError: true
    };
    return gulp.src('')
      .pipe(exec('rm www/cordova.js', options))
      .pipe(exec('rm www/cordova_plugins.js', options))
      .pipe(exec('rm -Rf www/plugins', options));
  });

我在这里使用gulp,但这可以使用任何任务运行器实现,当然对于其他平台,您必须稍微修改此代码.

希望这可以帮助.