WEBAPP开发教程ionic +cordova环境搭建
凌雪 2018-11-08 来源 :网络 阅读 1084 评论 0

摘要:本文将带你了解WEBAPP开发教程ionic +cordova环境搭建,希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发教程ionic +cordova环境搭建,希望本文对大家学WEBAPP有所帮助。


        因为自己主要研究的是angularjs这个框架,为了更好的发挥它的使用,也为了让自己更好的依赖angular,所以在选择webapp上我选择了ionic(cordova+angualr+ionic   css)   ,实际上它是依托angularjs的一个ui库。关键的是cordova可以提供javascript调用native功能,ionic封装了angular。
     一、ionic环境的配置,
        在环境的配置上 ionic-china   上已经讲的很清楚,但是太于简单了,理想下的情况是会一步到底的,我在安装上遇到了一些问题,网上看的杂七杂八的,害的我装了又卸,都没有说出一些关键的问题,由于今天完成了一个tabs模板的apk打包,就总结一下,安装过程。
      1.jdk的安装
     jdk 1.8.0   (//www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
            安装好之后环境变量配置:
             新建系统变量JAVA_HOME 和CLASSPATH 
             变量名:JAVA_HOME 
             变量值:C:Program FilesJavajdk1.8.0
             变量名:CLASSPATH 
               变量值:.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar;
            变量名:Path 
            变量值:%JAVA_HOME%bin;%JAVA_HOME%jrebin;
    2.android   sdk(//dl.google.com/android/installer_r24.3.4-windows.exe)
         新建变量名                 变量值 
        ANDROID_HOME     D:\webapp\androidsdk(你sdk的路径)
        然后在path里添加(注意前面的分号)   
         ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools(ps:在ionic-china里有详细的sdk配置)
       在sdk工具里只需要勾选3个Android SDK Platform-tools、Android SDK Build-tools、API2+下的SDK   Platform 
    3 cordova 和ionic 安装
     把npm换成淘宝的cnpm
     cnpm install -g cordova ionic  (卸载为npm install -g ionic)
     不过这里需要注意下cordova 还是安装低版本的吧cnpm install -g cordova@6.0.0,
     我问题就出在这里,这里要感谢一下这篇文章(https://www.2cto.com/kf/201710/689801.html)看到与可能版本有问题,我就试着装了6.0.0的cordova   发现以前会一直停在npm i running command 上
   
   
   
    现在成功就入git这步,
    在ionic cordova platform add android上会出现
   
     我选择了no 不然还是要等很久或者不成功 ,当时想到我下了sdk 在在安装就是多余的,就选了no ,就成功了。
     二.下面是一些命令
    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  cordova platform add android(添加android平台) 
    ionic  cordova platform remove android(移除android平台) 
    ionic cordova  build android(编译项目apk) 
    ionic  cordova emulate android(运行项目apk 手机连接在手机运行   模拟器连接在模拟器运行) 
    ionic run android (相当于build + emulate) 
    ionic serve(开启服务调试) 
    在进入ionic cordova build 上花了好多时间,等了很久就成功了,ionic cordova build   android(第一次编译要下载gradle-2.2.1-all.zip和jar   如果gradle-2.2.1-all.zip下载太慢看了别人(//blog.csdn.net/zsmurf/article/details/51151819)直接下载个gradle-2.2.1-all.zip(//services.gradle.org/distributions/gradle-2.2.1-all.zip)
     放到C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094b   下不用解压,不用慢慢的等了,
    就可以打包成apk,我在手机上安装了能运行。
     网上讲了很多大多是为了让项目在模拟器下运行,就配了一些杂七杂八的东西,后面我也会遇到
     现在就可以开启我的ionic的征途了
    (2017.12.3 早上,在自己的笔记本试了,发现不是cordova的版本问题,在npm i 停很久报错,可以绕开这里,通过ionic start   myapp tabs  --no-deps,意思不先安装npm packages  ,成功之后在cd myapp 运行cnpm   install --save,就可以成功了)    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程