2

小编从事前端行业也有近5年了,在工作中经常遇到app打包的一些问题,比如app到底用哪款打包工具,具体怎么打包,怎么上线?都有那些方式?小编特意哦在百忙之中整理了一下,如有哪里不对的,请赐教哈哈哈哈

image.png

也许有人问啊,小编啊安卓我们都会,你还是给我们讲解一下IOS的如何打包吧,大家不要着急,详细的IOS打包在这里,点击链接即可!

下面我们讲解一下app安卓打包的几种方式:


一、Hbuilder打包apk
目前最多的小编公司用的最多的是Hbuilder打包方式,也许是因为比较简单吧,O(∩_∩)O哈哈~小编经常采用这种方式,首先这种方式方便 然后就是简单,最后就是好学!
我们首先去官网下载Hbuilder 软件工具,这里是Hbuilder官网链接

image.png
image.png
这里推荐选择标准版本,如果你的window选择window,如果是mac 就选择mac 底下的标准版。下载完成后,解压,点击安装 运行
image.png

点击Hbuilder.exe运行起来,运行起来的这里都是空白的文件,我们点击新建

image.png

image.png

这个test项目里面,最后替换成你打包好的dist所有的东西,将dist文件夹下面的全部复制粘贴到test文件夹里面,简单介绍一下,这里面的文件结构

image.png

然后点击发行---原生云打包
image.png

如果这里 还没登录hbuilder账号的需要先注册并登录,如果已经登录了,
image.png
点击右下角,打包
image.png
image.png
image.png

对,就是这么简单,傻瓜式教学,哈哈哈


二、cordova打包项目apk

1.安装cordova
安装node
这是node下载链接

推荐点击这个

node安装蛮简单的,一路next就好
下载安装好后。安装之后在命令行中使用'node -v 检查安装是否成功。
npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功安装。
image.png

jdk安装与配置环境变量

1、下载jdk
JDK1.8官网链接地址
https://www.oracle.com/java/t...
image.png
点击下载,下载完后安装,直接点击下一步。
image.png
可更改你要安装的位置(要记住这个位置,后面环境变量配置用到了)

2、环境变量配置
安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量

系统变量→新建 JAVA_HOME 变量 。
image.png
变量值填写jdk的安装目录(本人是D:Program Filesjdk1.8)

3、系统变量path配置
系统变量→寻找 Path 变量→编辑

在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)
image.png

4、系统变量CLASSPATH配置
系统变量→新建 CLASSPATH 变量

变量值填写   .;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar(注意最前面有一点)
image.png

系统变量配置完毕

5、检验是否配置成功
安装完成之后,我们运行命令,检验是否配置成功 运行cmd 输入 java -version
image.png

sdk安装与配置环境变量

1、下载Android SDK与安装
下载路径再这里 https://www.androiddevtools.cn/#
image.png

先找到SDK Tools,下载最新的版本即可。选择zip的,解压缩至目标路径位置即可

 

下载完成之后,解压(我解压位置:D:Program Files (x86)android-sdk-windows)
image.png

2、双击“SDK Manager”,启动SDK Manager

image.png

①、Tools的勾选图示选项下载即可。

image.png

②、API的任意选择一个,考虑向下兼容原则,可以下载最新的API。

③、Extras的全选
image.png

点击安装,就会一直下载东西 下载完成后,进行环境变量的配置。

3、设置环境变量

①、新建一个系统环境变量,变量名为ANDROID_SDK_HOME,变量值为你的SDK安装路径

 image.png

②把
%ANDROID_SDK_HOME%\platform\tools;%ANDROID_SDK_HOME%\tools添加到Path环境变量中。

image.png

③、检测是否配置成功。打开命令行窗口,输入adb。出现如下图所示内容,出现一堆字母,则配置成功:
image.png

安装gradle

1、下载与安装
下载链接http://services.gradle.org/distributions/

image.png

下载解压至D:\gradle-2.7-all\gradle-2.7-all

image.png

2、环境变量配置
右击我的电脑--属性--高级系统设置--环境变量--在系统变量里找到Path点击编辑

在编辑环境变量的弹框内点击新建

输入D:\gradle-2.7-all\gradle-2.7-all\bin 点击确定

image.png

3、终端输入 gradle -v出现下图安装成功

出现下面这样,说明安装成功了。

image.png

安装cordova

终于最后一个环节到来了,我们莫要着急,马上看见曙光了,坚持就是胜利,哈哈哈
话不多说,我们开始最后一个环节!
1、安装cordova

在终端运行cmd 接下来我们安装cordova命令

npm install -g cordova

查看时候安装好

 cordova -v

image.png

2、初始化项目:
初始化项目,选择你的位置,并cmd进入(例如我是放在E:test里面)其中:
image.png
hello:cordova目录名
com.example.hello: 包名
HelloWorld: 项目名(在config.xml中查看)_

cordova create hello com.example.hello HelloWorld

切换到创建的文件夹,输入指令:

cordova platform add android --save

image.png

因为我们打包的是apk,所以使用安卓平台(本人没苹果电脑,打包不出ipa)

3、添加完平台后,检查当前设置状况

指令:

cordova platform ls

image.png

检查打包条件

指令:

cordova requirements

4、最后一步,关键是否成功最后一步,打包app

cordova build android

打包完成,直接发个安卓 即可安装!

三、全面讲解打包成apk,如何上线

敬请期待,稍后更新!!!

小编不易,如有收获,微信赏小编喝杯娃哈哈

image.png

单身狗的 葵花宝典,撩妹必备 敬请关注!
image.png


程序员的佼佼者
86 声望14 粉丝

优秀的人,都是相投的,哈哈哈哈