土狗的小抄本 -- 从0开始搭建IONIC2 开发环境

最新推荐文章于 2024-10-12 22:13:58 发布

weixin_34023863

最新推荐文章于 2024-10-12 22:13:58 发布

阅读量91

点赞数

文章标签：移动开发操作系统 git

原文链接：https://my.oschina.net/2go/blog/810363

版权

为什么80%的码农都做不了架构师？>>>

阅读对象

英文不是那么好的同学
计划使用或者尝试 IONIC2 框架，但是还从来没有搭建过环境的同学
学习如何实用IONIC2 打包android apk的同学
也欢迎来‘温习’的同学
英文好的同学，建议查看官方英文文档

环境

windows （windows7 和 windows10尝试通过）

准备

nodejs （依赖包管理、webpack打包） nodejs官网
androidSDK （打包apk用，如果只是想浏览器上联调一下，则不需要androidSDK）
JDK（1.7+，打包apk用，如果只是想浏览器上联调一下，则不需要JDK）
一款你习惯的IDE工具，我选择的是IDEA Intellij

安装完上面的组件，已经可以开始开发IONIC应用并在浏览器中进行调试，或者打包，比如安卓的apk包。如果希望在模拟器中进行调试，建议你安装（这里说的是安卓模拟器）如下模拟器

vbox（调试andriod客户端的时候使用，作为依赖的工具，并不需要手动启动vbox，安装上即可）
Genymotion（调试apk使用，依赖vbox。在windows中启动了genimotion之后，将apk文件直接拖放到手机模拟器的界面就完成了apk安装，很方便。【官网】）

开始

这里假设你已经安装好了nodejs , androidSDK,JDK 等，如果您在安装这些时候遇到了问题，网上有很多专门的文章来解决，这里不在陈述。

ionic2 应用的大部分工作（除了编码）都通过命令行来完成，下面给出一个完整的脚本片段 + 描述


npm install -g ionic cordova    // 安装 ionic 客户端 和 cordova

// 建立模板项目
// windows 下 cd 到你的工作目录，假设是 d:\dev ,在当前目录下执行：

ionic start cutePuppyPics --v2   // 建立ionic 模板工程命令，工程名为  cutePuppyPics



ionic serve      // 进入到  cutePuppyPics， 启动项目，这个命令会启动当前项目，并自动打开浏览器展示浏览器中的调试页面


ionic platform add android   // 添加android平台 

ionic build andriod  // 打开发包（开发的时候打这个包）

ionic build android -release  // 打发布包 （发布的时候打这个包）

// 你可以在   {项目目录}\platforms\android\build\outputs\apk 目录里面找到  生成好的apk文件。



补充

// 建立新的page
ionic g page NewPage

// 添加whitelist插件
cordova plugin add cordova-plugin-whitelist --save

// 添加
ionic plugin add https://github.com/VersoSolutions/CordovaClipboard.git
cordova plugin add cordova-plugin-inappbrowser

常见问题

ionic 项目代码上传到svn 或者git的时候，需要上传所有的目录吗？

查看gitignore 文件就知道哪些不需要上传了。

原来运行的很好的ionic项目，重新获得一次代码重新构建项目之后出现 ionic serve 不能运行的情况。

我的解决办法是：使用ionic start projectName --v2 新建一个项目，然后将 node_modules 目录拷贝过来，然后重新运行ionic serve ，成功.

ionic build android 时候heap 不能分配足够空间

首先设置系统的jvm 参数 _JAVA_OPTS=-Xmx1024m ,然后设置 user 目录gradle 目录的gradle.properties 文件中的内容为org.gradle.jvmargs=-Xmx512m -XX:MaxPermSize=256m

ionic build adnroid 的时候提示没有接受android sdk 的授权之类的

在 ANDROID_HOME 目录创建 licenses 目录，在之内创建 android-sdk-license 文件，内容为 8933bad161af4178b1185d1a37fbf41ea5269c55

如何更改splashscreen，怎么修改了也无效，还是现实cordova 图标

先明确两个事情：

ionic platform add android 之后，platform/android/res 文件夹里面的内容就不变了，不会每次build 的时候将ionic 项目内的res 目录内的文件更新过来
ionic build android 的时候，打包只会打drawable-，mipmap- 等文件夹，也就是说只有将将splash screen图片放入到这些目录才可用，放入其他目录，虽然构建脚本不会提示错误，但是打出来的apk 里面没有对应的文件夹或者文件。

ionic recources 文件会在resources 目录下生成对应的各种尺寸的splash 或者 icon 文件，如果build命令没有将这些文件拷贝到res目录，则需要拷贝过去。

如果build命令没有将这些目录拷贝到platform 文件夹对应的目录中，则需要拷贝过去。

转载于:https://my.oschina.net/2go/blog/810363