全局install
npm install -g cordova
創(chuàng)建項目
cordova create MyApp
添加對應(yīng)的運行平臺
cd MyApp cordova platform add browser
查看平臺列表
cordova platform
其他操作
cordova platform update ios
cordova platform rm ios
cordova platform add ios
運行
cordova run browser
這樣就跑起來一個屬于你的app了饶辙。
文件結(jié)構(gòu)
.
├── 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
在結(jié)構(gòu)中祟蚀，我們比較在意的幾個是
-
platforms平臺 -
plugins插件 / 各平臺對應(yīng)的JSON文件 -
www項目文件 入口為index.html
platform
能在瀏覽器看到效果官硝，不意味著就可以打包到手機上運行了。
這時候就需要在項目環(huán)境下
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]
如果機器本地都滿足這些條件，項目就可以愉快的構(gòu)建了郭毕。
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封裝了非常多的插件，供我們來調(diào)用手機原生的功能乘碑。
一般常用的插件都可以根據(jù)名字下載
cordova plugin add plugin-name
也可以自定義自己的插件挖息，根據(jù)git或者文件地址下載。反正就是添加一個文件
cordova plugin add git@xxx
cordova plugin add ../../file-name
需要注意的是兽肤，并不是所有插件都兼容想要的平臺套腹，構(gòu)建就會報錯
自定義插件(user plugman)
使用
npm install -g plugman
來替我們自定生成插件文件結(jié)構(gòu)
plugman create --name pluginName --plugin_id org.demo.name --plugin_version version
需要手動添加平臺plugman platform add --platform_name android 和生成package.json, 這個可以用npm init` 來幫我們生成
完整結(jié)構(gòu)??
.
├── package.json // npm init
├── plugin.xml
├── src
│ ├── android
│ │ └── MyToast.java
│ └── ios
│ └── MyToast.m
└── www
└── MyToast.js
可以看到有插件的xml配置绪抛，src下是各個平臺和對應(yīng)的代碼，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將其以導(dǎo)出
var exec = require('cordova/exec');
exports.coolMethod = function (arg0, success, error) {
exec(success, error, 'MyToast', 'coolMethod', [arg0]);
};
//showToast為安裝后js調(diào)用的方法名，參數(shù)可以為任意多個
exports.showToast = function(msg, success, error) {
//"showToast"為給MyToast.java判斷的action名
exec(success, error, "MyToast", "showToast", [msg]);
};
假設(shè)文件生成在項目同級目錄下
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)
