nodejs+ionic+cordova+webstorm搭建webApp

最新推荐文章于 2024-08-23 09:14:41 发布
最新推荐文章于 2024-08-23 09:14:41 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 软件开发--Android
第一次使用nodejs+ionic+cordova+android搭建webApp开发环境，由于nodejs、ionic、cordova、andriod都是第一次接触，所以花了三天时间才把环境搭建好。这篇文章则是用来记录开发环境的搭建过程。

1、工具、安装包的准备

每个道友都应该知道android开发最痛苦的就是环境问题，要搭建一个开发andriod的app，必然会设计到sdk等东西。那么用nodejs+ionic+cordova+intellijIdea搭建一个android的webApp开发环境，我们应该准备以下工具：

1、nodejs安装包：

ionic以及codova都是要依赖于nodejs来安装的，因此我们需要准备nodejs的安装包，来在本机上安装一个nodejs。我们从nodejs的官网上下载最新的nodejs版本，官网地址为https://nodejs.org/en/

下载完以后，根据提示一直下一步进行nodejs的安装。

2、JDK1.7

相信各位道友本机上应该有JDK，因此这里就不多描述。没有的JDK的道友可以在网上搜索，下载，并安装。

3、IntellijIdea

这个可以在IntellijIdea的官网进行下载（http://www.jetbrains.com/idea/），我使用的版本是15。不过这个开发工具是要收费的，但是相信各位道友是可以搞定的。

4、SDK

想要开发android的道友，肯定都听说过这玩意。我们这里用的版本是android-23。大家可以在http://www.androiddevtools.cn/上进行下载。

下载完以后，点击进行无脑安装即可。安装完毕后，运行sdk-manager.exe，根据下图，选择要安装的tools、platform-tools以及android版本。

等待漫长的下载过程后，sdk则安装完毕。

5、apache ant下载

在http://ant.apache.org/网站，可以下载apache ant工具，并进行安装。


2、环境变量的配置

此过程都是在【我的电脑】，右键-》属性-》高级系统设置-》环境变量中进行配置的

1、配置JDK
新建属性名为JAVA_HOME的环境变量，值为jdk安装目录，如E:\jdk1.7.0_51；然后在系统变量path中配置%JAVA_HOME%\bin\（注意如果是最后一个位置需要\）。配置好后，在cmd中输入java，若无异常，则jdk配置完毕。

2、配置sdk环境变量
新建属性名为ANDROID_HOME的环境变量，值为sdk安装目录，如E:\andriod\sdk；然后在系统变量path中配置%ANDROID_HOME%\tools\ %ANDROID_HOME%\platform-tools\
配置好后，再打开cmd，输入android，则会自动打开android SDK manager工具，则表明sdk配置ok。

3、配置ant环境变量
新建属性名为ANT_HOME的环境变量，值为ant安装目录，如D:\android\ant\apache-ant-1.9.6；然后在系统变量path中配置%ANT_HOME%\bin\ %ANT_HOME%\lib\
配置好后，再打开cmd，输入ant，出现下图所示，则表明ant工具配置ok。

4、nodejs环境配置
在系统环境变量path中加入C:\Program Files\nodejs\

3、环境搭建


安装Cordova、Ionic
npm install -g cordova ionic

创建一个新项目，有blank、tabs、sidemenu3种样式可选，tutorial、super、conference为官方Demo，aws为AWS Mobile Hub Demo

ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu
ionic start myApp tutorial
ionic start myApp super
ionic start myApp conference
ionic start myApp aws

浏览器运行调试

cd myApp
ionic serve

2. 项目结构

./hooks => 包含App生命周期中自动执行的操作
./node_modules & ./package.json => npm依赖项
./platforms => 添加的平台
./plugins => 安装的插件
./resourses => App图标和启动画面
./src/ => 主要工作目录
./src/index.html => App主要入口，用来设置脚本和CSS
./src/app/app.module.ts => App入口
./src/pages => 放置生成的页面
./src/assets => 放置多媒体文件
./src/theme/variables.scss => 用于覆盖默认样式
./www => 浏览器运行调试时自动生成
config.xml => 配置文件
ionic.config.json => 上传到 ionic.io 会被使用
.tsconfig.json & tslint.json => TS相关

3. 常用命令

打印出Ionic运行环境信息

ionic info

更新Ionic到最新版本

npm install -g ionic@latest

生成新的page、provider等

ionic generate [<type>] [<name>]

[<type>]: e.g. component, directive, page, pipe, provider, tabs

在浏览器中运行调试，可打开iOS、Android、Windows3个界面

ionic serve --lab

生成一个平台图标、启动画面

ionic cordova resources ios
ionic cordova resources --icon ios
ionic cordova resources --splash ios

列出所有平台

ionic cordova platform ls

添加、删除、更新一个平台

ionic cordova platform add ios
ionic cordova platform remove ios
ionic cordova platform update ios

编译一个平台并压缩

ionic cordova build ios --prod

添加、删除插件

ionic plugin add cordova-plugin-camera
ionic plugin rm cordova-plugin-camera



路途…
关注
专栏目录
初学者 nodejs+ionic+cordova 详细安装教程
12-07
本文档适合初学者阅读，关于介绍nodejs的安装，ionic+cordova 开发移动APP，包括 详细安装教程和打包apk教程。
WebStorm 之 Cordova 环境搭建
weixin_34101229的博客
04-24 152
一、环境搭建 　　Cordova 环境配置之前，应先下载安装 Node.js ，中文官网：http://nodejs.cn/。 　　以管理员身份运行 cmd 命令行工具： 　　1、查看 Node.js 是否已安装成功，命令为：node -v 　　2、查看 npm 是否已安装，命令为：npm -v 　　3、Cordova 安装，命令为：npm install -g cordova，C:\Users\...
webstorm androidSDK 配置（Mac）
Yolanda的专栏
09-21 3054
1、下载androidSDK,一般直接放在资源库下； 2、打开终端，我使用的zsh。vi zshrc 打开，将一下代码片段粘贴进去保存退出。 export ANDROID_HOME=~/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools 3.source .zshr
如何构建适用于Android的Node.js：从零到实践
最新发布
gitblog_01128的博客
08-23 253
如何构建适用于Android的Node.js：从零到实践 build-nodejs-for-androidBuild nodejs for android(arm,arm64,x86,x64,mipsel) perfectly and provide prebuilt binaries, and a docker image as workbench.项目地址:https://gitcode.c...
WebApp Ionic +webStorm开发 环境搭建
男儿不展风云志，空负天生八尺躯。
06-25 8078
在网上看了一大推，没一个能完整的写出来的。结合了他们的 整合了一下 “` 系统：win7 环境：Java 8 我这个是11.03版本 Android SDK 下载，配置环境变量。Grdle下载，然后环境配置(不然运行不了。) 准备：webStorm,下载地址 下载并且安装Node.js（https://nodejs.org/en/） 打开终端，安装cordova npm install
linux cordova环境配置,linux 下配置 nodejs+ionic+cordova
weixin_32769015的博客
05-05 249
ionic是目前比较火的hybird框架学的人挺多所以资料会相对全一些.cordova是一个连接ionic和原生android 底层api的工具.(这样说好理解一些,不过可能不够准确.)用他们的好处跨平台可以在ios android 平台上使用(其他具体内容请百度/google/)下面就开始吧别问我为什么不是在windows下配置的,我头疼!(在windows下配置各种全局变量搞不定,还是linu...
vue+nodejs+mysql 实现旅行网站
01-27
在构建一个基于“vue+nodejs+mysql”的旅行网站时，开发者将利用这三种技术的协同作用，构建出高效、动态且数据驱动的前端界面与稳定、可扩展的后端服务。下面我们将深入探讨这三个技术栈的核心概念以及它们在旅行...
movie-site：基于Nodejs + Express + MongoDB + jQuery + Bootstrap构建的电影网站！
02-04
基于NodeJs + MongoDB + jQuery + Bootstrap建造的豆瓣电影网站 一，简介 本项目是基于Nodejs的练习手项目，期间参考了慕课网（代码结构及路由全都重新改造），在老师所讲的基础上增加了很多的功能和完善，项目基于...
基于nodejs+mysql实现的仿京东商城项目
03-06
基于nodejs+mysql实现的仿京东商城app项目 前端 页面结构(H5,CSS3,原生JS) 框架(基于Vue脚手架:vue-cli)进行搭建 数据请求处理框架(Axios) Vue-Router进行路由处理 Vue-LazyLoad进行图片赖加载 服务端 选用NodeJs...
本文主要介绍NodeJS+Express+Mysql实现用户登录和注册。此登录注册的方式为ge
09-12
在IT领域，构建Web应用程序是常见的任务，而Node.js、Express和MySQL的组合是一个非常流行的栈，用于开发高效且可扩展的服务器端应用。... 首先，Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在...
nodejs+ionic+cordova+intellijIdea搭建webApp环境
RunningSnail
04-05 8555
第一次使用nodejs+ionic+cordova+intellijIdea搭建webApp开发环境，由于nodejs、ionic、cordova、andriod都是第一次接触，所以花了三天时间才把环境搭建好。这篇文章则是用来记录开发环境的搭建过程。 1、工具、安装包的准备 每个道友都应该知道android开发最痛苦的就是环境问题，要搭建一个开发andriod的app，必然会设计到sdk等东西
安装Nodejs、ionic和cordova
LChloe的博客
06-19 1118
安装Nodejs、ionic和cordova公司赵大哥的教程1、安装nodeJshttps://nodejs.org/en/安装完成后验证npm -vnode -v2、修改npm镜像地址npm config set registry https://registry.npm.taobao.org验证npm config get registry3、安装ionic和cordova npm insta...
搭建Cordova + Ionic + WebStorm环境开发Web App应用
热门推荐
坚持自己!
03-19 1万+
1. 下载并且安装node.js（https://nodejs.org/en/） 2. 打开终端，安装cordova (如果安装失败或者卡住不动则重新安装)     sudo npm install -g cordova  3. 安装ionic     sudo npm install -g ionic 4. 如果要调用xcode模拟器则要安装插件     su
IONIC的简介及Node.js安装步骤
心若向阳，无谓悲伤的博客
06-22 2116
一.IONIC简介 1.IONIC是一个用来开发混合手机应用，开源的，免费的代码库。 2.优化html,css和js的性能，构建高效的应用程序； 3.用于构建Sass和AngularJS的优化。 4.这个框架的目的是从web的角度开发手机应用，给予PhoneGap的编译平台，可以实现编译成各个平台的应用程序。 5.IONIC提供很多CSS组件和JavaScript UI库； 6.ION
Web前端环境搭建篇之-- 利用NodeJS来安装Ionic和Cordova
郭蕾蕾 努力的包子
02-26 3110
终于把环境搭建起来了，顿时内心暖暖的哈哈西！~~~~~~      这次小编戴着大家分享是我们App混编的环境搭建的最后一个部分，就是安装Ionic和Cordova  ！      1.打开NodeJS command prompt 具体位置见下图：        2.接下来就是很简单了 接下来就是输入 npm install -g cordova 在安装完cordova以后在安
ionic3,nodejs,MongoDB搭建一个移动端项目
weixin_33705053的博客
08-23 140
照例先贴上地址欢迎各位大佬指导 就是我,我是链接 (欢迎star) 项目简介 首先说下要在本地运行项目的话,需要在电脑上安装mongoDB,我的nodejs项目也需要clone一下,这里也贴一下地址!!! nodejs地址 前端部分 页面搭建 前端的页面搭建和跳转都是使用的ionic的components,因为ionic2开始的仿...
nodejs安装cordova和ionic
马克的专栏
03-04 1395
npm install -g ionic cordova （此处安装很费劲，，，，如果安装不上，直接使用国内镜像）* 使用淘宝镜像安装cordova npm install -g cordova –registry https://registry.npm.taobao.org * 使用淘宝镜像安装ionic npm install -g ionic –registry https://regist
nodejs+MySQL搭建商品详情页接口
04-28
首先，需要安装并搭建好Node.js和MySQL环境。然后，可以使用以下步骤来搭建商品详情页接口： 1. 创建一个名为"product"的数据库，并创建一个名为"product_info"的表，用于存储商品信息，包括商品ID、商品名称、商品价格、商品描述等字段。 2. 在Node.js中安装mysql和express框架，使用以下命令： ``` npm install mysql express ``` 3. 创建一个名为"app.js"的文件，并编写以下代码： ``` const express = require('express'); const mysql = require('mysql'); const app = express(); // 创建数据库连接 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'product' }); // 连接数据库 connection.connect(); // 定义商品详情页接口 app.get('/product/:id', (req, res) => { const productId = req.params.id; const sql = `SELECT * FROM product_info WHERE id = ${productId}`; connection.query(sql, (err, result) => { if (err) throw err; res.send(result); }); }); // 启动服务器 app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 4. 运行app.js文件，启动Node.js服务器： ``` node app.js ``` 5. 访问"http://localhost:3000/product/1"，即可获取ID为1的商品信息。 注意：以上代码仅供参考，实际开发中需要考虑更多的安全性和可靠性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值