美文网首页
Ionic环境搭建

Ionic环境搭建

作者: 长城_changcheng | 来源:发表于2018-04-03 00:44 被阅读36次

    一、配置Java环境

    1、安装jdk,并配置相关环境变量,具体操作方法如下:

           右击“计算机”-“属性”,选择“高级系统设置”打开系统属性框,选择环境变量,在“系统变量”框中选择JAVA_HOME,将其设置为jdk的安装目录(例如:C:\Program Files\Java\jdk1.8.0_102),再向Path变量中添加“%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”即可。

           对于环境变量是否设置成功,我们可以在CMD中,直接键入java或者javac,如果返回一下结果,则说明配置正确。

    测试Java环境是否已经正确安装
    2、下载Android IDE或者Java IDE,并且配置好环境变量,具体操作方法如下:

           (1)方法:打开环境变量设置窗口,在系统变量中新建Android_Home变量,设置其为Android SDK的安装目录(如:D:\android-sdk-windows),再向Path变量中添加“%Android_Home%tools;%Android_Home %\platform-tools”。
           (2)方法:可以通过CMD命令行设置环境变量,如:set Android_Home=D:\android-sdk-windows,这样既可成功。此时,只要下载合适的Android SDK版本,既可进行ionic本地打包了。

    二、下载配置Android SDK

           1、下载Android SDK Manager,直接运行。从里面直接选择需要的package,点击下载。完成之后,如果找寻不到下载的路径,请看程序面板中应该有一个SDK Path,如下图:

    SDK配置示意图

           2、设置环境变量,设置完成之后

    三、工程化ionic项目

    1、安装Cordova和ionic

           Window 和 Linux 上打开命令行工具执行以下命令:

    $ npm install -g cordova ionic
    

           Mac 系统上使用以下命令:

    sudo npm install -g cordova ionic
    

           如果你已有上述环境,可以执行以下命令来执行环境更新:

    $ npm update -g cordova ionic
    
    2、创建应用

           使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:

    $ ionic start myApp tabs
    $ cd myApp
    $ ionic platform add android/ios
    $ ionic build android/ios
    $ ionic emulate android/ios
    
    APP在浏览器环境下运行效果图

    四、window本地打包

    1、准备应用程序图标和程序启动页面,分别命名为iocn.和splash.,尺寸分别是10241024和22082208,大小保持在100K以内。

    格式可以是ai、psd、png;
    图片尺寸:icon.建议大小是:10241024;splash.建议大小是:22082208;
    图片大小:icon.和splash.建议保持在100KB以内,否则容易出现打包不能通过的状况。

    icon图标尺寸:3636、4848、7272、9696、144144、192192
    splash图片尺寸:200320、320480、480800、7201280、9601600、12801980

    2、准备应用程序图标和程序

           如果在项目目录中没有resource文件夹,则执行ioinc build android/ios命令,执行后会自动生成resource文件夹。如果项目中已有该文件夹,则可以忽略这一步;
    将步骤1中准备好的2个文件放入resource文件夹中,然后在命令窗口执行ionic resources命令,执行完成之后,便会自动生成各种图标文件和启动图片。
           仔细查看项目目录,可以看到resources文件夹下多出了android或者ios文件夹,而在android或者io文件夹下拥有icon和splash文件夹,则说明这一部执行成功。最终结果如下图所示:

    应用程序图标文件夹创建成功示意图

    3、执行ionic build android --debug命令就可以体验Windows环境下打包了。

    相关文章

      网友评论

          本文标题:Ionic环境搭建

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