cordova App脚手架

最新推荐文章于 2024-06-16 23:29:54 发布

mingyangz

最新推荐文章于 2024-06-16 23:29:54 发布

阅读量695

点赞数

文章标签： cordova

本文链接：https://blog.youkuaiyun.com/iosYangming/article/details/85063128

版权

本文详细介绍了使用Cordova开发App的全过程，包括环境配置、创建项目、管理平台和插件，以及配置config.xml。讲解了如何添加iOS或Android平台，自定义插件，以及安装和删除已有插件的操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境配置

cordova 是 node.js 的一个插件，可以用npm 分发。所以电脑需要先配置 node.js 环境

node.js 环境配置

常见命令

安装 cordova：

npm install -g cordova

创建应用程序

cordova create hello com.example.hello HelloWorld

添加平台

cordova platform add android
cordova platform add ios

完成后运行以下命令查看：

cordova platfrom list

移除Android平台支持

cordova platform rm android

运行以下命令编译应用程序：

cordova build

或

cordova build android  //只针对Andorid平台编译

实际上build命令相当于以下两个命令：

cordova prepare android
cordova compile android

启动模拟器：

cordova emulate android

##插件管理
可以用CLI搜索可用的插件：

cordova plugin search bar code // 搜索 bar code

安装插件，比如:

cordova plugin add org.apache.cordova.device                   //设备API
cordova plugin add org.apache.cordova.network-information  //网络（事件）
cordova plugin add org.apache.cordova.battery-status      //电池（事件）
cordova plugin add org.apache.cordova.device-motion     //加速器
cordova plugin add org.apache.cordova.device-orientation     //罗盘
cordova plugin add org.apache.cordova.geolocation         //定位
cordova plugin add org.apache.cordova.camera                 //摄像头
cordova plugin add org.apache.cordova.media-capture     //媒体文件处理
cordova plugin add org.apache.cordova.media                   //媒体文件处理
cordova plugin add org.apache.cordova.file                        //文件访问
cordova plugin add org.apache.cordova.file-transfer          //文件传输
cordova plugin add org.apache.cordova.dialogs                 //对话框
cordova plugin add org.apache.cordova.vibration              //震动
cordova plugin add org.apache.cordova.contacts               //联系人
cordova plugin add org.apache.cordova.globalization       //全球化
cordova plugin add org.apache.cordova.splashscreen       //闪屏
cordova plugin add org.apache.cordova.inappbrowser             //打开新的浏览器窗口
cordova plugin add org.apache.cordova.console                //调试控制台

你可以用以下命令查看所有已经安装的插件

cordova plugin ls

使用以下命令删除插件：

cordova plugin rm org.apache.cordova.console

或者通过地址来添加插件：

cordova plugin add https://github.com/apache/cordova-plugin-console.git

帮助：

cordova help

更新cordova：

npm update -g cordova

cordova更新完成后，还需要更新项目：

cordova platform update android

Ps: Cordova 从4.3版本开始支持平台和插件管理

示例：创建一个 cordova 项目

➜  ~ cd Desktop/cordovaDemo 
➜  cordovaDemo cordova create CordovaTest com.example.Test CordovaTest

Creating a new cordova project.
➜  cordovaDemo

这就在指定路径下生成了cordova App的目录结构. 顺便说一下create指令的含义

Ps:最好在这里就确定项目名，否则 cordova 改项目名称很麻烦，也不彻底

第二步添加 iOS 或者 Android 平台

进入到 App 所在文件夹。执行命令，以 iOS 平台为例

 cd /Users/shinho/Desktop/CordovaTest/CordovaTest

添加 iOS 平台

cordova platform add ios save

如果需要指定工程版本，在后面添加 @x.x.x 版本号就行

cordova platform add ios@4.4.0

至此 cordova App已经创建成功

App 配置 config.xml

cordova 官网

App 的所有配置都是通过 config.xml进行的，所以对 config.xml 务必有所了解

Config.xml

xml 里面常见的标签配置如：是否允许跨域，自定义插件,浏览器配置等。

#自定义插件

Cordova 完全通过插件的形式完成前端和 Native 的交互。Native 的主要工作就是寻找或者自定义需要的插件。

Cordova.js 是如何调用插件的？

                function buttonClick(){
                    Cordova.exec(successFunction, failFunction, "Scanplugin", "scan");
                }

                function js 方法(){
                    Cordova.exec(成功回调, 失败回调, " native 类名", "具体的方法名称",["参数"]);
                }

所以前端 JS 调用的是指定类名下的具体方法，并有可能携带参数。

类名即是我们的插件名称，方法就是插件的某一个函数

##安装 plugman

安装插件需要先装node.js 插件 plugman

npm install -g plugman

自定义 plugin

➜  ~ cd Desktop/demo/pluginTest 
➜  pluginTest plugman create --name  UtilPlugin --plugin_id cordova.Ym. UtilPlugin --plugin_version 1.0.0

对应命令：

plugman create –name pluginName –plugin_id pluginID –plugin_version version [–path path]

参数说明:

pluginName：插件名称，如MyToast；
pluginID：插件id, 如:org.demo.mytoast；
version：版本号, 如:0.0.1；
path：插件存放的绝对或相对路径；
variable NAME=VALUE：扩展参数，如说明或作者，如woodstream

后来 Cordova 改版，自定义插件都需要 package.json

plugman createpackagejson /Users/shinho/Desktop/demo/pluginTest/UtilPlugin

plugman createpackagejson <自定义插件路径>. 步骤如下：

➜  UtilPlugin plugman createpackagejson /Users/shinho/Desktop/demo/pluginTest/UtilPlugin
name: (cordova.Ym.) 
version: (1.0.0) 
description: 这是一个自定义的插件
git repository: 
author: 
license: (ISC) 
About to write to /Users/shinho/Desktop/demo/pluginTest/UtilPlugin/package.json:

{
  "name": "cordova.Ym.",
  "version": "1.0.0",
  "description": "这是一个自定义的插件",
  "cordova": {
    "id": "cordova.Ym.",
    "platforms": []
  },
  "keywords": [
    "ecosystem:cordova"
  ],
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes
➜  UtilPlugin

添加插件支持的平台

plugman platform add --platform_name android
plugman platform add --platform_name ios

在 src 目录下，会生成 ios 和 android 两个目录和对应的文件。

自定义插件完毕

添加已有的插件

将现有的 App 插件和前端配合，实现快速开发