Apache Cordova开发环境搭建-Visual Studio

Posted lonelyxmas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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在 iosandroid 上运行 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/











以上是关于Apache Cordova开发环境搭建-Visual Studio的主要内容,如果未能解决你的问题,请参考以下文章

cordova环境搭建

Ionic+Cordova WebApp Android打包及环境搭建

Cordova+ionic 开发hybird App --- 开发环境搭建

webapp开发学习---Cordova环境搭建

vs2015-Cordova开发安卓应用环境搭建

Mac下Cordova开发环境搭建