android+cordova+windows打包vue一条龙服务

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命令

android+cordova+windows打包vue一条龙服务相关推荐

Webstorm+cordova打包vue成Android项目
一.新建vue项目 1.打开cmd命令,输入:npm i -g npm 这个命令类似用npm自身来install自己,即升级npm 2.再输入:npm install -g vue-cli 这个命令是 ...
用Cordova打包Vue项目为app
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
使用Cordova打包Vue项目为IOS并使用XCode提交到AppStore
打包Vue项目 1.在Webstorm中打开Vue项目,在下面的Terminal中输入: npm run build 2.等待build完成,双击项目,进入菜单选择Reveal in Finder , ...
三国战记，微软Windows phone,谷歌android,苹果iOS,手机云计算云服务三国混战
北京时间2011年6月7日凌晨一点,万众期待的苹果开发者峰会WWDC在美国召开,来自全球的苹果开发者共同参与了此次盛会.此次发布会上苹果正式对外展示了应用于Mac电脑的Lion系统,应用于苹果iPho ...
来~打包实现小程序动态分享图一条龙服务( ¨̮ )
前一阵有完成在小程序内动态生成图片再进行分享的需求,是很常见的场景,因此我抽出了一个小工具CanvasPainter.js,囊括在小程序内canvas画图基本需求: 用配置形式绘图(暂支持单行及多行文 ...
史上最细Maven一条龙服务（从0到飞起）
史上最细Maven一条龙服务(从0到飞起) Maven 的安装 Maven 软件的下载 Maven 软件的安装 Maven环境变量及 JDK 配置 Maven 软件版本测试 Maven 仓库 Mav ...
创新创业想做电商？CRMEB 为你一条龙服务
文章目录 1. 遇见 CRMEB 2. CRMEB 介绍 3. 项目开源,优点很多 4. 轻松的部署 4.1 环境和工具安装 4.2 开源项目下载 4.3 WEB 管理端部署 4.4 Java 项目部 ...
Go实战Gin+Vue+微服务打造秒杀商城第五课 gin+vue实战
gin+vue实战后端: 用户管理用户列表登录/登出商品管理商品的增上改查活动管理商品关联成功率 redis队列,不成功的回到队列继续,成功的从队列删除结束难点: 代码和部署完全隔离 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
win10 jenkins svn android studio 自动化打包教程以及一些问题的解决办法
win10 jenkins svn android studio 自动化打包教程这两天搭建jenkins自动构建环境,中间遇到点坑坑洼洼分享出来希望后来人少走些弯路准备软件 jenkins.ms ...

android+cordova+windows打包vue一条龙服务

android+cordova+windows打包vue全家桶套餐

android+cordova+windows打包vue一条龙服务相关推荐

最新文章

热门文章