Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)

以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力。于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic。看起来简单,但是因为他们各自有一些依赖,林林总总,最终涉及的内容便不少了。

  如下所示:

  环境搭建:window

    1、JAVA-SDK 安装配置(版本7以上)

      这个没什么难度,到官网下载jdk,然后按照步骤配置环境变量即可。配置完成后,记得校验jdk安装是否成功。

      JDK安装及环境变量配置

    2、Android-SDK 安装配置

      Android的SDK安装配置我不怎么熟悉,关键是安装文件过于巨大。所以我用的公司提供的安装包,解压好即可使用。

      Android SDK下载和安装以及环境变量配置

    3、Nodejs 安装

      之所以要用NodeJS主要原因在于,Cordova、Ionic等需要依赖该NPM平台进行安装。

      淘宝NPM镜像 因为某些原因,在国内安装NPM上的插件,不FQ的话,基本上无法成功。所以,大家感谢它吧。

      windows环境下,通过CMD进入命令窗口,在命令行输入: npm install -g cnpm --registry=https://registry.npm.taobao.org然后等着它执行完成。

    4、Cordova CLI 安装

      windows环境下,通过CMD进入命令窗口,在命令行输入:cnpm install -g cordova,然后等着它执行完成。

      

   4.1、创建Hybrid App 

      4.1.1)创建一个目录,用于存放你的android项目

        例如:E:\Study\Android\Project

      4.1.2)进入你要创建项目的路径

       首先通过CMD进入到命令窗口,然后在命令行输入:e: 进入E盘,再输入:cd E:\Study\Android\Project

      4.1.3)创建一个应用程序(大家可以观察操作前后该目录的变化)

        cordova create hello com.example.hello HelloWorld

        参数说明:
          1--hello:即创建的项目目录名
          2--com.example.hello:项目的唯一id
          3--HelloWorld:应用的显示名称

      4.1.4)添加平台(大家可以观察操作前后该目录的变化)        

          输入命令行:cd hello (进入到项目目录中)

          输入命令行:cordova platforms add android    

      4.1.5)添加Cordova操作原生设备的插件(大家可以观察操作前后该目录的变化)

              通过网上资源获取(命令行依旧在项目目录中)

              cordova platforms plugin add cordova-plugin-camera
              其中 cordova-plugin-camera 为特定的插件名,输入命令后,npm通过网上资源下载,并添加到项目中。

      4.1.6)打包(大家可以观察操作前后该目录的变化)

          打包Android 的app,则需要输入(命令行依旧在项目目录中)
          命令行输入:cordova build android

  开发框架  Ionic

    1、安装Ionic  

          windows环境下,通过CMD进入命令窗口,在命令行输入:cnpm install -g ionic,然后等着它执行完成。

    2、下载AngularJS包

         大家自个百度吧。我再提供一个学习的网站(汇智网~貌似有推广效果,网站不允许~囧),大家共勉之。

  

  开发环境:Eclipse 4.4 (Luna)

    1、安装插件JBoss Developer Studio,该插件中包含了AngularJS的语法提示,可以为初学者提供极大的助力。我这边不知道怎么回事,安装成功了,但是在eclipse界面并没有任何相关字眼,折腾了半天没有效果后。我目前使用的是sublime text2进行开发,这玩意整插件也整得很酸爽! 

        JBoss Developer Studio安装及项目导入

     

  Debug 工具:Ripple Emulator

   1.安装Ripple Emulator
     进入命令行 cnpm install -g ripple-emulator

    2.进入cordova 项目路径
     命令运行:ripple emulate

      3.测试工具会自动生成本地测试地址,如:
    http://127.0.0.1:4400/?enableripple=cordova-3.0.0
    该地址可以拷贝到chrome firefox使用。

时间: 2024-08-10 17:08:41

Hybrid App混合模式移动应用开发(AngularJS+Cordova+Ionic)的相关文章

Hybird App ( 混合模式移动应用)开发初体验

最近1,2个月一直都尝试开发一款hybird app,遇到了很多问题,谈谈自己的体会. Hybird app (混合模式移动应用),它利用例如安卓端webview组件+HTML5内嵌的方式混合的方式开发的移动应用, 好处显而易见,由于内嵌的是Html5, 所以跨平台,扩展性,开发成本都是很不错的优势. Hybird App拥有很多从开发工具到打包发布的解决方案,比较出名的是来自Adobe的phonegap, 国内有AppCan,这2种解决方案都有比较好的工具平台.这次我采用的的是Appcan,

Hybrid APP混合开发的一些经验和总结

Hybrid APP混合开发的一些经验和总结 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1.混合开发概述 Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发.Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势. 目前已经有众多Hybrid App开

(一)Hybrid app混合开发模式

hybrid app是什么? 这里我们先看一下词条上的定义 Hybrid App:Hybrid App is a mobile application that is coded in both browser-supported language and computer language. They are available through application distribution platforms such as the Apple App Store, Google Play

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

Ionic构建Hybrid App - 上海地铁图

Qunee有一个 上海地铁图的例子,有客户希望转成mobile app,考察过android的webview,以及PhoneGap等多种Hybrid App方案后,最后选择使用ionic,准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架,借助phoneGap + angularJS实现一套跨平台,轻量的移动UI方案,本文将介绍借助ionic实现移动版Qunee上海地图的示例 背景知识 安装ionic所需软件环境 - java

Native App、Web App 还是Hybrid App

Native App.Web App 还是Hybrid App? 技术 标点符 1年前 (2014-05-09) 3036℃ 0评论 一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访问应用程序商店,如苹果的App Store.安卓市场.Google Play等.在技术实现上一般采用针对操作系统的特定语言进行编写,如:使用Objective-c开发

Native App、Web App 还是Hybrid App?

一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访问应用程序商店,如苹果的App Store.安卓市场.Google Play等.在技术实现上一般采用针对操作系统的特定语言进行编写,如:使用Objective-c开发IOS应用,使用Java+Android开发android应用. Native App的优点: 可以在应用商店轻易地找到并且能在手机主

Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova

转载请注明出处:http://www.cnblogs.com/xdxer/p/4111552.html [ctrl+左键点击图片可以查看原图] 在上一篇关于Hybrid App Development的文章中,我讨论了一下在iOS下UIWebView的使用方法.但是光使用一个UIWebView所提供的功能还是完全不能满足我们的需求.   关于造轮子的思考: 在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但是考虑到一个问题,如果在Hybr

Ionic开发Hybrid App问题总结

http://ionichina.com/topic/5641b891b903cba630e25f10 http://www.cnblogs.com/parry/p/issues_about_build_hybrid_app_with_ionic.html 作者:Parry 出处:http://www.cnblogs.com/parry/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 此篇文章主要整理了最近在