Ionic2开发环境搭建、项目创建调试与Android应用的打包、优化。

windows下ionic2开发环境配置步骤如下:

下载node.js环境,稳定版本:v6.9.5 下载android studio: android-studio-bundle-145.3360264-windows.exe包含 Android SDK,打开出现问题进行如下操作:

到控制台安装ionic2和Cordova

首先更换淘宝镜像,下载起来会快很多,使用时需要将npm命令换成cnpm

npm install -g cnpm –registry=http://registry.npm.taobao.org

安装ionic2:npm install -g ionic (查看:ionic -version 卸载:npm uninstall -g ionic)

安装Cordova:npm install -g cordova(查看:cordova -version)

(两者默认安装路径的是在C盘下的user目录下) 新建项目

可以自己建立workspace,然后cd到该目录下创建项目

ionic start MyIonic2Project tutorial –v2 (若要建立tabs项目,将tutorial改为tabs即可)

可能会失败,出现如下信息:

说明npm安装失败了,可以cd到项目目录,改用cnpm重新进行安装

cnpm install

出现如下信息则安装成功:

列表内容

运行项目

ionic serve

浏览器上面访问在提示的ip,即可出现项目效果:

此时只能看到浏览器模式,若想在浏览器上查看手机上面的样式,有以下两种方法:

a.在谷歌浏览器上,按F12进入调试模式,然后再按ctrl+Shift+M即可进入手机调试模式;

b.在谷歌浏览器上进入应用商店安装插件Ripple,即可模拟出手机模式。

这里更推荐使用第二种模式,因为该模式模拟原生的手机模式,更贴近手机应用环境。 打包apk

需要先安装jdk,sdk,并分别配置环境变量,jdk版本1.8以上(注意:在MAC下是不需要进行环境变量的配置的)

运行命令:

cordova platform add android

(重新添加android环境时用到:cordova platform rm android)

ionic build android

成功build后在控制台提示的目录下可以找到项目生成的APK,传到手机上安装即可。

7.apk性能优化

通过Ionic2打包后的Android应用在手机上可能会出现卡顿等情况,此时可以给应用添加crosswalk环境,此方法将浏览器内核打包进入apk,使应用的流畅程度大大增加(在android5.0以下应用中体现得尤为明显)。此方式打包apk的缺点是会使apk的大小增加20M左右。

Ionic2开发环境搭建、项目创建调试与Android应用的打包、优化的更多相关文章

  1. Ionic2开发环境搭建-VS 2017

    原文:Ionic2开发环境搭建-VS 2017 目前在VS 2017中创建Ionic2版本项目 注:在VS中开发Ionic项目,使用的Ionic(v2.x),Cordova(v6.3.1),Angul ...

  2. spark JAVA 开发环境搭建及远程调试

    spark JAVA 开发环境搭建及远程调试 以后要在项目中使用Spark 用户昵称文本做一下聚类分析,找出一些违规的昵称信息.以前折腾过Hadoop,于是看了下Spark官网的文档以及 github ...

  3. Ionic2开发环境搭建

    关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各 ...

  4. Ionic2 开发环境搭建

    Ionic2开发环境要求: Nodejs V4.5.0 Nodejs自带 Npm V2.15.9 同上 Ionic V2.1.0 安装最新ionic即可 Angular2 V2正式版 同上 说明:以上 ...

  5. Android开发环境搭建全程演示(jdk+eclipse+android sdk)

    全程演示android开发环境的搭建过程,无需配置环境变量.所有软件都是写该文章时最新版本 一 相关下载 (1) java JDK下载: 进入该网页: http://java.sun.com/java ...

  6. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  7. CUDA并行程序设计 开发环境搭建与远程调试

    课题需要用到GPU加速.目前使用的台式电脑只有核心显卡,而实验室有一台服务器装有NVIDIA GTX980独显.因此,想搭建一个CUDA的开发环境,来实现在台式机上面开发cuda程序,程序在服务器而不 ...

  8. Cordova 开发环境搭建及创建第一个app

    整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...

  9. Go 开发环境搭建和代码调试

    写这篇笔记的目的,主要是分享我在Go学习中遇到的坑.让后面的学习者能否参考有用的经验. 其中有一些小技巧,对初学者来说,可能会大大节约填坑的时间. 比如如何设置vscode的Go调试器,Go的语法高亮 ...

随机推荐

  1. English Voice of << Last Christmas >>

    Last Christmas填 词:乔治·迈克尔谱 曲:乔治·迈克尔编 曲:乔治·迈克尔歌词:Last Christmas I gave you my heart去年的圣诞节,我把心给了你But th ...

  2. vue动画

    最近想搞搞vue的过渡和动画,以为照着官网写就好了,谁知道还是出现一些状况 具体表现就是不用webpack打包时候写的过渡是正常的,而用了webpack打包就不正常了 说使用了未定义的element: ...

  3. android -------- ConstraintLayout Group和goneMargin(五)

    前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) ConstraintLayout 宽高比和偏移量比(三) ConstraintLayout ...

  4. 遍历input文本框

    最近写的一个项目中,页面中有很多的“text文本框”和“select下拉框” 校验input框和select框是否非空,如果为空给出提示.反之,隐藏提示内容. html  页面中的input类型有ty ...

  5. AS(Android Studio)不停的updating indices

    有同事问我他as进入后updating iindices个不停 就在此处一直刷一直刷,虽然对他项目没什么影响,但总归很是烦人,解决办法如下: 打开File->Invalidate Caches ...

  6. ActiveMQ的学习整理(代码实现PTP,以及Pub/Sub)

    (一)由于在实习过程中需要用到ActiveMQ,在网上看了很多文章,现在整理出来以防忘记. (二)这篇文章比较适合之前没有接触过的同学,在看下面文章的过程中,建议先学习参考链接中的知识点,然后自己再参 ...

  7. zend framwork项目基本操作

    1.首先,我们做项目是采用db的方式来编写sql语句的. 2.查询: fetchOne()   查询一个字段,如果没有指定就只查询第一个字段,只能得到一个值. fetchRow()    查询一行数据 ...

  8. JedisClusterMaxRedirectionsException: Too many Cluster redirections

    发生环境 当时的redis集群配置:redis-trib.rb 127.0.0.1 .... redis.conf的bind是默认# 解决方案 将redis.conf的bind为局域网真实ip red ...

  9. 外部调用mvc的api方法时,如何解决跨域请求问题?

    首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...

  10. bash 调试

    bashdb test.sh step edit  visual 跳到那一行 R restart http://www.ibm.com/developerworks/cn/linux/l-cn-she ...