当前位置:首页 > 行业动态 > 正文

cordovajs远程

Cordova JS远程是指在 Cordova应用中,通过特定配置和插件实现从远程服务器加载JavaScript文件或调用本地插件的功能。这通常涉及在config.xml中添加允许远程访问的代码,以及可能需要修改WebViewClient以拦截请求并加载本地JS文件。

Cordova.js 是一个开源的移动应用开发框架,它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术来构建跨平台的移动应用程序,在 Cordova 项目中,有时需要在远程页面中加载和使用 Cordova 的相关功能,以下是关于如何在 Cordova 项目中实现远程页面与本地 Cordova 插件交互的详细方法:

1、通过修改 Android 工程实现

添加 JS 引用:在前端项目的index.html 文件中添加如下的 JS 引用,以加载cordova.js

 <script src="http://injection/www/cordova.js" type="text/javascript" charset="UTF-8"></script>

修改 Java 文件:编辑 Android 工程CordovaLib/src/org/apache/cordova/engine/ 目录下的SystemWebViewClient.java 文件,首先定义一个常量INJECTION_TOKEN,用于标识特定的 URL 前缀:

 private static final String INJECTION_TOKEN = "http://injection/";

拦截请求并返回本地资源:找到shouldInterceptRequest 方法,并添加以下代码,这段代码的作用是拦截 WebView 的请求,如果请求的 URL 包含INJECTION_TOKEN,则将该请求重定向到本地的对应资源:

cordovajs远程

 @TargetApi(Build.VERSION_CODES.HONEYCOMB)
      @Override
      public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
          if (url != null && url.contains(INJECTION_TOKEN)) {
              String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
              try {
                  return new WebResourceResponse(
                          "application/javascript",
                          "UTF-8",
                          view.getContext().getAssets().open(assetPath));
              } catch (IOException e) {
                  e.printStackTrace();
                  return new WebResourceResponse("text/plain", "UTF-8", null);
              }
          }
          try {
              if (!parentEngine.pluginManager.shouldAllowRequest(url)) {
                  LOG.w(TAG, "URL blocked by whitelist: " + url);
                  return new WebResourceResponse("text/plain", "UTF-8", null);
              }
          } catch (Exception e) {
              e.printStackTrace();
          }
          return super.shouldInterceptRequest(view, url);
      }

在前端调用插件:在前端的 JavaScript 代码中,采用cordova.exec() 的方式去调用插件,由于在 TypeScript 中直接调用cordova.exec() 可能会报错,因此需要在import 语句后添加如下声明:

 declare let cordova: any;

2、通过动态注入 script 标签实现

放弃前端页面声明 script 标签的方式:不再在index.html 中通过<script> 标签引入cordova.js,而是改为在页面加载开始时,通过 JavaScript 代码动态注入script

 var script = document.createElement('script'); 
      script.type = "text/javascript"; 
      script.src="http://injection/www/cordova.js"; 
      document.getElementsByTagName('body')[0].appendChild(script);

优点:这种方式可以避免因直接在 HTML 中声明script 标签可能导致的页面卡顿问题,使页面加载更加流畅。

cordovajs远程

3、利用 cordova-plugin-inappbrowser 插件实现

安装插件:确保已经安装了cordova-plugin-inappbrowser 插件,如果没有安装,可以使用以下命令进行安装:

 cordova plugin add cordova-plugin-inappbrowser

配置 config.xml:在项目的config.xml 文件中添加以下配置,允许导航到远程页面:

 <allow-navigation href="http:///" />
      <allow-navigation href="https:///" />
      <content src="url" />//这个是启动时打开的页面

打开远程页面:在本地的index.html 页面中,通过 InAppBrowser 插件打开远程服务器地址,要打开http://192.168.124.6:7007 这个地址,可以使用以下 JavaScript 代码:

cordovajs远程

 var ref = window.open('http://192.168.124.6:7007', '_blank', 'location=yes');

在远程页面中调用本地插件:远程页面中的部分功能需要使用到 Cordova 的插件,如定位、拍照等插件,需要在远程页面中正确引用本地的cordova.js 文件,并按照正常的 Cordova 插件调用方式来使用这些插件,要在远程页面中调用相机插件进行拍照,可以参考以下示例代码:

 document.addEventListener('deviceready', function () {
          navigator.camera.getPicture(onSuccess, onFail, {
              quality: 50,
              destinationType: Camera.DestinationType.DATA_URL
          });
          function onSuccess(imageData) {
              var image = document.getElementById('myImage');
              image.src = "data:image/jpeg;base64," + imageData;
          }
          function onFail(message) {
              alert('Failed because: ' + message);
          }
      }, false);

三种方法各有优缺点,开发者可以根据自己的实际需求和项目情况选择合适的方法来实现 Cordova 项目中远程页面与本地 Cordova 插件的交互,在实际开发过程中,还需要注意处理各种可能的异常情况和兼容性问题,以确保应用的稳定性和可靠性。