WebStorm 之 Cordova 环境搭建
一、环境搭建
Cordova 环境配置之前,应先下载安装 Node.js ,中文官网:http://nodejs.cn/。
以管理员身份运行 cmd 命令行工具:
1、查看 Node.js 是否已安装成功,命令为:node -v
2、查看 npm 是否已安装,命令为:npm -v
3、Cordova 安装,命令为:npm install -g cordova,C:\Users\Administrator\AppData\Roaming\npm会生成对应的.cmd文件
如果慢,可以修改镜像,再进行安装。
npm config set registry http://registry.cnpmjs.org npm info underscore
npm install -g cordova
安装成功后做版本查看测试,命令为:cordova -version
4、ionic 安装,命令为:npm install -g ionic,C:\Users\Administrator\AppData\Roaming\npm会生成对应的.cmd文件
安装成功后做版本查看测试,命令为:ionic -version
ios-sim 安装,命令为:npm install -g ios-sim,C:\Users\Administrator\AppData\Roaming\npm会生成对应的.cmd文件
安装成功后做版本查看测试,命令为:ios-sim -version
5、查看 Java 版本信息,命令为:java -version
配置 JAVA_HOME 系统环境变量(已配置直接跳过):JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101
6、查看 ant 版本信息,定位至 Apache Ant 解压目录,ant -version(可跳过)
官网地址:http://ant.apache.org/
7、配置 Andorid 环境变量
path环境变量添加:D:\Program Files\Android\Android\Sdk\android-sdk\platform-tools;D:\Program Files\Android\Android\Sdk\android-sdk\tools;
添加系统变量:ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk
注:明确知道 adb.exe 的位置(android 2.3 及以上是在 android-sdk\platform-tools 目录下面的,而 2.2 及以下是放在 android-sdk\tools 目录下面),可只在 path 变量中添加其目录。
8、查看 adb 版本信息,命令为:adb version
9、重启电脑....
二、环境测试
1、创建工程
index.html内容代码如下:
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index
2、编译,运行
注意:android模拟器首次运行需要下载安装配置模拟器,故运行缓慢,再次编译运行可直接启动模拟器。
3、安装包所在目录:platforms\android\build\outputs\apk
4、运行模拟器测试,如下图:
三、注意问题
1、WebStorm编译依赖于gradle,WebStorm编译过程中自动下载,时间较长
2、Android版本不对,WebStorm创建工程生成的Android版本高,需要在Android SDK Manager中下载
3、Android SDK版本统一,platform/android/ 和 platform/android/CordovaLib 各自目录中的 AndroidManifest.xml 和 project.properties 文件中统一一致。
WebStorm 之 Cordova 环境搭建的更多相关文章
- cordova 环境搭建
安装环境前题是nodejs已安装,android环境搭建完成,android环境没有通过http://www.androiddevtools.cn/安装,安装使用 淘宝 NPM 镜像 方式 1.运行c ...
- Cordova环境搭建 & HelloWorld
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- sencha touch 2.3 结合cordova 环境搭建
sencha touch 2.3环境搭建必备工具 sencha touch 2.3 包sencha cmd 4.0以上JAVA JDK 1.7以上(注意JDK和JRE的区别)Ruby 1.9.3或更早 ...
- cordova环境搭建
首先,需要了解一下cordova 和 phonegap 的关系.phoneGap是原先的名字,Cordova是phoneGap被捐给apache之后 用的项目名,phoneGap的名字也被保留了. 1 ...
- iOS下JS与OC互相调用(七)--Cordova 环境搭建
Cordova大家可能比较陌生,但肯定听过 PhoneGap ,Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字.它是一个可以让 JS 与原生代码互相通信的一个库,并且提供了一 ...
- webapp开发学习---Cordova环境搭建
Cordova 使用HTML, CSS & JS进行移动App开发;多平台共用一套代码;免费开源 步骤:(来自Cordova官网) 1.安装Cordova(在node.js环境下进行安装) 命 ...
- cordova环境搭建,搭建项目,以及拍照功能的实现
一.配置环境 1.配置java环境: 下载对应系统环境的jdk:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-13 ...
- WebStorm Cordova 环境搭建
一.软件安装 1.nodejs 2.npm 3.Cordova 如果慢,可以修改镜像,再进行安装. npm config set registry http://registry.cnpmjs.org ...
- nodejs + ionic2 + cordova环境搭建
1.nodejs 下载地址:https://nodejs.org/zh-cn/,执行默认安装就可以,可执行命令 node(环境变量) 2.修改 npm 源,执行:npm config set regi ...
随机推荐
- C#复制数组的两种方式,以及效率比较
如何高效地进行数组复制? 如果把一个变量值复制给另外一个数组变量,那么2个变量指向托管堆上同一个引用. 如果想在托管堆上创建另外的一份数组实例,通常使用Array.Copy方法. class Prog ...
- 2018房地产沉思录 z
在中国,房价问题几乎有一个铁律:越调控越暴涨. 刚刚进入5月,全国各地发布的调控政策数量就已经超过了115个.仅4月份,全国各种房地产调控政策合计多达33次,25个城市与部门发布调控政策,其中海南.北 ...
- maven的groupid和artifactId
groupid和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓库去,你想要找到你的项目就必须根据这两个id去查找. groupId一般分为多个段 ...
- bat与jscript开发工具时遇到的一些问题
之前使得bat调用luac进行编译时,会弹出一个"黑色的界面",闪烁一下,感觉不太好.而脚本vbs或者jscript调用bat是可以利用Run方法,将其第二个参数设置为0便可以隐藏 ...
- Java并发编程的艺术(四)——线程的状态
线程的状态 初始态:NEW 创建一个Thread对象,但还未调用start()启动线程时,线程处于初始态. 运行态:RUNNABLE 在Java中,运行态包括就绪态 和 运行态. 就绪态 该状态下的线 ...
- 【转】内存分析工具 MAT 的使用
本文转载自:http://blog.csdn.net/aaa2832/article/details/19419679 1 内存泄漏的排查方法 Dalvik Debug Monitor Server ...
- 详细解读Android中的搜索框(二)—— Search Dialog
Search Dialog是提供搜索的控件之一,还有一个是上次小例子给出的searchView,关于SearchView的东西后面会说到.本次先从Search Dialog说起,让大家慢慢理解andr ...
- Spring常用表单验证注解
下面是主要的验证注解及说明: 注解 适用的数据类型 说明 @AssertFalse Boolean, boolean 验证注解的元素值是false @AssertTrue Boolean, boole ...
- .NET零基础入门06:面向对象入门
一:前言 在本系列课程的第一部分,我们说明为了要选择C#作为你成为程序员的第一门语言: • 首先,C#是一门非常优秀的面向对象编程的语言: 凡是对编码感兴趣的同学一定听说过"面向对象编程&q ...
- MySQL Test Suite使用
MySQL Test Suite使用 MySQL自动测试套件(The MySQL Test Suite)用于对MySQL程序进行测试,包括各种功能与存储引擎.包含于MySQL与MariaDB版本代码中 ...