当前位置: 首页 > Web前端 > HTML5

离子环境搭建

时间:2023-04-05 14:35:37 HTML5

1.环境依赖描述移动端混合开发一个明显的优势就是一套代码分两套部署,开发一套项目代码,可以分别打包成Android包和ios包。无论是混合开发还是原生开发,都需要原生平台。我们以Android平台为例。首先,肯定需要AndroidSDK。Android环境是java衍生出来的,所以必须先安装JDk,也就是平台的环境。顾名思义,混合开发需要两个环境内容,前端和原生环境。对于混合开发平台,我们选择cordova,它依赖于node.js环境,需要node.js的npm模块帮助它下载插件。要创建一个项目,您需要调试并运行它,因此您将需要一个Android模拟器。因为原生安卓模拟器启动太慢,而且由于网络限制,谷歌的cpu渲染加速器环境也很难下载。我们这里用的是Genymotion,一款国外好用的免费第三方模拟器。这些东西是免费的,但需要注册和登录。需要搭建的环境只有几个JDK、AndroidSDK、node.js、cordova、Genymotion。开发环境:node.jscordova6.0.0ionic测试运行环境:JDKAndroidSDKGenymotion2。安装说明2.1JDK安装教程很多,安装菜鸟教程记得下载1.8版本:http://www.runoob.com/java/ja...2.2AndroidSDKAndroidSDK由于国内网络限制,推荐国内下载网站:http://www.androiddevtools.cn/下载后根据提示安装,不要取消推荐下载的包。系统一般会默认帮你查看最新版本的安卓Android9.0,但是Android9.0会出现模拟器无法启动的问题,坑多,建议9.0以下安装,我选择的是Android6.0。0,勾选下图中的选项即可。下载并配置好Android环境变量后,打开Android的Android目录,如图。我圈出的两个目录需要添加到路径中。D:程序文件androidplatform-tools;D:程序文件androidtools;它是免费使用的,只需使用下面的链接注册即可。注册:https://www.genymotion.com/下载:https://www.genymotion.com/do...下载后按提示安装,打开软件后登录选择个人登录.下载安卓镜像并打开,如图,点击添加。找到自己需要的版本下载2.4安装nodejs官网下载nodejs免安装版https://nodejs.org/en/download/选择windows免安装版64位解压到要安装的目录添加环境变量电脑(右键)-->属性(左键)-->高级系统设置(左键)-->环境变量(左键)查看是否配置成功node-vnpm-v如果版本号显示正常,说明安装成功先更换npm镜像源下面说说为什么要更换镜像源。由于npm的镜像源是国外的,我们在使用npm工具安装软件环境时,由于网速的问题,会造成很多难以解决的问题,下载速度极慢,所以镜像源为换成了淘宝。镜像源。执行如下命令替换软件源npminstall-gcnpm--registry=https://registry.npm.taobao.org检查是否替换成功cnpm-v不报错,有提示出来,表示替换成功。参考菜鸟教程:http://www.runoob.com/nodejs/...w3school:https://www.w3cschool.cn/node...npm基础使用:https://www.w3cschool.cn/node...2.5安装cordova平台官网https://cordova.apache.org/使用npm安装平台cnpminstall-gcordova@6.0.0安装指定版本的cordova,我们这里安装cordova6.0.0,它建议不要安装7版本和8版本,后面创建项目的时候会出现很多问题。cordova-v查看是否安装成功,正确显示版本号说明安装成功。项目相关命令#1。创建项目cordovacreateMyAppcd./MyApp#2。添加平台cordovaplatformaddbrowser#添加浏览器平台cordovaplatformaddandroid#Android平台cordovaplatformaddios#iosplatform#注意添加相关平台需要相关平台环境#3.编译打包cordovabuildandroid#Package到android平台。apkcordovabuildios#Packageintoiosplatform#4。运行到androidSDK#5自带的模拟器cordovaemulateandroid。运行到第三方模拟器或者真机cordova运行android参考学习w3school:https://www.w3cschool.cn/cord...2.6Angularjs环境搭建官网https://www.angular.cn/guide/...安装项目脚手架npminstall-g@angular/cli这只是为了给ionic提供一个创建项目的环境,但是如果要使用ionic开发就必须学习angularjs。2.7ionic安装配置官网https://ionicframework.com/do...安装-g表示全局,latest表示最新??版本。cnpminstall-gionic@latest项目相关命令#1创建项目ionicstartmyNewProjecttabs#tabs是一种项目模板,ionic平台本身会提供几个项目模板#进入项目cd./myNewProject#2.Addplatformioniccordovaplatformaddandroid#平台同上可选#3。打包ioniccordovabuildandroid#4。runionicserve#在浏览器中运行ioniccordovarunandroid#运行到android,ios可能有问题创建项目的时候,会问你是否使用ionic4创建项目,直接选n,还是尝试创建,但是android模拟器的运行时项目显示空白。参考学习菜鸟教程:http://www.runoob.com/ionic/i...中文文档:http://www.ionic.wang/js_doc-...参考学习w3school:https://www.w3cschool.cn/cuhk...3。node.js可能遇到的问题使用免安装版可以避免很多未知错误。安装cordova6.0.0而不是7.0或8.0,因为后面会出现很多错误。Cordova在添加android平台的时候会失败很多次。因为资源在国外会失败很多次,所以插件下载是可以成功的。Android模拟器需要cpu加速器,否则会一直黑屏,所以选择了第三方模拟器。谷歌真机调试chrome://inspect。android9.0无法使用。

最新推荐
猜你喜欢