zoukankan      html  css  js  c++  java
  • 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:StudyAndroidProject

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

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

          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使用。

               




    ----------------------------------------------------------------------------
    我的小鱼你醒了,
    还认识早晨吗?
    昨夜你曾经说,
    愿夜幕永不开启。
    你的香腮边轻轻滑落的,
    是你的泪,还是我的泪?
    初吻吻别的那个季节,
    不是已经哭过了吗?
    我的指尖还记忆着,
    你慌乱的心跳。
    温柔的体香里,
    那一缕长发飘飘。
  • 相关阅读:
    Entity Framework with NOLOCK
    读取的XML节点中带有冒号怎么办?
    一道数学运算题
    mock基本使用
    json-server基本使用
    axios、ajax、fetch三者的区别
    深入响应式原理
    vue组件传值
    递归与循环的区别
    undefined 和null的区别
  • 原文地址:https://www.cnblogs.com/liuyp-ken/p/5086609.html
Copyright © 2011-2022 走看看