使用Visual Studio 2015进行Ionic开发
发布于 9个月前 作者 yanxijian 1422 次浏览 来自 分享

公司最近打算开发H5 App,我进行了技术选型。 说实话,VS2015的体积真的好大,不过一条龙服务用起来确实爽。废话不多说,下面开始介绍:

准备工作

  1. 下载 VS2015(含Update1)Node.jsJDKANT以及Android SDKAndroid SDK下载不到的话,自己想下办法哈

  2. 安装JDK 默认会自动添加PATH环境变量,但JAVA_HOME环境变量需要自己配置。

  3. 安装Android SDK 添加ANDROID_HOME环境变量,并将 *%ANDROID_HOME%\platform-tools; %ANDROID_HOME%\tools;*添加到PATH环境变量 Android SDK更新代理可参考这里,建议使用腾讯的镜像

  4. 安装ANT 添加ANT_HOME环境变量,并将*%ANT_HOME%\bin;* 添加到PATH环境变量

  5. 安装Node.js 可以通过修改npmrc(nodejs\node_modules\npm\npmrc)来修改global(-g安装目录)、缓存路径以及NPM源(好像无效?) prefix=D:\nodejs\node_global # -g 安装模块时的路径 cache=D:\nodejs\node_cache registry=http://registry.npm.taobao.org # 淘宝NPM源

  6. 安装Cordova和Ionic npm install -g cordova ionic --registry= http://registry.npm.taobao.org 可能需要的其他库:gulp-concat、gulp-sass

  7. 安装VS2015 1). 安装VS2015时,勾选HTML/JavaScript [Apache Cordova]。因为手动安装了JDK、NodeJS、Android SDK、ANT,这些在安装时如果自动选,取消即可。安卓模拟器可选择不安装。 2). 添加ionic项目模板 VS2015安装好后:工具 -> 扩展和更新 -> 联机,搜索ionic,下载安装Ionic Project Templates For Visual Studio。其中也有其他一些有用的扩展,需要大家慢慢了解了。 安装好后:新建项目 -> 模板 -> 其他语言 -> JavaScript -> Apache Cordova Apps,即可创建相应的项目。如果会TypeScript,下面也有对应的项目模板。 3). 双击项目中的config.xml,可进行相应配置和添加Cordova插件。有时编译不过,可以检查一下配置项,如Android SDK版本等配置。 参考:Visual Studio 2015 和 Apache Cordova 跨平台开发入门

安卓APK签名 假如JDK的bin已经添加PATH环境变量

  1. 用管理员身份,打开命令提示符,执行如下命令 keytool -genkey -v -keystore c:\my-release-key.keystore -alias johnS -keyalg RSA -keysize 2048 -validity 10000 将c:\my-release-key.keystore替换为需要的路径和文件名,johnS修改为实际的别名

  2. 执行命令后,会提示输入相关信息,按实际情况填写即可 pic.png

  3. Cordova项目 配置ant.properties ant.png ant1.png 配置build.json ant2.png ant3.png

  4. Ionic项目 这个比较简单,在"项目\platforms\android\release-signing.properties"(文件不存在自行创建),添加如下信息 ionic.png

iOS远程编译调试 *要求:

  1. OSX:10.9+

  2. XCode 6+带命令行工具*

  3. 同样,安装Node.js、Cordova、Ionic(Ionic可能不需要)。

  4. 安装微软的Remote Build工具 sudo npm install -g remotebuild

  5. 启动 Remote Build Remotebuild start

  6. 第一次启动Remote Build,应该会显示PIN码、机器和端口等信息。没有的话手动生成: remotebuild certificates generate

  7. 在VS2015中进行相应配置 a). 工具 -> 选项 -> 用于Apache Cordova的工具 –> iOS配置,填写前面得到的信息 ios1.png b). 平台选择iOS,设备选择支持的iOS模拟器即可编译调试 ios2.png

其他参考:

  1. 使用 Visual Studio Tools for Apache Cordova 创建第一个应用
  2. 配置Visual Studio Tools for Apache Cordova
  3. Visual Studio 2015 和 Apache Cordova 跨平台开发入门
  4. Get started with Ionic apps in Visual Studio
  5. ionic 中默认安装后,安卓的导航在底部解决方案
  6. remotebuild
  7. AndroidDevTools
  8. Cordova 5.0 无法访问外网,404错误的解决办法

不知道有没有遗漏的,有需要再修改补充

3 回复

不知道为什么有些1、2、3的序号看不到了?预览的时候还是有的。

还是感觉webstorm更好用一些

回到顶部