Apache Cordova开发环境搭建(一)-Visual Studio

原文:Apache Cordova开发环境搭建(一)-Visual Studio

一、使用Visual Studio开发Apache Cordova手机App

1.版本要求，Visual Studio需求2015或2017

2.在安装的之后勾选 JavaScript应用之Apache Cordova 以及所依赖的工具就可以了。

3.

Visual Studio 2015 的安装程序包括支持 Cordova 应用开发的第三方开源软件：

• Joyent Node.js 让 Visual Studio 能与 Apache Cordova 命令行界面 (CLI) 和 Apache Ripple 仿真器集成
• 为特定的 Cordova 插件手动添加 Git URI 时需要使用的 Git CLI。
• 使用 Google Chrome在 iOS 和 Android 上运行 Apache Ripple 仿真器
• Android 生成过程需要用到的 Apache Ant 1.8.0 或更高版本。
• Android 生成过程需要用到 32 位的 Oracle Java JDK 7。注意： 不支持 64 位的 Java。建议使用Java8
• Android 生成过程和 Ripple 需要用到的 Android SDK。
• Apple iTunes将应用部署到iOS 设备。

二、VisualStudio2015或更高版本安装成功之后，需要进行环境变量配置

很多时候为了VS的安装速度，对JDK、AndroidSDK等在安装VS的时候不会选中。可以使用以前安装过的。

这样的情况下必须进行环境变量配置。

1.为了更好减少错误，建议直接修改系统的环境变量

jdk环境变量配置

Apache Ant 简介和配置

AndroidSdk下载地址和环境变量配置

2.当然可以在、VS的配置中单独修改，可使用Visual Studio检测和维护下列环境变量中的安装路径：

• ADT_HOME 指向 Android 安装路径。
• ANT_HOME 指向你计算机上的 Ant 文件夹。
• GIT_HOME 指向 Git 安装路径。
• JAVA_HOME 指向 Java 安装路径。

Visual Studio 在创建并运行你的应用时会使用这些环境变量。 你可以通过 Visual Studio"选项"对话框来查看环境变量并修改它们的值。

1. 在 Visual Studio 菜单栏上依次选择"工具"和"选项"。
2. 在选项对话框中，选择 适用于 Apache Cordova 的工具，然后选择Environment Variable Overrides。
3. 请选中要修改项的复选框，然后修改该值。

三、使用VS创建Corodva项目

1.创建项目

2.创建结果如下，config.xml 配置器，可以配置各个平台的信息，以及安装管理Cordova插件。

3.目录结构说明

• merges 存放各个平台的特殊的代码，与www目录合并编译，相同的文件merges下的代码文件优先。

• plugins 即插件目录，cordova 访问本地设备属性的原生API也是以插件的形式提供。
• res 适用于各个平台的特殊资源（图标和启动画面）。
• www 包含应用程序代码。
  • css 包含默认空白模板的基本CSS样式。
  • images 建议应用的图片保存于此。
  • scripts 是JavaScript 和 TypeScript 文件默认的保存目录。

 

• config.xml 包含工程的配置文件
• taco.json 存储使 Visual Studio 打造非 Windows 操作系统像 mac 上的项目元数据
• www\index.html 是应用默认的主页面。
• Project_Readme.html 包含有用的信息链接。

4.如果生成成功对应平台下的安装包就可以直接使用了。

四、在刚开始使用Cordova项目时经常遇到的问题整理如下：

1. vs2015 生成 apache cordova项目无响应
2. vs2015 生成 cordova 页面中文乱码
3. VS android应用启动调试Could not locate the Android Debug Bridge (adb.exe)
4. Cordova页面加载外网图片失败，Refused to load the image
5. Cordova 配置WebView可以打开外部链接

更多：

Apache Cordova开发环境搭建（二）VS Code

Cordova事件整理

cordova-plugin-vibration 设备震动整理

更多参考文章：

1.https://segmentfault.com/a/1190000002536799

2.https://blogs.msdn.microsoft.com/visualstudio_cn/2015/03/24/apache-cordovamacvisual-studio/