使用ionic+cordova WebApp项目环境搭建与项目创建

时间 2021-07-14 标签 cordova ionic

执行创建语句的前提是ionic环境已经装好，开始执行ionic start myApp blank。

提示已经有同名项目，是否覆盖。这里创建的是一个blank（空）的ionic项目。还要两种是tabs和sideMenu。

到这步项目就建好了，但是一般网络不好的情况下会报错。（因为无法重现错误，所以只能文字描述。如果还要问题可以在下面回复或者加下下面的qq）

报错的原因就是npm packages安装的原因。先使用国内镜像cnpm来安装：

npm install -g cnpm (如果之前已安装可直接使用)

然后执行跳过安装npm packages这步，执行如下命令：

ionic start app --no-deps [新版使用这样的命令不安装npm步骤]

执行完上面这步之后再到项目的目录（这里我的目录是E:/ionic/demo/myapp）打开cmd执行如下命令：

cnpm install --save

执行完之后再ionic serve，项目运行在浏览器中。

接下来如果上面的步骤都成功了，然后准备把项目运行到手机上（安卓端），ios的还没弄。

1：直接在项目目录下执行命令：ionic platform add android

2：执行玩上面那步应该是没什么问题的，接着可以直接执行命令：ionic run android

执行这步的时候会下载gradle。但是如果没墙的话会报错（错误重现不了，文字表示）

报错的原因就是gradle下载失败类似的这样的错误。

解决方法：到网上下载gradle压缩包，这个网上很多，随便下一个就行，下好之后将gradle压缩包

放在：yourproject/platforms/android/gradle 目录下。

　　然后再找到：yourproject/platforms/android/cordova/lib/builders/GradleBuilder.js 这个文件。

打开之后搜索distributionUrl ，改为下面这句，然后gradle根据你下载的gradle版本修改

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || '../gradle-2.4-all.zip';

3：执行完上面两部之后再回到自己项目的目录下，执行ionic run android，这时候会自动加载已经下好的gradle包，不会出现之前的那个错误。

-- 另: 准备使用vscode IDE环境

Ionic 官网：http://www.ionicframework.com/ Ionic 是一个强大的 HTML5 SDK，它使用 HTML、CSS、Javascript 等 web 技术帮助你快速构建原生风格的移动应用 Ionic 目前能支持 iOS 和 Android

Ionic 是基于 Cordova 的，在 Cordova 上能用的一切同样可以在 Ionic 上使用 Ionic 在 Cordova 基础上增加了 Ionic UI、AngularJS、一个强大的 CLI 工具和一些云端服务等

Ionic 的开发环境离不开下列组件：

前往 Node.js 官网下载 Node.js 安装包直接安装，建议下载 LTS 版本，笔者安装的是 v4.4.5 LTS 安装的过程中默认勾选的“Add to PATH”选项不要取消

安装完成后打开终端，输入“node -v”命令，能正常现实版本号说明安装成功

npm 是 Node.js 的包管理器，由于我大天朝网络环境的原因，在使用 npm 的时候经常无法安装包或者下载很慢于是我们需要一个 npm 的中国镜像，cnpm 是淘宝的 npm 镜像，10分钟同步一次以管理员身份打开终端，输入“npm i cnpm -g”命令，等待安装完成

安装完成后，输入“cnpm -v”命令，能正常显示版本号说明安装成功

以管理员身份打开终端，输入“npm i cordova ionic -g”命令，等待安装完成

如果安装了 cnpm，可以使用“cnpm i cordova ionic -g”命令