淘先锋技术网

首页 1 2 3 4 5 6 7

ionic环境设置

参考：
query mobile教程
HTML教程
CSS教程
AngularJS 教程
javaScript教程
ionic教程
ionic中文官网

ionic常用命令： 

    npm install -g cnpm --registry=https://registry.npm.taobao.org（npm镜像源指向淘宝） 
    cnpm install -g cordova ionic（安装cordova ionic） 
    cnpm update -g cordova ionic（更新cordova ionic） 
    ionic -help（查看帮助） 
    ionic -v（查看版本） 

    ionic start myApp blank（空项目） 
    ionic start myApp tabs（带导航条） 
    ionic start myApp sidemenu（带侧滑菜单） 

    ionic platform add android（添加android平台） 
    ionic platform remove android（移除android平台） 
    ionic build android（编译项目apk）
    ionic emulate android（运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行） 
    ionic run android （相当于build + emulate） 
    ionic serve （开启服务调试） 

    ionic build ios（编译项目ipk）
    ionic emulate ios（运行项目ipk）

一、HTML简介

  1. 语法：HTML文档由HTML元素定义， HTML元素由开始标签、元素内容、结束标签构成。
    图片来源：<a href=http://www.runoob.com/html/html-tutorial.html” title=”” />

  2. HTML定义网页内容
    CSS定义网页布局
    javaScript定义网页行为

  3. 对于html，有广义和狭义的理解。广义的一般把css和js也算进来了，狭义的就是纯html标签。

二、CSS简介

  1. 语法：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
    图片来源：<a href=http://www.runoob.com/css/css-syntax.html” title=”” />
    选择器是需要改变样式的HTML的元素

三、javaScript简介

  1. HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 和 部分中。

四、 jQuery简介

  1. jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程

  2. 语法：$(selector).action() 

    * 美元符号定义jQuery  
* 选择符（selector）选取的HTML元素   
* jQuery的action()执行对元素的操作

五、AngularJS语法：

  1. AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 < script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过表达式绑定数据到 HTML。

  2. AngularJS 表达式写在双大括号内：{{ expression }}。

  3. AngularJS 指令是以 ng 作为前缀的 HTML 属性。

六、ionic安装（win10）

  1. 安装Node.js
    首先，你需要安装node.js，因为 ionic CLI 是基于 Node.js 开发的，需要 Node.js runtime 才能跑起来，你直接下载后没用（前端没有个node.js怎么出来混）
    到Node.js官网下载Node.js
    在win10的cmd中输入node -v可以看到版本说明安装成功

  2. 安装cnpm
    npm 是 Node.js 的包管理器，由于我大天朝网络环境的原因，在使用 npm 的时候经常无法安装包或者下载很慢，于是我们需要一个 npm 的中国镜像，cnpm 是淘宝的 npm 镜像，10分钟同步一次以管理员身份打开终端，输入“npm i cnpm -g”命令，等待安装完成
    cnpm -v如果能够正确显示版本号，则说明安装成功。

    如果安装完后还是找不到这个命令，需要修改npm的安装路径。并把这个路径加入到环境变量。修改安装路径只需要修改文件Nodejs\node_modules\npm\npmrc.

  3. 安装 Cordova & Ionic CLI
    npm i cordova ionic -g或cnpm i cordova ionic -g
    cordova -v和ionic -v如果能显示版本号则安装成功

注如果：ionic使用的时候总是报错，很多可能是版本问题，我们可以指定版本安装
npm install -g [email protected] [email protected]

七、安卓开发环境安装

  1. 安装jdk 

    下载（http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）并安装

在“系统变量”列表中新建一个系统变量“JAVA_HOME”，值为刚才安装的 jdk 的路径，在“系统变量”列表中找到“Path”变量，双击打开“编辑系统变量”窗口将 jdk 的 bin 路径添加至“变量值”末尾并保存



    java –version正常显示并且javac -version正常显示说明jdk安装成功

  2. 安装Android SDK
    官网 http://developer.android.com/sdk/index.html ，国内镜像 http://tools.android-studio.org/index.php/85-tools/110-androidsdk-mirrors
    下载tools_r25.2.3-windows.zip
    将G:\software\web\sdk\tools和G:\software\web\sdk\platform-tools放入环境变量

    运行android命令如果能打开 Android SDK Manager 窗口说明安装

    这里写图片描述

    由于我一般是用真实 Android 设备来开发，所以我只选择了 Android SDK Tools、Android SDK Platform-tools、Android SDK Build-tools、Android Support Repository、Google USB Driver，以及Android API 19-24 的 SDK Platform。如果要使用 Android 内置的虚拟机来运行 App 的话，还需要下载对应版本的 System Image，这里我们不再赘述

八、运行一个实例

  1. 可以使用ionic官方提供的几个app实例，有空白，带有标签和滑动菜单三个可选，我选择的是带有标签的那个，打开命令窗口，进入你计划存放的文件目录，执行命令ionic start myApp tabs，ionic会从github上下载文件到本地。app的源代码存在于www文件中，包括样式和js，可手动修改尝试。

注：如果安装出错可以使用以下命令

    ionic start --v2 myApp tabs --skip-npm 
    cnpm install --save

  1. 等待创建完成，添加 android platform
    进入myApp目录运行ionic platform add android

  2. 编译运行
    ionic run android