从零开始安装配置 ionic 并创建 helloIonic 项目
- 推荐安装 node v6.10.2 LTS 版本，如果使用最新版本 v7.8.0 会遇到错误。
- 安装 cordova & ionic
- npm install -g cordova ionic
- 创建项目
- ionic start helloIonic tabs --v2
- 以上命令从 ionic 已有的 tabs 模板创建名称为 ‘helloIonic’ 的项目
- ionic 提供了如下几个模板：tabs、sidemenu、blank、super、tutorial
- 如果不指定模板则会默认使用tabs模板创建项目
- 省略参数 --v2 则会使用 Ionic v1 创建项目
- 进入项目目录
- cd helloIonic
- 启动项目：如下三种方式启动项目
- 通过 ionic serve 在浏览器中调试运行项目
- 在 Android 模拟器或者真机上运行项目
- 将项目导入到 WebStorm 中，在 Run/Debug Configurations 窗口中，添加 PhoneGap/Cordova 类型的Configuration，并设置好 Command 及 Platform 参数，即可直接从 WebStorm 中运行项目
如何在 Android 真机或者模拟器上调试运行 ionic 项目
- 首先需要安装好 android sdk，并配置好 ANDROID_HOME 环境变量
- 进入项目目录，执行以下命令：
- ionic platform add android （添加 android 平台）
- ionic build android （生成 android 的 apk 文件）
- ionic emulate android （在模拟器上运行）
- 上述 build、emulate两个命令亦可使用 ionic run android 代替
- ionic run android （在模拟器或者真机上运行）
- 若连接有多台手机，可以通过添加参数 --target=[真机标识码] 来安装到指定手机
- 命令 avd devices 可以获取可用的模拟器或真机的标识码等信息。
- 注意：
-
android sdk tools 如果是最新的 v26.+ 版本，则会报错，需要卸载该版本的sdk tools，建议安装较老的 v25.2.3 版本，再按照上述步骤，则可以成功在模拟机或者真机上运行。
-
在模拟器或真机上运行后会遇到网络连接的问题，解决方式如下：
- 修改 platforms\android\platform_www\cordova.js 文件第928行代码为：
- nativeToJsBridgeMode = nativeToJsModes.ONLINE_EVENT
- 之后再执行 ionic run android 命令尝试运行即可，如果还是无法登录，继续修改platforms\android\assets\cordova.js文件（该文件应该是上面文件在Cordova build android拷贝得到的，原则上会随之更改）第928行代码为：nativeToJsBridgeMode = nativeToJsModes.ONLINE_EVENT，重新运行即可。
-
在浏览器中运行也会有网络连接的问题，解决方式如下：
- 安装并启用 Allow-Control-Allow-Origin 插件（chrome拓展程序）使网络连接正常
- 如果依然提示网络连接错误，则尝试刷新或重启浏览器
-
ionic 项目结构（以 helloIonic 项目的目录结构为例）
- hooks 该目录下的文件是在编译 cordova 时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
- node_modules 该目录下文件为 node 相关依赖
- plugins 该目录下的文件为 cordova 插件
- scss 该目录下为 scss 文件，发布时编译这个目录下的文件输出到 www 的 css 目录中
- www 项目的开发目录，页面、样式、脚本和图片等都放在该目录下
- css
- img
- js
- lib
- index.html
- bower.json bower配置文件
- config.xml Ionic的配置文件，可以配置 app 的名称、描述信息等
- gulpfile.js gulp 构建工具的执行文件
- ionic.project Ionic 的项目文件，可以配置项目名称、app_id 等信息，新版本中该文件名称为 ionic.config.json
- package.json npm 配置文件
网友评论