Cordova从开发到跑路~_cordova还有人用吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52942787/article/details/118761662

参考博客：https://blog.youkuaiyun.com/m0_37609394/article/details/84873861

Cordova是什么？

Cordova 是使用HTML，CSS和JavaScript构建混合移动应用程序的平台.
Apache Cordova是一个开源移动开发框架，它允许您使用标准的Web技术，如HTML5，CSS3和JavaScript进行跨平台开发，避免每个移动平台本机开发语言。应用程序在针对每个平台的包装内执行，并依靠符合标准的API绑定来访问每个设备的传感器，数据和网络状态。"
所以说Cordova其实就是为混合的移动应用提供了一个平台，可以让一个应用在不同平台上使用，比如说这个Android、IOS、Ubuntu、firefox OS等等；

点击这里进Cordova官网!!!

环境配置

以下操作全部都是在Windos中使用Cordova

Android SDK 与 Git 这两个我就不用多累赘了吧，你们肯定有。
下载Node.js
使劲戳这里进入Node.js的官网
什么是node.js?
按照官方来说，Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行时。也可以说node.js是运行在服务端的javascript。总的来说，node.js是javascript的一个开发环境。
什么是npm？
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

在这里要注意！！！下载的时候需要选择是Windows系统还是macOS，其次就是windows系统是32的还是64位的！！！要注意啊！！！
然后打开下载好的文件之后傻瓜式安装一路next，但是！！！！在这里
在这里插入图片描述
选择第四个 ADD to PATH 他会直接把Node.js的环境变量添加到你的电脑里面 - - -如下- - -
测试是否安装成功
打开cmd 执行命令：node -v(查看当前版本号) npm -version(呃…这个意思应该是查看npm的版本号)

在这里插入图片描述做完以上步骤你的Node.js就安装完成了。

4.现在开始安装Cordova：

安装Cordova cmd命令： npm install -g cordova
查看是否安装成功 cmd命令： npm install -g cordova

至此你就可以使用Cordova构建自己的项目了。

使用

创建第一个Cordova项目

新建一个空白的文件夹，在该目录下创建app hello
cmd命令：cordova create hello com.example.hello HelloWorld

所有后续命令都要在项目目录或者项目目录的任何子目录运行 cmd命令：cd hello
给APP添加目标平台。 Cordova可以支持iOS、android、web三端，根据你的需要添加。
cmd命令：
cordova platform add ios
cordova platform add android
cordova platform add browser
安装完成后，platforms目录下会出现三个文件夹：
为了保证正确添加了平台，可以查看一下平台状态： cmd命令：cordova platform ls
要构建和运行App，你需要安装每个你需要平台的SDK。检测你是否满足构建平台的要求：
cmd命令： cordova requirements
至此，你的第一个Cordova就可以运行了
就是介个样子。
小总结： 创建Cordova总共有三步：
第一步就是创建一个文件夹，然后在文件夹里面创建一个Cordova项目
第二步是进入你创建的Cordova项目的目录添加你要用到的平台（android，ios，web）
第三步就是运行了
IOS指令大集合：
安装插件：cordova plugin add cordova-hot-code-push-plugin
通过网络地址安装插件：cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git
安装本地插件：cordova plugin add E:\project\plugins\cordova-hot-code-push-local-dev-addon
安装指定版本插件：cordova plugin add cordova-plugin-device@1.1.4
更新插件：cordova plugin update
删除插件：cordova plugin remove cordova-hot-code-push-plugin
查看安装的平台：cordova platforms list
添加平台：cordova platform add android
编译项目：cordova build android
查看cordova指令：cordova help

自定义插件：

刚刚我们已经创建了一个Cordova的项目了，现在来创建一个Cordova插件：
特别注意 android 项目的包名必须为 com.example.hello，否则编译不会通过。

创建插件 cmd命令：

 plugman create --name FirstPlugin --plugin_id cordova-plugin-first-plugin --plugin_version 1.0.0
    FirstPlugin 表示 插件的名称
    cordova-plugin-first-plugin  插件id
    1.0.0 版本
    创建成功

在这里插入图片描述

添加Android 插件

 $plugman platform add --platform_name android  
 注：平台有 android、ios、windows
 
 将 FirstPlugin 文件 改为 cordova-plugin-first-plugin
 
 改后的文件结构
 
 cordova-plugin-first-plugin
     |-- src // 平台源码
         |-- android // Android 平台源码
     |-- www // 调用原生的js代码 
     |-- package.json // 
     |-- plugin.xml // 插件配置文件

将FirstPlugin.js为

引入exec这个cordova提供的执行函数
var exec = require('cordova/exec');

 //下面随便暴露出一个对象，供外面调用。
var FirstPlugin = {
    testFirstPlugin: (arg0, success, error) => {
        exec(success, error, 'FirstPlugin', 'testFirstPlugin', [arg0]);
    }
}
module.exports = FirstPlugin;

将 plugin.xml 修改为：

 
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-first-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>FirstPlugin</name>
    <js-module name="FirstPlugin" src="www/FirstPlugin.js">
        <clobbers target="FirstPlugin"/>
    </js-module>
    //添加的Android平台
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            //js调用的名字
            <feature name="FirstPlugin">
                //value:FirstPlugin.java的存放路径
                <param name="android-package" value="cordova.plugin.first.plugin.FirstPlugin"/>
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml">
        //这里面可以添加需要使用的权限
		</config-file>
        // src:是插件里存放对应.java的路径， target-dir:安装插件时把.java文件存放的位置，要和上面的value路径对应 
        <source-file src="src/android/FirstPlugin.java" target-dir="src/cordova/plugin/first/plugin"/>
    </platform>
</plugin>

添加package.json 文件

 plugman createpackagejson [插件路径]

6.添加插件

 到基于cordova的项目中，输入以下命令
 cordova plugin add [插件路径]

7.将 FirstPlugin.java 改为:

 package cordova.plugin.first.plugin;
 
 import android.app.AlertDialog;
 
 import com.example.hello.R;
 
 import org.apache.cordova.CordovaPlugin;
 import org.apache.cordova.CallbackContext;
 
 import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 
 /**
 1. This class echoes a string called from JavaScript.
  */
 public class FirstPlugin extends CordovaPlugin {
 
     @Override
     public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
         if (action.equals("testFirstPlugin")) {
             String message = args.getString(0);
             this.testFirstPlugin(message, callbackContext);
             return true;
         }
         return false;
     }
 
     private void testFirstPlugin(String message, CallbackContext callbackContext) {
         if (message != null && message.length() > 0) {
             AlertDialog alertDialog = new AlertDialog.Builder(cordova.getContext())
                     .setTitle("这是标题")//标题
                     .setMessage("这是内容")//内容
                     .setIcon(R.mipmap.ic_launcher)//图标
                     .create();
             alertDialog.show();
             callbackContext.success(message);
         } else {
             callbackContext.error("Expected one non-empty string argument.");
         }
     }
 }

js 调用示例

function onDeviceReady() {
    // Cordova is now initialized. Have fun!
            try {
                // console.log(window.FirstPlugin);
                window.FirstPlugin.testFirstPlugin((res)=>{
                    console.log(res);
                },(error)=>{

                },null);
            } catch (e) {
                console.log(e);
                console.log("请在真机或者模拟器运行");
            }

    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
}