HTML5手机APP开发入门(1)

HTML5手机APP开发入门(1)

开发框架

Ionicframework V2 + Angular 2

具体内容可以参考一下网站

http://ionicframework.net/

http://ionicframework.com/

https://angularjs.org/

开发环境配置

Node.js

安装Node.js 下载最新版本推荐安装 V4.X

https://nodejs.org/en/

还要需要安装Python开发包，推荐安装 V2.xx

https://www.python.org/downloads/

安装完成后下载和安装ionicframework开发包和编译环境

在windows cmd 运行

npm install -g ionic@beta

npm install –g cordova

注意：由于有长城在下载非常慢也有可能失败，最好使用代理或vpn

安装完成后就可以开始生成项目了

Android SDK

这里我推荐安装Android Studio 本人不会java所以不会用eclipse

下载网址

http://developer.android.com/sdk/index.html

安装完android studio后需要下载 Android SDK

Google的东西都必须FQ，不FQ可以找国内镜像服务器

JDK下载

http://www.oracle.com/technetwork/java/javase/downloads/index.html

安装完成后，配置一下环境变量

Java Path

Android Path

启动android虚拟设备的时候需要用到

开发工具

sublime Text 3

https://www.sublimetext.com/3

为了提高开发效率还需要安装一些插件

Emmt

Angular

ATOM

我推荐使用，毕竟是后面出来的感觉比sublime text好用

https://atom.io/

安装的插件

开发语言

Angular2 使用了es6的规范，所以我推荐使用typescript环境

参考

https://angular.io/docs/ts/latest/quickstart.html

以上这些都完成后就可以开始做开发了

First APP

参考

http://ionicframework.com/docs/v2/getting-started/tutorial/

任务：完成一个todo List APP

$ionic start todoapp blank --v2 –ts

注意：还是因为有长城，速度相当的慢，请耐心一点

$Ionic serve

OK 运行成功了

下一步部署到android设备上

$ionic run android

这里有bug据说下个版本解决

我这里就不用typescript了

从新生成一个项目用JavaScript

注意:这里可能还会碰到问题，并没有启动模拟器也没有提示android apk的编译完成 也就是说配置android SDK

的模拟器有问题，这里需要检查

已经部署到模拟器上