[Ionic] Started with Ionic Framework ( macosx )

Ionic 需要Node.js 环境，官网下载：http://nodejs.org/，node 命令默认将安装到 /usr/local/bin

一. 安装Ionic

　　Mac OS X：

　　　　1. 安装Cordova 和 ionic命令行工具：

　　　　　　sudo npm install -g cordova ionic

　　　　2. 如果要使用Ionic客户端ios模拟器需要安装ios-sim npm包，命令：

　　　　　　sudo npm -g install ios-sim

　　　　#模块与命令的对应关系：

　　　　　　/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic

　　　　　　/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova

二. 新建项目

　　使用现有的app模板或空白页在命令行创建新项目：

　　ionic start app_name blank　　　 #新建空白页

　　ionic start app_name tabs　　　　　 #使用自带tab模板

　　ionic start app_name sidemenu　　　#使用自带侧边菜单模板

　　<({

　　　注意：如果在家目录下创建项目，也许会遇到一个问题，提示 mkdir:/home/myIonic: Operation not supported

　　　命令前加上sudo 也不能解决问题，此时需要做一些文件的改动，如下：

weichendeMacBook-Pro:home weichen$ sudo vim /etc/auto_master 


#
# Automounter master map
#
+auto_master            # Use directory service
/net                    -hosts          -nobrowse,hidefromfinder,nosuid
#/home                  auto_home       -nobrowse,hidefromfinder
/Network/Servers        -fstab
/-                      -static

weichendeMacBook-Pro:home weichen$ sudo automount　　# 不重启的情况下使设置生效

　　　上面只是将此行注释掉： /home　　auto_home　　-nobrowse,hidefromfinder

　　})>

三. 配置平台，运行

　　Ionic的应用基于Cordova，所以可以使用Cordova的功能来创建、测试和部署应用，但是Ionic功能提供了做同样事情的简单方法。

　　cd app_name/ && ls　　　　　　 # 进入项目目录并显示文件

　　(ionic platform add ios)　　　　　　# 使 ionic支持 iOS

　　ionic platform add android　　# 使 ionic支持 Android

　　(ionic build ios)　　　　　　　　　# 创建ios应用

　　ionic build android　　　　　　　# 创建android应用

　　(ionic emulate ios)　　　　　　　# 模拟运行, 默认就带一套可运行的模板程序

　　运行 ionic build android 报下面错的解决方法：

[Error: Please install Android target: "android-21".

Hint: Open the SDK manager by running: /Users/weichen/Library/Android/sdk/tools/android
You will require:
1. "SDK Platform" for android-21
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]

　　1. ant 下载： http://ant.apache.org/bindownload.cgi 放入 /usr/local

　　2. android sdk 下载： http://developer.android.com/sdk/index.html 放入 /usr/local

　　　　如果打不开，可以去其它地方下载： http://my.oschina.net/58685474/blog/303825

　　3. vim ~/.bash_profile 配置环境变量：

export ANT_HOME=/usr/local/apache-ant-1.9.6
export PATH=${PATH}:${ANT_HOME}/bin
export PATH=${PATH}:/usr/local/android-sdk-macosx/tools
export PATH=${PATH}:/usr/local/android-sdk-macosx/SDK

　　　　使立即生效，source ~/.bash_profile

　　4. 命令行中运行：/usr/local/android-sdk-macosx/tools/android 自动进入跳出管理界面，把提示中的东西勾选装上。

　　　　① Android SDK Platform-tools (最新版本)

　　　　② Android SDK Build-tools (最新版本)　　

　　　　③ Android5.1.1(API 21)

　　5. ionic platform add android, ionic build android 完成。

　　Note：安装什么样的android系统环境，是由 platforms/android/project.properties 和

platforms/android/CordovaLib/project.properties 里面决定的，不过还是以默认的为准安装环境，否则新建一个项目，又要重新装一遍sdk环境。

四. 创建自己的App

　　首页模板index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
　　 <script src="js/app.js"></script>
    <script src="cordova.js"></script>
  </head>
  <body ng-app="todo">
  </body>
</html>

　　ionic.bundle.js 是 ionic 的 AngularJS 扩展文件，绑定了 ngAnimate 和 ngSanitize，但如果需要其它Angular模块，需要从 lib/js/angular 中引入。 cordova.js 必须是最后一个script文件，在开发文件中看不到，只在运行和模拟app时才自动引入。

　　菜单案例，在body中加入：

<body>
  <ion-side-menus>　　<!-- 菜单控制器 -->
    <ion-side-menu-content>　　<!-- 中间内容区域 -->
    </ion-side-menu-content>
    <ion-side-menu side="left">　　<!-- 左侧，起初隐藏的菜单 -->
    </ion-side-menu>
  </ion-side-menus>
</body>

　　初始化app，在我们自己的 js/app.js 中加入：

angular.module('todo', ['ionic'])

　　这是用Angular创建应用的方式，它引入用来处理上面标签的ionic模块，现在运行还是没有内容，完整的内容是：

<body ng-app="todo">
  <ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>
</body>

　　现在可以运行看到内容了。

五. 测试你的App

　　在桌面浏览器上测试：

$ ionic build ios
$ ionic serve

　　模拟器测试：　　

$ ionic build ios
$ ionic emulate ios

　　作为原生应用运行：

$ ionic run android

六. 构建

https://ionicframework.com/docs

本篇写于 2014-12-26，正是 Angular 国内兴起时，但直到今天才发布出来。

现在看一下开发混合App 对于前端库的选择，如果现在用的是 Angular，那么选择 Ionic 就非常容易上手；

如果现在用的是 Vue 或者 React，那么选择 quasar framework、Framework7 等也不失为一种好的选择。

Link：https://www.cnblogs.com/farwish/p/4186601.html

[Ionic] Started with Ionic Framework ( macosx )

猜你喜欢