美文网首页
ionic + cordova 开发App环境配置

ionic + cordova 开发App环境配置

作者: 浅笑6666 | 来源:发表于2019-12-06 10:33 被阅读0次

    1.jdk安装与配置

    1.1 jdk下载地址:

    jdk下载地址

    jdk下载

    下载完毕安装即可

    1.2 环境变量配置

    a-系统变量增加:JAVA_HOME

    把jdk的安装路径复制即可

    JAVA_HOME

    b-系统变量增加:CLASSPATH

    值为 ------

    .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

    注意开头的一个点

    CLASSPATH

    c-在Path系统变量的后面增加

    ------ ;%JAVA_HOME%\bin;

    image.png

    d-命令javac正常运行即可

    image.png

    2.android环境变量配置

    2.1 下载SDK Tools----

    http://developer.android.com/sdk/index.html#Other

    image.png

    2.2 下载完毕,安装或者解压后,在相应目录下找到并打开SDK Manager.exe

    image.png

    SDK Manager默认勾选了一些选项,直接点击Install packages安装即可

    image.png image.png

    如果安装过慢,可以用国内的镜像,或者分包下载

    http://www.androiddevtools.cn/

    image.png

    找到相应的包下载即可:

    http://mirrors.opencas.cn/android/repository/

    image.png

    2.3 Android环境变量配置

    a-找到SDK Manager所在的目录

    上面下载的包都在同一目录下

    image.png

    b-新建系统变量:Android

    把platform-tools和tools这两个文件夹的路径添加到变量值里面,中间用分号隔开

    image.png

    c-在Path系统变量的后面增加------ ;%Android%

    image.png

    d-命令adb正常运行即可

    image.png

    3 安装ionic和cordova

    a-通过npm全局安装

    image.png

    b-测试是否成功安装

    image.png

    c-如果npm安装过慢或不成功,可以试试国内淘宝的npm镜像


    4.创建项目、打包、发布

    4.1 创建项目:ionic start appName

    image.png

    创建过程会问是否创建ionic.io账号,n即可

    image.png

    4.2 进入创建好的项目目录下,增加android平台

    成功增加后会在项目下增加一个platforms的文件夹

    image.png

    4.3 打包:在项目下用命令:ionic build android 打包

    下载的过程会比较久

    image.png

    网络不好的时候会直接报错误

    image.png

    所以直接拷贝一份成功打过包的.gradle文件夹到本机用户名下就好:

    image.png

    成功打包后,会在platforms/android下增加一个build文件夹

    打包好的apk在platforms/android/build/outputs/下,可以拷贝到手机上安装了

    image.png

    4-4 直接通过usb数据线在手机上安装

    a-用数据线连上手机,输入adb devices命令,测试手机是否成功连接

    image.png

    b-运行ionic run android直接安装打过包的apk到手机上

    image.png

    c-真机演示效果

    image.png

    但是在chrome浏览器的虚拟手机中和IOS手机中,tabs是在下面的

    image.png

    解决方案如下:

    在www/js/app.js中,对配置config的匿名函数增加一个参数,并在函数内增加一段代码即可

    参考网址:http://bbs.phonegap100.com/thread-1495-1-1.html

    image.png

    重新打包安装后的真机效果:

    image.png

    相关文章

      网友评论

          本文标题:ionic + cordova 开发App环境配置

          本文链接:https://www.haomeiwen.com/subject/rrcdgctx.html