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左右。

  • 相关阅读:
    Vue $nextTick的一个使用场景
    Vue 使用v-for对Object进行遍历
    JavaScript 回调函数的简单示例
    VSCode 自定义Vue snippets, 快速生成Vue模板
    git将一个分支完全覆盖另外一个分支如:dev分支代码完全覆盖某一个开发分支
    解决bootstrap时间输入框总被浏览器记住的记录遮挡住的问题
    Fiddler 屏蔽JS、抓WebSocket协议、查看接口响应时间、模拟并发请求
    细说MySQL的时间戳(Timestamp)类型
    网站建设之域名注册和域名备案
    日常项目测试用例检查点(来自一线测试人员的吐血总结)
  • 原文地址:https://www.cnblogs.com/shitoupi/p/6628186.html
Copyright © 2011-2022 走看看