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. 教你一招 - 如何安装nopcommerce2.5

    教你一招 - 如何安装nopcommerce2.5 29. 五月 2012 16:22         /          wcf         /          教你一招 . 解决方案    ...

  2. vue 基础(二)

    Vue对象提供的属性功能 一.过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1. 全局过滤器 Vue.filter 写在vm 对象外.必须要有 ...

  3. 4、Ubuntu系统环境变量详解

    参考:Linux公社Ubuntu系统环境变量详解 UNIX/Linux系统中的环境变量和库文件的使用方法 由于Linux系统严格的权限管理,造成Ubuntu系统有多个环境变量配置文件,因此我们需要了解 ...

  4. Luffy之前端项目部署搭建

    1. 搭建前端项目 1.1 创建项目目录 cd 项目目录 vue init webpack lufei 根据需要在生成项目时,我们选择对应的选项, 效果: 根据上面的提示,我们已经把vue项目构建好了 ...

  5. Android BottomNavigationBar底部导航控制器的使用(包含默认postion的设置)

    转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:[李东的博客] 最近Google在自己推出的Material ...

  6. sqlserver给指定用户授权访问指定表

    一.   背景 外部公司的人授权访问我们公司的数据库,数据接口调用,要给他们建立查看指定的视图和授权的账号,因此要在数据库中,给指定用户授权访问指定表 二.sqlserver 脚本 ---创建视图CR ...

  7. bzoj3926: [Zjoi2015]诸神眷顾的幻想乡 后缀自动机在tire树上拓展

    题意:有棵树每个点有个颜色(不超过10种),每个节点不超过20个儿子,问你每两点之间的颜色序列不同的有多少种 题解:先建出树,对于每个叶子节点,bfs一遍建在sam上,每次保留当前点在sam上的位置, ...

  8. iptables -F 与 -X 区别

    test: 1.iptables 初始化 2.iptables -X (第一次) 错误原因是自定义链表(test)不为空 3.iptables -F 4.iptables -X ok,实验结束 实验报 ...

  9. arguments.callee用法

    arguments.callee 在哪一个函数中运行,它就代表哪一个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函数,没有名子,无名可调. 这时就可以用argume ...

  10. leetcode_输入一个数组,目标树,检查目标是数组下标的哪两个之和,不准重复

    今天是leetcode第一天,但是不太顺利.做这些,想不到 原题目: 我给的答案: class Solution { public: vector<int> twoSum(vector&l ...