Cordova开发环境搭建与基本使用

###安装cordova(原名phonegap)
```
npm install -g cordova
```
如果没有npm 先安装Nodejs

###创建项目
```
cordova create japp
cd japp
```
指定package名和应用名
```
cordova create app2 com.rensanning.app.cordova CordovaSample
```
参数说明
- path：也就是项目的目录名称
- ID：项目的ID，用于写入config.xml的widget中，通常格式为 com.example.hello
- name：应用程序的显示名称
创建生成的目录结构说明
```
app2/
|-- config.xml      #项目配置文件
|-- hooks/          #存放Cordova 的钩子
|-- node_modules/
|-- res/            #存放一些各平台的icon或者首屏图等资源
|-- www/            #静态网页资源
|-- platforms/      #各平台存放目录
|-- plugins/        #插件目录
|-- package.json
```

###安装插件
```
cordova plugin add com.dooble.audiotoggle

#添加本地插件
cordova plugin add 'D:\xxx\xxx'
```

###添加平台
```
cordova platform add android/ios
```

###编译
编译指定平台: 
```
cordova build android/ios
```
编译所有平台: 
```
cordova build
```
此步骤会涉及构建平台的搭建和配置（比如Android平台要装好SDK环境）,对于一个前端开发者来说，只需要android sdk 就可以了，不一定非要安装android studio

###删除
```
cordova platform rm android
cordova plugin rm com.dooble.audiotoggle
```

###更新
更新Cordova
```
sudo npm update cordova -g
```
更新平台
```
cordova platform update android
```
查看已添加的平台
```
cordova platform ls
```

### Cordova 防止跳转自带浏览器
在config.xml文件中加入以下两行代码
```
  <allow-navigation href="https://*/*" />
  <allow-navigation href="http://*/*" />
```

### cordova 远程h5页面调用本地js
方法一：
本地先安装好插件，然后将cordova.js plugin等所有js文件（一般在 platforms/andriod/assets/www/或platforms/andriod/platform_www目录下）一起放在服务器上。h5页面只需要引用cordova.js即可
方法二：
直接让h5使用本地cordova.js等文件
```
<script src="file:///android_asset/www/cordova.js" type="text/javascript" charset="UTF-8"></script>
```
如果遇到webview安全机制导致http协议下禁止通过`file://`方式访问本地的文件，可以通过拦截webview的请求，实现加载本地js，具体如下：
修改 platforms/andriod/CordovaLib/src/org/apache/cordova/engine/SystemWebViewClient.java 代码
```
public void clearAuthenticationTokens() {
    this.authenticationTokens.clear();
}

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

@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 {
            WebResourceResponse response = new WebResourceResponse(
                    "application/javascript",
                    "UTF8",
                    view.getContext().getAssets().open(assetPath)
            );
            return response;
        } catch (IOException e) {
            e.printStackTrace(); // Failed to load asset file
            return new WebResourceResponse("text/plain", "UTF-8", null);
        }
    }
    //新增内容结束
    try {

// Check the against the whitelist and lock out access to the WebView directory
        // Changing this will cause problems for your application
        if (!parentEngine.pluginManager.shouldAllowRequest(url)) {
            LOG.w(TAG, "URL blocked by whitelist: " + url);
            // Results in a 404.
            return new WebResourceResponse("text/plain", "UTF-8", null);
        }
		// ...
    } catch (IOException e) {
		//...
    }
}
```

Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Information

Tag

May 2022

分类

官方公众号

About This Entry

About This Blog

最近发布

Friend Links