Ionic开发Android App实战（一）：入门指南

小渣渣

1.Ionic环境安装

Ionic开发是依赖于Nodejs环境的，所以在开发之前我们需要安装好Nodejs。下载安装：http://nodejs.org/
安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功，如果返回版本号则说明成功。
在PowerShell命令行中执行：

登录可见。

这是使用npm包管理器安装cordova和ionic，-g的意思是全局安装，全局安装后在PowerShell中任何目录下都可以使用cordova和ionic的命令。

可能会遇到下面错误：

安装ionic和cordova教程
https://www.itsvse.com/thread-4841-1-1.html
(出处: 架构师_程序员)

2.创建Ionic项目

Ionic官网提供了三个项目模板blank、tabs和sideMenu ，参阅：https://ionicframework.com/getting-started/

登录可见。

我们使用tabs模板创建一个我们的应用，打开PowerShell cd到开发目录，执行：

登录可见。

其中myApp为我们的项目名称

如下图：

C:\project\android>ionic start myApp tabs
√ Creating directory .\myApp - done!
√ Downloading and extracting tabs starter - done!

? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
√ Personalizing ionic.config.json and package.json - done!
> ionic integrations enable cordova --quiet
√ Downloading integration cordova - done!
√ Copying integrations files to project - done!
[OK] Added cordova integration!

Installing dependencies may take several minutes.

  *   IONIC  DEVAPP  *

Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

  -     Test on iOS and Android without Native SDKs
  -     LiveReload for instant style and JS updates

️-->    Install DevApp: https://bit.ly/ionic-dev-app    <--

> npm i
× Running command - failed!
[ERROR]

        > node-sass@4.9.0 install C:\project\android\myApp\node_modules\node-sass
        > node scripts/install.js

        Downloading binary from https://github.com/sass/node-sas ... x64-57_binding.node
        Download complete
        Binary saved to C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
        Caching binary to C:\Users\itsvse_pc\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-57_binding.node

        > uglifyjs-webpack-plugin@0.4.6 postinstall C:\project\android\myApp\node_modules\uglifyjs-webpack-plugin
        > node lib/post_install.js


        > node-sass@4.9.0 postinstall C:\project\android\myApp\node_modules\node-sass
        > node scripts/build.js

        Binary found at C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
        Testing binary
        Binary is fine
        npm ERR! path C:\project\android\myApp\node_modules\fsevents\node_modules
        npm ERR! code EPERM
        npm ERR! errno -4048
        npm ERR! syscall lstat
        npm ERR! Error: EPERM: operation not permitted, lstat
        'C:\project\android\myApp\node_modules\fsevents\node_modules'
        npm ERR!  { Error: EPERM: operation not permitted, lstat
        'C:\project\android\myApp\node_modules\fsevents\node_modules'
        npm ERR!   stack: 'Error: EPERM: operation not permitted, lstat
        \'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules\'',
        npm ERR!   errno: -4048,
        npm ERR!   code: 'EPERM',
        npm ERR!   syscall: 'lstat',
        npm ERR!   path: 'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules' }
        npm ERR!
        npm ERR! Please try running this command again as root/Administrator.

        npm ERR! A complete log of this run can be found in:
        npm ERR!     C:\Users\itsvse_pc\AppData\Roaming\npm-cache\_logs\2018-06-19T06_52_38_238Z-debug.log

出现错误，解决办法，用管理员身份运行cmd，然后再次执行如上命令！！



用cd进入到我们项目中，然后，执行以下命令启动浏览器服务：

登录可见。

执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面，浏览器打开页面时Ionic已经给我们开启了livereload模式，开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面，我们就不用每次修改完毕手动刷新页面了，又极大的提高了我们的工作效率。

如下图：