HTML5手机APP开发入门(1)

时间:2023-11-16 13:38:32

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

HTML5手机APP开发入门(1)

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

JDK下载

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

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

HTML5手机APP开发入门(1)

Java Path

HTML5手机APP开发入门(1)

Android Path

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

开发工具

sublime Text 3

https://www.sublimetext.com/3

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

Emmt

Angular

ATOM

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

https://atom.io/

安装的插件

HTML5手机APP开发入门(1)

开发语言

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

参考

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

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

First APP

参考

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

任务:完成一个todo List APP

HTML5手机APP开发入门(1)

$ionic start todoapp blank --v2 –ts

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

HTML5手机APP开发入门(1)

$Ionic serve

HTML5手机APP开发入门(1)

OK 运行成功了

下一步部署到android设备上

$ionic run android

HTML5手机APP开发入门(1)

HTML5手机APP开发入门(1)

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

我这里就不用typescript了

从新生成一个项目用JavaScript

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

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

HTML5手机APP开发入门(1)

已经部署到模拟器上