ionic3随笔(一)

首先你需要确保你的电脑安装了node.jsgit。。。然后创建一个空文件夹,在文件目录下执行命令(我用的Visual Studio Code,所以这里我直接在IDE里面的终端执行):npm install -g cordova ionic 安装完如下:ionic3随笔(一)_第1张图片

然后执行:ionic start myApp tabs 其中myApp是项目名称,tabs是使用的项目模板,然后出现选择的时候,第一个选择Y,第二个选择N就可以。ionic3随笔(一)_第2张图片

然后进入项目根目录:cd carrie然后执行:ionic server ionic3随笔(一)_第3张图片

此时你就会发现在浏览器上可以看到项目了。

ionic3随笔(一)_第4张图片

下面要说的是在真机上运行此APP。

首先你要下载java的jdk,安卓的sdk,Gradle。。。然后安装。

配环境变量:计算机右键选择属性---左侧选择高级系统设置---在高级选项卡下选择环境变量---在系统变量下选择新建:

1:java的:变量名:JAVA_HOME   变量值:D:\Program Files\Java\jdk1.8.0_102(此处是你安装jdk的路径)。

    新建class_path:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

2:android的:变量名:ANDROID_HOME  变量值:D:\Program Files\Android\android-sdk(此处是你安装sdk的路径)。

                    path:;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools(找到path直接拼接到后面即可)。

3:Gradle的:变量名:GRADLE_HOME  变量值:D:\Program Files\gradle-3.3-all\gradle-3.3(此处是你解压的gradle文件路径)

                    path:;%GRADLE_HOME%\bin;(找到path直接拼接到后面即可)。

最后你在cmd输入:android -h测试是否环境配对。如下则正确:

ionic3随笔(一)_第5张图片

在安装目录D:\Program Files\Android\android-sdk(你安卓sdk的安装路径)下找到并打开SDK Manager.exe。。双击打开如下选择如下安装:ionic3随笔(一)_第6张图片

环境都搭配好了,接下来就是在真机上运行此APP。执行:ionic cordova platform add android(这个是把html+js代码变异成了android的代码,第一次编译就需要下载gradle,之前咱们已经装过了这个了。然后你找一台android手机,用usb数据线连接电脑和手机并确保连接成功,执行:adb devices。如下则说明手机连接成功:

ionic3随笔(一)_第7张图片

再执行:ionic cordova build android。如下:ionic3随笔(一)_第8张图片ionic3随笔(一)_第9张图片

然后:ionic cordova run android,就可以在手机上运行了。结果如下:图1 carrie就是此APP,我只修改了app名称,至于显示什么图片,在resources下修改即可:图2 为进入app的动画,图3 为app里面内容

ionic3随笔(一)_第10张图片ionic3随笔(一)_第11张图片ionic3随笔(一)_第12张图片

希望这些能帮助需要帮助的人,别像我一样踩坑= =

你可能感兴趣的:(ionic3)