一:前言(2018)
之前封装APP都是用的HBuilder结合mui来封装的简单app,有空的时候想研究下之前的phonegap来封装app。然后遇到的问题还是蛮多的,毕竟之前没弄过。
下面的步骤主要是总结下安装和配置,避免自己以后再走弯路,也希望对大家配置有帮助。
二:需要安装和配置的几个包(暂时只到cordova 在windows7 和 android的配置,因为我只弄到这现在)
1.cordova (刚开始一直以为是要安装phonegap的windows版本的app,后来才知道现在的phonegap归属于apache了,现在只需要用npm安装cordova就可以了。)
2.java Development Kit (JDK) 8 (下载的时候一定要看看自己系统和版本是否匹配)
3.gradle
4.android studio (可视化开发工具)
三:cordova的基本知识和安装
现在不需要下载phonegap的app,现在cordova的官网是 “https://cordova.apache.org/”,大家可以去看看熟悉了解。
安装:
1.需要先在电脑上已经安装了 node 和 git 在这里不做叙述;
2.打开cmd控制面板 输入 ‘npm install -g cordova’ 就安装好了(在cmd输入 cordova -v 如果出现版本号,说明安装成功)
四:JDK安装和环境变量配置
1.下载网址:‘https://www.oracle.com/technetwork/java/javase/downloads/index.html’
注意点进每个版本看一下兼容情况,和适合的系统情况。
我自己安装的是:jdk-8u181-windows-x64这个版本的,盘下载这个版本的连接:‘https://pan.baidu.com/s/1f6opzWWxSZyLU-isfLXFRA’。
2.傻瓜式安装,点开exe会进行安装,我这里更改了安装JDK和jre的位置,可以自定义。
3.设置环境变量:
右键计算机 -- 选择属性 -- 选择左边的高级选项设置 -- 选择环境变量 -- 在系统变量下新建 变量名 JAVA_HOME ,变量值 E:BaiduNetdiskDownloadappInstallPalcejava-8u181 (我刚安装更改的jdk安装的地址),如下图:
4. 还是环境变量里面的,把Path变量后面追加地址 : ‘;/JAVA_HOME%/bin’ ,然后保存;
在控制台里面输入java -version 如果出现版本号就是安装配置成功了。
五:安装gradle
官网参考:‘https://gradle.org/install/#helpful-information’
1.下载地址:‘https://gradle.org/next-steps/?version=4.10.2&format=all’
2.在C盘下新建文件夹Gradle,就有了地址: C:Gradle
3.打开刚下的压缩包,解压后,把gradle-4.10.2文件夹放到上面的文件夹下面
4.按照上面java的环境变量的设置,在系统环境变量中加上gradle的bin的绝对路径,追加到Path下面
5.在控制台中输入 gradle -v ,出现版本号就成功,说该指令不存在就配置有问题。
六:安装和配置android-studio SDK
可以参考这里的安装:https://www.cnblogs.com/xiadewang/p/7820377.html
安装有错误的时候,除了uninstall之外,要清除之前的安装设置数据,可以参考:https://zhidao.baidu.com/question/693834551689795644.html
1.官网下载:‘https://developer.android.google.cn/studio/’。
2.傻瓜式安装,我这里下载后没有SDK的勾选项,只有两个,先不管。
3.SDK的配置:(这里是默认的sdk的安装地址,如果不想让这个浪费C盘的内存,就可以在第一次安装启动的时候让安装sdk的地方重新设置地址)
3.1 下载和安装完 android-studio 后就会默认在计算机的C盘下面建sdk的目录,默认地址是:C:UsersAdministratorAppDataLocalAndroidSdk
,因为现在新版的安装的时候并没有网上说的安装的时候会让你选择sdk安装的目录,而是只有一个选择安装 android studio的目录,所以一开始我还以为是没有安装,弄了半天。。。
3.2 设置系统环境变量 ANDROID_HOME 值为:C:UsersAdministratorAppDataLocalAndroidSdk
3.4 更改系统环境变量Path
在Path后面追加两个地址:
一个:%ANDROID_HOME% ools
一个:%ANDROID_HOME%PLATFORM-TOOLS
3.5监测环境变量是否设置成功,
打开cmd控制台窗口,
输入android 如果有反应说明%ANDROID_HOME% ools 配置成功;
输入adb 如果有反应说明%ANDROID_HOME%platform-tools配置成功;
如果没反应就是配置上有问题;
七:到这里基本的android需要的环境都安好了,下面创建一个最简单的app
7.1 cordova创建app
在想要创建的文件夹下,shift+右键 选择在此处打开命令窗口,输入 cordova create hello com.example.hello HelloWorld
hello : 是在这个目录下面建项目 -- com.example.hello : 是项目config的id -- HelloWorld : 项目名为Hello World
7.2 添加安卓平台platform
在刚打开的命令窗口下输入 cd hello 进到这个目录,然后输入 cordova platform add android
7.3 检查需要的插件和环境是否安装和配置
在hello下的打开的命令窗口 输入 cordova-requirements 会展示哪些安装哪些没有还
7.4 打包 apk
还是在上面的命令窗口 输入 cordova build android ,等一会之后就会在项目下生成apk,
我的地址:E:mynodeproject22.wepapp-cordovahelloplatformsandroidappuildoutputsapk( hello就是我的这个项目地址)
八:android studio虚拟机中启动
8.1 打开刚安装 android studio 的文件 找到 .exe启动,
我的是E:BaiduNetdiskDownloadandroid-studio-ideandroid-studioin 目录下的 studio64.exe (我电脑是64位系统的,所以打开这个)
8.2 打开项目,如下图
8.3 修改jdk位置,设置自己上面安装java环境的位置,如下图
8.4 设置一个安卓的虚拟机,如下图点击红色框:
8.5 按照提示安装完虚拟机后,就可以使用了,点击上图中的绿色箭头按钮,启动这个虚拟机,然后回到我们的项目hello下面打开命令行,输入 cordova run android 就会在虚拟机中展示第一个简单的app