草庐IT

混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)

Lzy頴 2023-03-28 原文
1、ionic简介 

为什么选用ionic: 

  1. 彻底开源且免费

  2. 性能优异

  3. 基于红的发紫的AngularJs

  4. 漂亮的UI

  5. 强大的命令行(基于更热门的nodejs)

  6. 开发团队非常活跃

  7. ngCordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便

  8. 开源免费的webfont icon库ionicons,基本满足你icon需求

 

2、相关下载: 

Node.js(npm安装工具) :  https://nodejs.org/en/

jdk (android编译依赖)  :  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

android (ADK编译): http://www.androiddevtools.cn/

Sublime text插件 :http://www.sublimetext.com/

WebStorm 开发工具 :https://www.jetbrains.com/webstorm/download/#section=windows

 

ionic2.x开发工具建议: Webstorm(开发) + Ant (打包)

注意事项: 建议所有程序管理员运行包括cmd androidsdk避免莫名的问题如sdk打不开cmd某些命令不能执行。

大致步骤(注意安装顺序):安装node.js - 安装jdk - 安装android(adk) – 安装apache ant - 命令安装ionic - 创建项目 - 编译项目apk 

 

3、安装Node.js 

 3.1 nodejs简介

 

  3.1.1 为什么要选用nodejs?

 

 

  3.1.2 nodejs 下载以及说明

 

     首先在我们官网下载Nodejs的安装包进行安装:https://nodejs.org/en/ 

 

  

 

 

 

      

 

 

V6.10.0 LTS(9.75MB)——长期支持版,成熟稳定

V7.7.3 Current(9.75MB)——现在最新版本,最新特性、不稳定 作为新手不用纠结,随意选一个下载即可。

 

 3.1.2 开始安装nodejs

  

  (1) 下载完后进行nodejs安装.可自定义安装,默认是安装在C:\Program Files\nodejs 

 

    点next进行安装(注意避免中文目录)

 

  

 

  

在命令行cmd控制行

输入:node –v,控制台将打印出:v7.7.2  提示安装成功。

 

 

 

这样,常规NodeJS的搭建到现在为止已经完成了,迫不及待的话你可以在cmd命令行中键入“node”进入node开发模式下,输入你的NodeJS第一句:”hello world“ – 输入:console.log(‘hello world’)。这里就不再多作演示了。

 

该引导步骤将node.exe 文件安装到C:\Program Files\nodejs\目录下,并将该目录添加进path环境变量

 

注意:环境变量中path的nodejs路径决定你安装后的目录路径

 

(2)  npm 详解

 

   npm作为一个NodeJS的模块管理,之前我什么都不懂,从网上找各种安装教程,弄的五花八门,走了很大的弯,现在将其整理出来,方便各位网友查看。

  

  ①、我们要先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立”node_global”及”node_cache”两个文件夹。如下图 

 

  

  

②、启动cmd,输入

npm config set prefix "C:\Program Files\nodejs\node_global"

 

npm config set cache "C:\Program Files\nodejs\node_cache"

③、现在我们来装个模块试试,选择express这个比较常用的模块。同样在cmd命令行里面(管理员权限运行cmd),输入

 

npm install express –g

 

(“-g”这个参数意思是装到global目录下,也就是上面说设置的“C:\Program Files\nodejs\node_global”里面。)。待cmd里面的安装过程滚动完成后,会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图 

 

 

④、关闭cmd,打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图 

 

 

⑤、进入环境变量对话框,在系统变量下新建”NODE_PATH”,输入”C:\Program Files\nodejs\node_global\node_modules“。(ps:这一步相当关键。) 
2014.4.19新增:由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量”PATH”修改为“C:\Program Files\nodejs\node_global\”),要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。 

 

 

 

⑥、以上步骤都OK的话,我们可以再次开启cmd命令行,进入node,输入“require(‘express’)”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图(如出错一般都是NODE_PATH的配置不对,可以检查下第④⑤步) 

 

 

OK,这样就搞定了,只要配置好之后,通过管理员权限安装模块就可以很好管理目录了。

 

 

 

⑦、查看npm 版本号 :

 

 

 

3、安装JDK(androidSDK需要的) 

 3.1 下载完jdk后,点next进行安装(注意避免中文目录)

  

 

 3.2 安装后cmd执行java -version看到版本就是安装成功了(无需设置path)(我这里的版本是jdk1.8)


    

 

4、安装androidSDK 
 

 4.1 sdk下载

  开发android的道友,肯定都听说过这玩意。大家可以在http://www.androiddevtools.cn/上进行下载相应版本。

   

 

  下载完后,点next进行安装(注意避免中文目录)

 

  

 

  4.2  设置环境变量全局访问android

 

  我的电脑 - 右键属性 - 高级系统设置 - 环境变量 

  新建变量名               变量值 
  ANDROID_HOME     D:\ionic\androidsdk(你sdk的路径)

  然后在path里添加(注意前面的分号  
  ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

  执行android -h看到命令即安装设置成功

 

 

注意:执行androidsdk目录下的SDK Manager.exe即可打开工具包 如果遇到打不开的情况请用管理员运行!!!

 

 

配置AndroidSDK 国内无法访问google服务器 所以列表是空的需要配置镜像 
选择Tools - Options 打开设置界面

 

 

填入mirrors.neusoft.edu.cn 端口80

并勾选 “Force https://... sources to be fetched using http://...单击Close关闭”

 

 

依次选择Packages - Reload(或者重新打开)

这里千万注意只需要勾选3Android SDK Platform-toolsAndroid SDK Build-toolsAPI23下的SDK Platform (编译的时候会提示你需要的api版本,目前是API23) 
如果你勾选了其它的,可能要下载2、30G的东西。像我这样选只需要下载200M

 

 

 附加:项目集成Crosswalk需要勾选Extras下的Android Support Repository和Google Repository否则会报错 

 

接受 - 安装

 

 

安装完的列表 新版ionic只需装23,如果编译遇到错误就安装API 22的platform

 

 

 

 5、安装 Apache ant 

  5.1 下载ant

  ant下载地址: http://ant.apache.org/bindownload.cgi

  

  

 

 5.2  下载安装完后进行配置环境变量

 

Windows下ANT用到的环境变量主要有2个: ANT_HOME 和 PATH。 

eg:
1. 设置ANT_HOME指向ant的安装目录(系统变量)。 
设置方法:ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6

2. 设置bin和lib目录到PATH变量中(用户变量)。将%ANT_HOME%\bin; %ANT_HOME%\lib添加到x变量的path中。 
设置方法:PATH = %ANT_HOME%\bin; %ANT_HOME%\lib

安装如果不成功可以把%ANT_HOME%换成真实的路径。

如:     D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib

安装完成以后在cmd中输入 ant -version 验证是否安装成功。

 

  6、下载安装ionic、demo 本地、创建/编译项目 

  

1.使用npm下载ionic模板项目下载到本地。中间会有一些问询,比如是否使用sass.app的命名等。

  npm install -g  cordova ionic

 

  

 

执行 cordova ionic 命令、运行下面的命令来确认它们被成功安装:

 

cordova (当前最新版本为v6.5.0)

ionic (当前最新版本为v2.2.1)

 

 

 

 1、开始创建项目(以管理身份进行运行Node.js command prompt)

  

环境搭建完毕,现在开始创建项目编译APK

这里可以指定目录下进行创建项目

 

 ionic start  myionictest tabs(创建过程y/n询问是否打开官网n即可)

 查看创建的目录文件夹

 

 

 

 

 

myionictest 就为项目名称,进入myionictest 这个文件夹:

 

cd myionictest

 

2. 添加android平台:

 

ionic platform add android 

 

 

 

 

3. 生成android apk:

 

ionic build android  

 

 

 

 

 

 查看生成apk 目录

 

 

 

 

 

 

 

现在我们可以运行ionic server预览下项目

 

 现在我们可以运行ionic server预览下项目、显示如下已经搭建好了一个移动混合式app ionic 框架

 

 

此步骤说明(如果此过程下载本地不了建议通过以下这种方式把gradle-2.2.1-all.zip下载下来配置):

博客链接:http://download.csdn.net/detail/capmiachael/9693458

 

附加gradle官网链接下载、根据ionic对应gradle版本下载即可

 

gradle 下载链接:http://services.gradle.org/distributions/    

 

 

4. 在android模拟器或真机中模拟:

 

ionic emulate android 

  

5、其中3和4可以合并为:

 

ionic run android 

  

 即生成apk,并在模拟器或真机中模拟。

 

6、更新ionic等

    a.更新cordova及ionic包

  npm update -g cordova ionic 

 

b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:

 

ionic lib update 

 

7.展现ionic项目结果(显示在ios和Android上的样式)

 

ionic serve --lab 

 

说明: 运行emulate/run命令的时候会在platforms目录下生成apk.

在执行platform和emulate命令的过程中如果出现报错大多是因为android环境没有安装完全导致的。请在cmd中输入android打开android SDK manager检查相关的包是否已经安装完全。

一般来说,tool和emulator都是必须要安装的.然后选择某一版本的android API进行安装。

 

常用命令: 

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 myionictest blank(空项目) 
ionic start myionictest tabs(带导航条) 
ionic start myionictest 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(开启服务调试) 

 

 如果小伙伴看到了此文章,按照我整理的文档步骤进行操作、遇到了问题可以随时找我解决。

  工作了四年多,一直专注于前后台运维相关的开发工作、前几年专注传统行业OA、商城、CMS、电信、医疗相关管理软件开发、慢慢的从传统行业跳到互联网公司工作,慢慢的通过一年两年互联网公司项目的接触。客户端app与服务器结合开发流程、敏捷式管理、自己不断的摸搜学习也有了自己的一套学习方式和经验、互联网给我带来的技术更新之快要求也高、所有需要不断要求自己跟上节奏、前端的崛起、大数据趋势、随着更多的大学生想步入IT行业,要求也不像三四年前那会学习一门java语言会个div+css就可以找到工作。如果是新手想要步入互联网行业想做前端,我非常愿意跟你聊聊谈谈作为你的一个参考、老司机也是一个有故事的人。慢慢的转向移动端开发、学习html5、css3、angularjs、nodejs、ionic等技术 ionic是我目前主要学习的一个接近原生国外UI的一个框架技术、混合式开发未来将有可能运用到更多管理软件开发,这只是我自己的一个看法。ionic 开发app一个是成本低、一个人就可以开发一套安卓、iOS app 而且体验也不错。现在对ionic 有一个全新的认识、网上很多搭建教程都不是特别全面、 这个是经过我本人搭建了一遍总结下来的、也有一些参考网上的就没有多写了,就借用过来。

最后帮自己的公众号做一个宣传,主要是分享 污公害、纯天然不含广告、 想了解可以关注、不感兴趣的忽略。

微信公众号搜索:zixuncool  或  资讯酷 

 

ionic2.x 混合式开发交流群: 

 

有关混合式app ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)的更多相关文章

  1. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  2. ruby - 如何测试正在使用 RSpec 和 Mocha 调用的混合类方法? - 2

    我有一个模块:moduleMyModuledefdo_something#...endend由类使用如下:classMyCommandextendMyModuledefself.execute#...do_somethingendend如何验证MyCommand.execute调用了do_something?我已经尝试使用mocha进行部分模拟,但是当未调用do_something时它不会失败:it"callsdo_something"doMyCommand.stubs(:do_something)MyCommand.executeend 最佳答案

  3. ruby-on-rails - 为什么 DataMapper 使用混合与继承? - 2

    所以我只是对此感到好奇:DataMapper为其模型使用混合classPostincludeDataMapper::Resource虽然active-record使用继承classPost有谁知道为什么DataMapper选择这样做(或者为什么AR选择不这样做)? 最佳答案 它允许您从另一个不是DM类的类继承。它还允许动态地将DM功能添加到类中。这是我正在处理的模块中的类方法:defdatamapper_classklass=self.dupklass.send(:include,DataMapper::Resource)klass

  4. ruby-on-rails - 将 Ruby 代码和文字标记与 Haml 混合 - 2

    如何用HAML编写这个ERB:#OR我可以:=some_ruby_code+":"#and=some_ruby_code%br但我不想在这里连接,我想将它写成内联:(=some_ruby_code):#and(=some_ruby_code)%br 最佳答案 =some_ruby_code+":"-#and=some_ruby_code+""编辑1:我不确定您在寻找什么。你想要其中之一吗?==#{some_ruby_code}:-#and==#{some_ruby_code}或==#{some_ruby_code}:-#and=so

  5. ruby - 如何从 Sass 混合方程中删除测量单位? - 2

    我编写了一个非常简单的Sassmixin,用于将像素值转换为rem值(请参阅JonathanSnook的articleonthebenefitsofusingrems)。这是代码://MixinCode$base_font_size:10;//10px@mixinrem($key,$px){#{$key}:#{$px}px;#{$key}:#{$px/$base_font_size}rem;}//Includesyntaxp{@includerem(font-size,14);}//RenderedCSSp{font-size:14px;font-size:1.4rem;}这个mixi

  6. ruby - 如何对数组的所有元素执行 bool 运算并将结果混合在一起? - 2

    我想AND或OR数组中的所有元素,但要有一些控制,如散列元素选择所示。这是我希望实现的行为:a=[{:a=>true}­,{:a=>false­}]a.and_map{|hash_element|hash_element[:a]}#=>falsea.or_map{|hash_element|hash_element[:a]}#=>true在Ruby中是否有一种巧妙、干净的方法来做到这一点? 最佳答案 您可以为此使用all?和any?:a=[{:a=>true},{:a=>false}]a.any?{|hash_element|has

  7. ruby - Prawn PDF表格混合格式 - 2

    我正在尝试使用prawnpdf在ruby​​中生成一个简单的表格。我需要单元格中的一些文本是粗体,而一些不是粗体。例如:现在按照一些示例,我使用以下代码进行了基本的表格渲染:pdf.table([["1.Rowexampletext","433"],["2.Rowexampletext","2343"],["3.Rowexampletext","342"],["4.Rowexampletext","36"]],:width=>500,:cell_style=>{:font_style=>:bold})但我完全看不出有什么办法可以用不同的格式将更多文本插入到第一个单元格中。(在这种情况下

  8. ruby-on-rails - 我们是否将 Rails ActiveRecord 用作混合结构,即数据结构 + 对象? - 2

    我使用Rails已经4年多了,所以很明显我喜欢Rails并且喜欢按照Rails方式做事,但有时我会在不知不觉中陷入阴暗面。我最近学习了UncleBob的CleanCode。我在看第6章,有点困惑我们作为Rails开发人员是否违反了OO设计的最基本规则,即Demeter法则或封装?得墨忒耳法则指出,一个对象不应该知道另一个对象的内部结构,也不应该调用方法返回的对象的方法,因为当你这样做时,它表明一个对象对另一个对象了解太多。但我们经常从一个模型中调用另一个对象的方法。例如,当我们有像“订单属于用户”这样的关系时。然后很多时候我们最终会执行order.user.name或者为了防止它看起来

  9. ruby-on-rails - 尽管安装了 therubyracer 和 nodejs,但找不到 JavaScript 运行时 - 2

    我尝试在CentOS5上运行Rails应用程序并不断收到thiserror:CouldnotfindaJavaScriptruntime.Seehttps://github.com/sstephenson/execjsforalistofavailableruntimes.(ExecJS::RuntimeUnavailable)我同时安装了NodeJS(v0.8.15)和therubyracer(libv8)。这是我的gemlist:***LOCALGEMS***actionmailer(3.2.9,3.2.8)actionpack(3.2.9,3.2.8)activemodel(3.

  10. ruby-on-rails - 混合 ActiveRecord 查找条件 - 2

    我想根据created_on>=somedateANDnameINsomelistofnames的组合查找记录。对于“>=”,我必须使用sql条件。对于“IN”,我必须使用条件散列,其中键是:name,值是名称数组。有没有办法将两者结合起来? 最佳答案 您可以在rails2.1及更高版本中使用命名作用域ClassTest"created_on>2005-01-01"named_scope:named_fred,:conditions=>{:name=>"fred"}end那么你可以做Test.created_after_2005.n

随机推荐