zoukankan      html  css  js  c++  java
  • 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左右。

  • 相关阅读:
    跃迁方法论 Continuous practice
    EPI online zoom session 面试算法基础知识直播分享
    台州 OJ 2648 小希的迷宫
    洛谷 P1074 靶形数独
    洛谷 P1433 DP 状态压缩
    台州 OJ FatMouse and Cheese 深搜 记忆化搜索
    台州 OJ 2676 Tree of Tree 树状 DP
    台州 OJ 2537 Charlie's Change 多重背包 二进制优化 路径记录
    台州 OJ 2378 Tug of War
    台州 OJ 2850 Key Task BFS
  • 原文地址:https://www.cnblogs.com/shitoupi/p/6628186.html
Copyright © 2011-2022 走看看