全局install
npm install -g cordova
创建项目
cordova create MyApp
添加对应的运行平台
cd MyApp cordova platform add browser
查看平台列表
cordova platform
其他操作
cordova platform update ios
cordova platform rm ios
cordova platform add ios
运行
cordova run browser
这样就跑起来一个属于你的app了。
文件结构
.
├── config.xml
├── hooks
│ └── README.md
├── node_modules
│ ├── cordova-android
│ ├── cordova-browser
│ ├── cordova-plugin-dialogs
│ ├── cordova-plugin-whitelist
│ └── mytoast -> ../../test/MyToast
├── package-lock.json
├── package.json
├── platforms
│ ├── android
│ └── browser
├── plugins
│ ├── android.json
│ ├── browser.json
│ ├── cordova-plugin-dialogs
│ ├── cordova-plugin-whitelist
│ ├── fetch.json
│ └── org.demo.mytoast
├── res
│ ├── README.md
│ ├── icon
│ └── screen
└── www
├── css
├── img
├── index.html
└── js
在结构中，我们比较在意的几个是
-
platforms平台 -
plugins插件 / 各平台对应的JSON文件 -
www项目文件 入口为index.html
platform
能在浏览器看到效果，不意味着就可以打包到手机上运行了。
这时候就需要在项目环境下
cordova requirements
查看build条件是否满足。
Android Studio project detected
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-27,android-26
Gradle: installed /usr/local/Cellar/gradle/4.6/bin/gradle
Requirements check results for ios:
Apple macOS: installed darwin
Xcode: installed [object Object]
ios-deploy: installed [object Object]
CocoaPods: installed [object Object]
如果机器本地都满足这些条件，项目就可以愉快的构建了。
PS: not install 的话，后面一般都有提示怎么添加的。
简单说一下：
Android
- JDK mac上自带
- SDK && SDK Target
Android Studio
个人是用的Android Studio install 的SDK，在Configure => SDK Manager => Search: Android SDK选择你想要的版本就可以了。 -
Gradle
Homebrew is “the missing package manager for macOS”.
$ brew install gradle
iOS
- Xcode
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developersudo npm install -g ios-deploy
plugin
在来说说插件
cordova封装了非常多的插件，供我们来调用手机原生的功能。
一般常用的插件都可以根据名字下载
cordova plugin add plugin-name
也可以自定义自己的插件，根据git或者文件地址下载。反正就是添加一个文件
cordova plugin add git@xxx
cordova plugin add ../../file-name
需要注意的是，并不是所有插件都兼容想要的平台，构建就会报错
自定义插件(user plugman)
使用
npm install -g plugman
来替我们自定生成插件文件结构
plugman create --name pluginName --plugin_id org.demo.name --plugin_version version
需要手动添加平台plugman platform add --platform_name android 和生成package.json, 这个可以用npm init` 来帮我们生成
完整结构⬇️
.
├── package.json // npm init
├── plugin.xml
├── src
│ ├── android
│ │ └── MyToast.java
│ └── ios
│ └── MyToast.m
└── www
└── MyToast.js
可以看到有插件的xml配置，src下是各个平台和对应的代码，www就是export的地方。
src/android/....java 🌰
package org.demo.mytoast;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
// import org.apache.cordova.Activity;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.widget.Toast;
/**
* This class echoes a string called from JavaScript.
*/
public class MyToast extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
if (action.equals("showToast")) {
String message = args.getString(0);
this.showToast(message, callbackContext);
return true;
}
return false;
}
private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
private void showToast(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
// Activity activity = this.cordova.getActivity();
android.widget.Toast.makeText(cordova.getActivity(), message, Toast.LENGTH_SHORT).show();
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
定义好方法了，在./www将其以导出
var exec = require('cordova/exec');
exports.coolMethod = function (arg0, success, error) {
exec(success, error, 'MyToast', 'coolMethod', [arg0]);
};
//showToast为安装后js调用的方法名，参数可以为任意多个
exports.showToast = function(msg, success, error) {
//"showToast"为给MyToast.java判断的action名
exec(success, error, "MyToast", "showToast", [msg]);
};
假设文件生成在项目同级目录下
cordova plugin add ../file-name
引入项目，会自动为config.xml添加配置
插件挂载在全局的cordova.plugins下
www
www文件目录为存放运行代码的目录，既然我们选择的vue，将vue编译到这来就好了。
由于是需要可直接访问的css和js
// Template for index.html
index: path.resolve(__dirname, '../../www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../www'),
assetsSubDirectory: '',
assetsPublicPath: '',
/**
* Source Maps
*/
.
├── README.md
├── config.xml
├── e-invoice // vue 文件
├── hooks
├── node_modules
├── package-lock.json
├── package.json
├── platforms
├── plugins
├── res
├── www
└── yarn.lock
PS:
cordova 8.0.0
build android 7.0.0
error
# [Cordova failed to install 'cordova-plugin-whitelist': Error: ENOENT: no such file or directory AndroidManifest.xml](https://stackoverflow.com/questions/48034086/cordova-failed-to-install-cordova-plugin-whitelist-error-enoent-no-such-fil)
网友评论