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

Posted 2022-12-13 wlphyl

 
  


  


  
执行创建语句的前提是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.jianshu.com/p/b9757a5bcb07
  
Ionic 概述

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

  
与 Cordova 的关系

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

  
安装 Ionic

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

  
Node.js
Cordova & Ionic CLI
Java SDK
Android SDK 


  
安装 Node.js

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

  

   

   

  

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

  

   

   

  

  
安装 cnpm 

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

  

   

   

  

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

  

   

   

  

  
安装 Cordova & Ionic CLI

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

  

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