cordova App脚手架
环境配置
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 项目
- 第一步 创建 App 目录结构
➜ ~ cd Desktop/cordovaDemo
➜ cordovaDemo cordova create CordovaTest com.example.Test CordovaTestCreating 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 插件 和 前端配合, 实现快速开发
cordova App脚手架相关推荐
- 高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
- vue移动端实现预览word,excel,pdf, text以及cordova app 打开处理方案
1.word 引入import mammoth from 'mammoth' 主要代码 try {var xhr = new XMLHttpRequest()xhr.open('GET', this. ...
- iOS app脚手架
app脚手架概述 一个完整的app需要的能力和一些通用的解决方案(三方库). 主流的app都将不同业务(增长.交易.短视频.直播.社区等等不同业务)做成独立的组件,以及支持app运行的基础代码都封装成 ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- cordova APP 检查更新
//升级程序.factory('UpdateService', function ($rootScope, $cordovaAppVersion, $cordovaFileTransfer, $tim ...
- Cordova App 热更新 超详细教程
前言: Cordova热更新的一些要点: 1.在不用重新安装App的情况下,更新你的代码.可以越过应用商店的审核步骤. 2.涉及的插件依赖发生变化时,无法使用热更新,需要去应用商店下载最新版本安装. ...
- Cordova app 检查更新 ----JS进行调用(二)
1.获取版本号 需要添加 插件 cordova plugin add https://github.com/whiteoctober/cordova-plugin-app-version.git js ...
- cordova app 监听物理返回键
物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...
- 使用Mac的浏览器调试ios设备上的cordova app
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/70213326 在web开发的过程中,抓包.调试页面样式.查看请求头是很常用的技巧. 其 ...
最新文章
- swift_000(Swift 的导读必看)
- tsql 正则_T-SQL中的SQL Server正则表达式
- 【Treap】[BZOJ 3224]Tyvj 1728 普通平衡树
- jeecg-boot自动生成代码_无代码实现销售系统自动判定并生成订单功能
- c语言中cnthe普通变量,不得不说,关于 *(unsigned long *) 和 (unsigned long)
- php编码怎么变西欧了403,你知道一个简单的PHP脚本在ip检查后抛出403吗?
- 深圳中电港 招聘FAE(FPGA Lattice)
- OpenCV 安装配置 Jupyter Notebook
- 电子手轮控制步进电机程序手轮控制步进电机的頻率,脉冲数,内容包括欧姆龙plc程序,mcgs程序
- VSCode官方下载网址
- Assuming drive cache: write through ubuntu硬盘内存扩展
- 为什么不推荐大家去外包公司
- 汉诺塔问题的Java实现(递归与非递归)
- 地铁中计算机网络专业,计算机网络技术在地铁AFC系统中的应用原稿(全文完整版)...
- wc -m命令在统计字符数的时候为什么总是多一个?
- 功能性与非功能性需求
- Dubbo远程传输协议详解
- 最全的脱壳,反编译 ,汇编工具
- MinIO按前缀批量下载文件到本地
- 【PHP】高德地图经纬度和地址转换