web开发也可以开发APP之ionic+angularjs开发你的APP

 

　　web已经无所不能了，既可以开发基于浏览器的应用，又可以开发基于不同平台的应用了，这里介绍的ionic框架开发的应用能适用于android和ios平台。

在人手不足，想要快速实现原型的时候，在应用对交互要求不是很高的情况下，都可以选择ionic作为开发工具，他可以快速实现你的想法。

这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

贴一下ionic的几个特点：

• 1.ionic 基于Angular语法，简单易学。
• 2.ionic 是一个轻量级框架。
• 3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVVM ，代码易维护。
• 4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
• 5.ionic 专注原生，让你看不出混合应用和原生的区别
• 6.ionic 提供了强大的命令行工具。
• 7.ionic 性能优越，运行速度快。

简单点讲吧：ionic就是一套融合了angularjs的前端框架，集成了一套自己的基于手机端的样式。可以方便的写出适合于手机端的样式，然后使用angularjs来配合后台实现业务逻辑。

闲话不多说了，我们来在本机配置ionic开发环境,并配置安卓android模拟环境

 

1.首先，安装nodejs

　　后续很多软件的安装都是同过npm来安装的（npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，非常便利）

　　 https://nodejs.org/en/download/寻找最新的版本，根据自己机器情况选择安装，我是windows所以选择exe文件直接安装，安装后将安装目录加入到系统环境变量path中就可以了，最后到dos下输入命令:node --version如果现实版本即说明安装成功了。

2.安装ionic

　　说在前面：因为nodejs是国外的东西，然后使用npm安装的时候可能会遇到一些状况，慢，卡等。所以建议先安装淘宝定制的cnmp模块：

　　$ npm install -g cnpm --registry=https://registry.npm.taobao.org

　　然后就可以使用cnmp来安装所需要的模块了：

　　$ cnpm install [name]

　　OK，正式开始安装ionic

　　1>.$ cnpm install -g cordova ionic

　　2>.创建一个应用

　　　　使用Ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个Ionic应用。目前有三种模板,分别也对应三个命令：

　　　　

　　　我本地使用：ionic start myApp tabs创建了一个叫做myApp的应用，我们看一下文件目录：

　　　　　　

　　　　我们主要的页面源文件在:src目录里面。　进去看一下吧：

　　　　

　　　　在page目录里面可以看到项目是分模块组织的：

　　　　　

3.安装android SDK,并配置android模拟环境

　　显而易见的，要事先安装好java环境（不会的自行百度了），提供一个android SDK 的下载地址：http://tools.android-studio.org/index.php/sdk，下载安装后，需要配置环境变量。

　　1>.新建系统变量：ANDROID_HOME ，对应地址：D:\Android\sdk(你的地址) ，再添加一个：ANDROID_SDK_ROOT，对应地址：D:\Android\sdk(你的地址)，

　　　　然后添加到path环境变量：;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools，最后进入dos输入：android -h验证环境变量是否配置成功,出现下面的界面说明成功了：

　　

　　2>.进入android SDK目录，点击SDK Manager打开：

　　　　安装最新版本的android API 26,选中Tools文件夹，

　　　　

　　　　选中Extras文件夹,然后点击安装：

　　　　

　　　如果有条件就FQ安装，没法FQ的可能就比较慢，需要耐心等待....

　　3>.安装gradle,gradle是android的构建工具，需要安装。

　　　　下载地址：http://services.gradle.org/distributions/

　　　　选择3.3版本：

　　　　

　　　　　　解压到磁盘中，然后添加到path环境变量中:D:\gradle-3.3\bin;然后打开dos输入:gradle -v,出现下面界面说明成功：

　　　　　　

　　　　3>.安装安坐模拟器Windows平台加速器：

　　　　　下载地址：https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager，解压到文件夹下，

　　　　　　

　　　　　　如果没安装则点击intelhaxm-android.exe安装，若安装了可以点击silent_install.bat进行更新。

　　　　4.进去 Android SDK 安装目录 点击AVD Manager,进入模拟器管理界面：

　　　　　　

　　　　　　点击create创建模拟器：

　　　　　　

　　　　填入主要内容后点击OK 完成。

 

------------------------------到此为止，我们完成了ionic环境的安装和android模拟器的安装---------------------------------

关于开发调试：

　　1.开发：开发主要基于ionic+angularjs,关于ionic的用法可以参考官方文档，很简单的一个前端样式框架：

　　　　http://www.ionic.wang/css_doc-index.html

　　2.调试：

 　　　　1>.浏览器调试：

　　　　　　运行我们的应用：cd myAPP 

　　　　　　ionic serve 

　　　　　　接下来使用http://localhost:8100/就可以浏览器访问了，在浏览器里面进行开发，非常便利：

　　　　　　

　　　　　　2>.安卓模拟器模拟查看

　　　　　　　　当我们开发完后，使用命令打包成apk然后在安卓模拟器中查看：

　　　　　　　　$ cd myApp

　　　　　　　　$ ionic platform add android

　　　　　　　　$ ionic build android

　　　　　　　　$ ionic cordova emulate android

　　　　　　　　

　　　　　　　　运行成功，红色框就是我们的APP啦！

　　　　　　　　打开看看：

　　　　　　　　

　　　　　　　　挺好的，哈哈。

 

　　3.关于安装包

　　　平台build之后的安装包文件路径：

　　　　D:\nodejs\node_global\myApp\platforms\android\build\outputs\apk

 

注意：我们使用cnpm install ionic 的时候，安装的版本一定要和我们在android SDK里面安装的android API版本保持一致。

　　　具体文件在:

　　　　D:\nodejs\node_global\myApp\platforms\android\project.properties
　　　　D:\nodejs\node_global\myApp\platforms\android\AndroidManifest.xml

　　　

　　　　

 

OK,内容就这么多了，最后还是给附上ionic文档网站（不知道是不是官方的，不过这也不重要，^_^）

http://www.ionic.wang/