Ionic2开发环境搭建、项目创建调试与Android应用的打包、优化
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应用的打包、优化的更多相关文章
- Ionic2开发环境搭建-VS 2017
原文:Ionic2开发环境搭建-VS 2017 目前在VS 2017中创建Ionic2版本项目 注:在VS中开发Ionic项目,使用的Ionic(v2.x),Cordova(v6.3.1),Angul ...
- spark JAVA 开发环境搭建及远程调试
spark JAVA 开发环境搭建及远程调试 以后要在项目中使用Spark 用户昵称文本做一下聚类分析,找出一些违规的昵称信息.以前折腾过Hadoop,于是看了下Spark官网的文档以及 github ...
- Ionic2开发环境搭建
关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各 ...
- Ionic2 开发环境搭建
Ionic2开发环境要求: Nodejs V4.5.0 Nodejs自带 Npm V2.15.9 同上 Ionic V2.1.0 安装最新ionic即可 Angular2 V2正式版 同上 说明:以上 ...
- Android开发环境搭建全程演示(jdk+eclipse+android sdk)
全程演示android开发环境的搭建过程,无需配置环境变量.所有软件都是写该文章时最新版本 一 相关下载 (1) java JDK下载: 进入该网页: http://java.sun.com/java ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- CUDA并行程序设计 开发环境搭建与远程调试
课题需要用到GPU加速.目前使用的台式电脑只有核心显卡,而实验室有一台服务器装有NVIDIA GTX980独显.因此,想搭建一个CUDA的开发环境,来实现在台式机上面开发cuda程序,程序在服务器而不 ...
- Cordova 开发环境搭建及创建第一个app
整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...
- Go 开发环境搭建和代码调试
写这篇笔记的目的,主要是分享我在Go学习中遇到的坑.让后面的学习者能否参考有用的经验. 其中有一些小技巧,对初学者来说,可能会大大节约填坑的时间. 比如如何设置vscode的Go调试器,Go的语法高亮 ...
随机推荐
- 教你一招 - 如何安装nopcommerce2.5
教你一招 - 如何安装nopcommerce2.5 29. 五月 2012 16:22 / wcf / 教你一招 . 解决方案 ...
- vue 基础(二)
Vue对象提供的属性功能 一.过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1. 全局过滤器 Vue.filter 写在vm 对象外.必须要有 ...
- 4、Ubuntu系统环境变量详解
参考:Linux公社Ubuntu系统环境变量详解 UNIX/Linux系统中的环境变量和库文件的使用方法 由于Linux系统严格的权限管理,造成Ubuntu系统有多个环境变量配置文件,因此我们需要了解 ...
- Luffy之前端项目部署搭建
1. 搭建前端项目 1.1 创建项目目录 cd 项目目录 vue init webpack lufei 根据需要在生成项目时,我们选择对应的选项, 效果: 根据上面的提示,我们已经把vue项目构建好了 ...
- Android BottomNavigationBar底部导航控制器的使用(包含默认postion的设置)
转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:[李东的博客] 最近Google在自己推出的Material ...
- sqlserver给指定用户授权访问指定表
一. 背景 外部公司的人授权访问我们公司的数据库,数据接口调用,要给他们建立查看指定的视图和授权的账号,因此要在数据库中,给指定用户授权访问指定表 二.sqlserver 脚本 ---创建视图CR ...
- bzoj3926: [Zjoi2015]诸神眷顾的幻想乡 后缀自动机在tire树上拓展
题意:有棵树每个点有个颜色(不超过10种),每个节点不超过20个儿子,问你每两点之间的颜色序列不同的有多少种 题解:先建出树,对于每个叶子节点,bfs一遍建在sam上,每次保留当前点在sam上的位置, ...
- iptables -F 与 -X 区别
test: 1.iptables 初始化 2.iptables -X (第一次) 错误原因是自定义链表(test)不为空 3.iptables -F 4.iptables -X ok,实验结束 实验报 ...
- arguments.callee用法
arguments.callee 在哪一个函数中运行,它就代表哪一个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函数,没有名子,无名可调. 这时就可以用argume ...
- leetcode_输入一个数组,目标树,检查目标是数组下标的哪两个之和,不准重复
今天是leetcode第一天,但是不太顺利.做这些,想不到 原题目: 我给的答案: class Solution { public: vector<int> twoSum(vector&l ...