android+cordova+windows打包vue全家桶套餐
说到安卓打包就不得不用到android-sdk了,我常用两种工具来管理,android studio和sdk Manager,这里我就小白推荐用sdk Manager可以增加知识储备。
一、sdk Manager下载
sdk Manager下载戳这里
若有想下载android studio的…
二、sdk下载与环境变量的配置
值得一提的是如果你使用android studio的话,恭喜你,它会自动帮里下载最新android并配好环境变量(我第一次就是这样的==)!!!好了,话不多说,直接上图~
这里值得一提的是下载时间很长,你可以使用对应的镜像加快下载速度,若和我一样的小白我建议在网络允许的情况下还是不要用镜像吧(主要是容易出毛病,第一次我是一路百度走的,偶尔会差一些莫名其妙的东西--)!
这里给需要的同学提供我知道的一些镜像服务器地址:
1、中科院开源协会镜像站地址:
IPV4/IPV6 : http://mirrors.opencas.ac.cn 端口:80
2、北京化工大学镜像服务器地址:
IPv4: http://ubuntu.buct.edu.cn/ 端口:80
IPv4: http://ubuntu.buct.cn/ 端口:80
IPv6: http://ubuntu.buct6.edu.cn/ 端口:80
3、大连东软信息学院镜像服务器地址:
http://mirrors.neusoft.edu.cn 端口:80
配置环境变量
方法和设置JAVA JDK的环境变量的方法类似,“右键 我的电脑”—“属性”—“高级系统设置”—“环境变量”—“系统变量”—“新建”——变量名:ANDROID_HOME
在新建完ANDROID_HOME之后,找到Path变量,然后双击打开Path 变量并新建:
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
最后,测试一下是否成功:开始-运行-输入cmd-在终端输入
命令:android -h
如果输出这一堆东西那么恭喜你android-sdk已经装好了,准备工作完成一半了!
三、node安装
要知道cordova是基于node.js的,但如今node版本如此之多且杂,那么我们该选那一版呢?这里我给小白推荐一下nvm,简单来说nvm就是一个管理node的插件,作为小白我就不多介绍了,详情请看:
https://www.jianshu.com/p/d0e0935b150a
四、下载安装cordova
经过前三步需要的依赖都准备好了,终于要进入代码阶段了,相信作为小白,你我都经历了漫长而枯燥的时光~~
如果对自己的网速没信心,请先安装淘宝镜像(安装后以下所有npm都替换成cnpm):
打开命令提示符或者终端执行:
npm install -g cnpm --registry=https://registry.npm.taobao.org
1、全局安装cordova:npm install -g cordova并执行:cordova -v 这里的提示选n,只要出现版本号就代表安装成功而了
2、创建cordova项目并添加平台
打开命令提示符或终端td到项目目录下执行:
cordova create myFirstcordovaApp com.cordova.myFirstApp
其中:
myFirstcordovaApp指的是cordova打包项目的名称
com.cordova.myFirstApp是打包后包名
创建项目时有时会报错
百思不得其解,于是我 cnpm uninstall -g cordova再cnpm install -g cordova@低版本号(目前最新9.0.0),这就成功了???于是我发现npm和cnpm是node的指令,那是不是node的版本有指定的cordova版本呢?经过一番实验,我的猜想没有错,具体版本对应区间请自行百度。。。
生成的myFirstcordovaApp文件中
config.xml -包含应用相关信息,使用到的插件以及面向的平台
platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
plugins – 包含应用所需插件的 Cordova 库,使得应用能够访问例如照相机和电池状态相关的事项。
www – 包含应用源代码,例如 HTML, JavaScript 和 CSS 文件
hooks – 包含为个性化应用编译系统所需的脚本
然后进入myFirstcordovaApp目录cd myFirstcordovaApp
添加平台:
android:cordova platform add android
ios:cordova platform add ios
这里添加的是android,命令运行后出现以下信息则表示添加成功
Android project created with cordova-android@5.1.1,注意了:不同cordova版本对应了不同版本的android版本,如果android sdk中没有提示版本的android,那么你该去下载了朋友,不然会报错,本文可直接用步骤二中的sdk Manager工具安装。
四、创建vue项目
cordova可打包很多类型移动端项目,而移动端常用vue,本文就以vue为例
1、创建vue项目
如果你还不会创建vue项目详情请看:https://cn.vuejs.org/
本文不做过多介绍,直接上代码:
npm install -g vue
npm install -g vue-cli
vue init webpack myfirstapp //项目名不能有大写字母(会自动驼峰命名),不然会报提示错误不让创建!
在打包之前,我们进入vue的项目的config目录,找到index.js,找到build中的部分(注意:若用的vue-cli3.0则有单独的vue.config.js文件):
首先试运行vue项目(记得npm i),如果运行成功,则打开终端或者命令窗口,输入npm run build。
打包成功后,把打包后的dist中的文件,包括static文件夹和index.html放到cordova项目中的www的文件夹下(若图中地址是myFirstcordovaApp/www目录则不需要)
补充:
值得注意的是,当你的cordova版本较新时,需手动安装gradle,其版本也与cordova版本有对应关系,请自行查找,但一般下最新的稳定版即可(貌似向下兼容2个大版本),下载后需配环境变量哦,具体下载细节请百度(=_=)
然后进入cordova项目的文件夹下(cd myFirstcordovaApp)
执行cordova build android
好吧,报错不是错,就怕不报错,解决问题为走起
先sdk manager下载android-23(android6.0)
好吧貌似是需要网络下载打包配置文件,但没下下来(可能是个人网络问题*_*)
这里注意了,若是最新版的cordova可直接去https://services.gradle.org/distributions/下载最新版本gradle解压并配置环境变量(自行百度),但本文用的是cordova@6.0.0,经过大量测试你需要将指定的gradle(压缩包)下载下来后
经过漫长的等待。。。。。。
特别黑科技:
当我开发接上后端接口时发现,我辣么多数据一个都不见了!!!调试全是:
net::ERR_CLEARTEXT_NOT_PERMITTED
原因是android9开始不允许http,当遇到这种情况时:
解决办法,在(platforms\android\app\src\main目录下)AndroidManifest.xml的applicatioin节点加android:usesCleartextTraffic=“true” 属性
<manifest ...>
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>
五、打包常见深坑
1、node、cordova、android sdk三则版本问题,对于小白来说可能无从下手,我的建议是:
1.将三则全部卸载;
2.先装node.js,再装cordova(cordova基于node)、最后下载sdk Manager(个人觉得android studio自动配置sdk经常导致cordova打包sdk报错=_=),并将android sdk(10~8)全下载下来
2、node插件包不全(node_modules)
npm i下载,若不行将node_modules删除,安装淘宝镜像,执行cnpm i(有时npm i下载网速影响,导致部分包下载不全),并且细心的下伙伴会发现再打包时也时会下载一些网络资源的(主要是gradle问题)
3、打包日志冲突
打包一次会生成日志(无论成功或失败),有时打包错误,有可能会影响日志输出,此时只需将日志目录清空
4、中文路径
在此严重警告刚写代码的程序员,项目路径切忌不要出现中文路径(==),即使你运行时没有任何错误也请不要进行如此降智操作。如果你按照正常步骤进行安装和打包,在打包时依旧报各种插件配置错误,那么请回去看看你的项目路径是否有中文(来自我一个4年工作经验的老同事的SB行为**)。
诸如:E:\我的所有项目\10SRC\01CCPB 此类路径
5、平台接口失效
Cannot find module 'F:xxx\Api.js'
关于此现象的出现做个简单说明:
由于此前做了一个uniapp的项目,使用了最新版本的AndroidStudio,并进行了sdk的托管,结果导致出现上述现象,一度以为android包除了问题,于是android -v发现:
android -v
**************************************************************************
The "android" command is deprecated.
For manual SDK, AVD, and project management, please use Android Studio.
For command-line tools, use tools\bin\sdkmanager.bat
and tools\bin\avdmanager.bat
**************************************************************************
好家伙,都不让使用adndroid命令了,于是检查环境变量配置,发现无任何问题,于是百度发现新版的SDK tools中的android命令已经不支持部分 android命令了,但我只是打个包,又不需要android命令😂,于是:
cordova platform rm android
再重新添加android平台就ok啦
cordova platform add android
6.build tools损坏
遇到这种情况: