一、Windows环境配置

1.如果已经安装VS2015,打开【工具】-【选项】找到Cordova选项:

运行依赖关系查看器,用来检测开发环境是否完整。

如果检测显示:

那么就是环境配置完成了。可以直接开发了。

如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可。

一般错误页面提示都是缺少对应的依赖组件,包括如下:

Git

Node.js

Android SDK

JDK

这些组件可以在安装VS时选择安装,不过版本不是最新的。所以一般自己手动安装就行了。

截至本文发布前:VS2015 Cordova目前版本已经是Update 8了。我使用的是Update7,Cordova版本5.1.1,支持Android-23。

注意:Node.js最好安装x86 32位版本。VS官方给的意见就是推荐使用32位版本,如果你安装了64为Node.js那么依赖关系检查有可能提示系统没有安装Node.js。如果始终提示没有安装Node,建议改为32位。经测试,有的机器安装64位正常,有的机器安装64位后会提示找不到Node,根据官方意见改成32位就正常了。

2.如果VS中没有Cordova选项请看下面步骤:

在【工具-选项】中没有Cordova选项,那么就是安装VS时使用了默认安装选项,默认安装选项里不安装Cordova工具。重新打开VS2015的安装包,执行安装程序,选择修改,会弹出所有可安装的列表,将Cordova选项勾上,重新应用即可。建议在安装之前把Android SDK装上,VS安装Android SDK默认使用Google地址,没有VPN的话,会等相当长的时间。

打开VS安装程序,选择修改:

勾选Corvoda:

注意:勾选Cordova同时会自动默认勾选Android SDK和Git等工具选项,上图没有显示Android SKD选项,因为测试用的电脑没有连网,切记安装过程保证网络通畅。

3.如果新装VS

推荐使用VS2015 Update1及以上版本。安装时,选择自定义,将需要的选项勾选,建议安装前将Android SDK安装好。安装步骤如上图所示,同时保证网络通畅。

二、Mac环境配置

1.自己有Mac电脑

下载并安装Xcode工具,提供编译和模拟器。

下载安装Node.js

使用Node指令下载并安装remotebuild等工具

记得使用前先解锁root账户

su root
sudo npm install npm -g
sudo npm install remotebuild -g
sudo npm install ios-sim -g

安装完成remotebuild工具后,启动remotebuild服务:
remotebuild --secure false
注意:--secure false启用非安全模式,在我机器上测试时使用安全链接,无法链接成功,建议使用非安全链接,启动结果如下:

首次启动时会生成一个PIN码,记得一定要记下来,需要用来在VS中配置的,如果没有生成PIN码使用:

remotebuild -test
或者使用
remotebuild -certificates
来生成。默认首次启动会生产对应信息:如下
IP:192.168.1.101
PIN:214021
Port:3000
以上的PIN值是默认生成的PIN码,如果有忘记的,貌似可以使用,如果没有IP信息,自己在Mac中查看下IP即可。
完成上述步骤,打开VS2015 【工具】-【选项】找到Cordova选项,选择【IOS配置】:
将上述获取的信息填入即可,备注:建议安全模式选择false关掉。SSL安全链接我简单试了下,貌似不行,还是关掉吧。
至此IOS环境全部配置完成,只要把Mac电脑和remotebuild远程编译服务开启即可,同时保持网络通畅。
Xcode的模拟,会在VS发出编译请求后,自动开启。

2.没有Mac电脑

使用微软账号申请一个免费的Mac云端虚拟机,或者自己搭建Mac虚拟机即可,环境配置同上。

结束语:Hello Word程序将会在下篇中详细介绍,包括编译生成,模拟器,真机调试等内容。本篇仅仅介绍环境配置。如果你喜欢,请关注,后续会继续推出。

VS2015 Cordova Ionic移动开发(一)的更多相关文章

  1. VS2015 Cordova Ionic移动开发(三)

    一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...

  2. VS2015 Cordova Ionic移动开发(二)

    一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结 ...

  3. [转]VS2015 Cordova Ionic移动开发(一)

    本文转自:https://www.cnblogs.com/UltimateAvalon/p/5328642.html 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找 ...

  4. VS2015 Cordova Ionic移动开发(五)

    一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...

  5. VS2015 Cordova Ionic移动开发(四)

    一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方 ...

  6. VS2015+cordova+ionic安装配置

    VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Andro ...

  7. 实践分享:开始用Cordova+Ionic+AngularJS开发App

    http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程 ...

  8. Cordova/Ionic Android 开发环境搭建 - Windows系统

        电脑操作系统 - windows 10 IDE - WebStorm 2019 Node v10.15.3 npm v6.4.1 Ionic v3 Angula v5 Cordova 移动设备 ...

  9. ubuntu15.10下搭建cordova+ionic开发环境

    安装jdk 在命令下输入java如果没有安装会提示该命令包含于openjdk软件包 sudo apt-get install openjdk然后按下tab会列出openjdk开头的软件包 我这里就选择 ...

随机推荐

  1. LinkedList源码解析

    LinkedList是基于链表结构的一种List,在分析LinkedList源码前有必要对链表结构进行说明.1.链表的概念链表是由一系列非连续的节点组成的存储结构,简单分下类的话,链表又分为单向链表和 ...

  2. 分割函数和根据Id串返回名字

    需求:函数传入一个字符串参数 例如  123-456 将这个字符串123-456拆成两个值 123   456,在通过两个值分别查出数据(例如 张三  李四),拼接成     张三-李四 --声明变量 ...

  3. [转]ASP.NET MVC 入门7、Hellper与数据的提交与绑定

    ASP.NET MVC提供了很多Hellper的方法,Hellper就是一些生成HTML代码的方法,方便我们书写HTML代码(有一部分的朋友更喜欢直接写HTML代码).我们也可以利用.NET 3.5的 ...

  4. F(x)

    Problem Description For a decimal number x with n digits (AnAn-1An-2 ... A2A1), we define its weight ...

  5. 使用Windows Azure创建Linux系统虚拟机-下

    如何将数据磁盘附加到新虚拟机 您的应用程序可能需要存储数据.要这样设置,您可以将数据磁盘添加到先前创建的虚拟机.要做到这一点,最简单的方法是将空数据磁盘连接到本机. 在Linux上,磁盘资源通常由Az ...

  6. WordPress模版结构

    一套完整的WordPress模版应至少包括如下文件: style.css : 样式表文件 index.php : 首页模板 archive.php : 文章归档/分类目录模板 404.php : 40 ...

  7. Linux vim的一些命令

    一.vi/vim的多行注释及取消注释 1.多行注释 (1) 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 (2) 按大写字母 ...

  8. BeanPostProcessor 的使用,实现在对象初始化之前或者之后对对象进行操作

    import java.lang.reflect.Field; import org.springframework.beans.BeansException; import org.springfr ...

  9. HW3.1

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  10. HW2.21

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...