Ubuntu虚拟机中使用Ionic开发移动app应用

Posted 2021-04-25 清晨回笼做梦

上篇文章给大家介绍了如何使用virtualBox安装虚拟机，现在给大家介绍如何在Ubuntu虚拟机中使用Ionic开发移动APP应用

ionic是一个强大的混合式/hybrid html5移动开发框架，特点是使用标准的HTML、CSS和javascript，开发跨平台的应用 ，只需要几步就可以快速创建您的Ionic应用。

目前ionic4正式版 支持使用angular和react来开发， vue还在alpha状态。

首先我们需要在虚拟机中准备开发必备的环境，以android为例，列举如下：

1. java

2. nodeJs
   

3. Android SDK
   

4. Gradle
   

5. ionic
   

6. cordova
   

   
   

1. 安装java sdk

   打开虚拟机终端 输入java 会给出相应的安装提示 命令如下

   
   

javasudo apt install openjdk-8-jre-headlesssudo apt install openjdk-8-jdk-headlessjava -version //查看是否安装成功

           

2. 安装nodeJs

根据自己系统选择相对于的版本

下载完后放在固定位置

执行解压命令

tar -xvf node-v12.13.0-linux-x64.tar.xz 

进行软连接

sudo ln -s /usr/local/node-v12.13.0-linux-x64/bin/node /usr/local/bin/nodesudo ln -s /usr/local/node-v12.13.0-linux-x64/bin/npm /usr/local/bin/npmnode -vnpm -v查看是否安装成功

注意:软连接命令前面是你放置的node 路径，后面是系统固定路径

3. 安装Android SDK

中文官网：https://www.androiddevtools.cn/# 找到 SDK Tools

选择24.4.1 》Linux下载

执行解压命令

tar -xvf android-sdk_r24.4.1-linux.tgz

编辑 /etc/profile  系统文件

在最后面加上

# android sdkexport ANDROID_HOME=/usr/local/android-sdk-linuxexport PATH=$ANDROID_HOME/tools:$PATHandroid_home是你刚刚解压的目录

执行命令

source /etc/profile

让修改的环境变量生效

执行命令更新下载最新的SDK

android android update sdk --no-ui

4. 安装Gradle

这里我选择的是gradle-5.6.3-all.zip

执行解压命令

sudo unzip gradle-5.6.3-all.zip 

编辑 /etc/profile  系统文件

在最后面加上

# gradleexport GRADLE_HOME=/usr/local/gradle-5.6.3export PATH=$GRADLE_HOME/bin:$PATH

执行命令

source /etc/profile

让修改的环境变量生效

5. 安装ionic/ cordova

npm install -g cordova ionic

安装完后， 发现ionic命令还是无法使用，在这里跟安装nodejs一样需要进行软连接

执行命令

sudo ln -s /usr/local/node-v12.13.0-linux-x64/bin/ionic /usr/local/bin/ionicsudo ln -s /usr/local/node-v12.13.0-linux-x64/bin/cordova /usr/local/bin/cordova

通过ionic命令创建项目

ionic start myApp tabs  // 创建底部按钮模式ionic start myApp sidemenu //侧边栏菜单模式

运行刚刚创建的ionic项目

cd myAppionic serve

打包成单页面运行在微信或者Web浏览器

ionic build

打包成混合app

ionic buildionic cordova platform add android  // 将项目添加到android环境，只用执行一次 ionic cordova run androidionic cordova build android

在项目目录/platforms/android/app/build/output/apk/debug/中能找到刚刚打包的app安装包

一个简单的app框子就搭起来了，具体的内容开发请查看官方文档

https://ionicframework.com/docs

ionic Native教程官网

http://www.ionic.wang/native_doc-index.html