着移动互联网的发展，越来越多的企业和开发者开始关注移动应用程序的开发和发布。但是，许多开发者却面临着一个问题：如何将网页封装成apk，以提高用户体验和appstore的下载量？

网页封装成apk可以带来许多好处，例如提高用户体验、增加appstore的下载量、降低开发成本等。但是，如何实现网页封装成apk却是一个让许多开发者头疼的问题。

APP封装：www.laiff.cn

网页封装成apk的步骤

网页封装成apk的步骤可以概括为以下几点：

• 选择合适的封装工具
• 准备好网页的源代码
• 配置封装工具的参数
• 封装网页成apk
• 测试和优化apk

但是，网页封装成apk的步骤并不像看起来那么简单。许多开发者在封装过程中会遇到各种问题，例如封装工具的选择、参数的配置、apk的优化等。

小猪APP分发的解决方案

小猪APP分发是一个专业的应用程序分发平台，提供了一站式的应用程序分发解决方案。小猪APP分发可以帮助开发者快速将网页封装成apk，并提供了多种封装工具和参数配置的选项。

小猪APP分发的解决方案可以解决开发者在网页封装成apk过程中遇到的所有问题。小猪APP分发的封装工具可以自动配置参数，快速封装网页成apk。同时，小猪APP分发还提供了apk的优化和测试服务，确保apk的质量和用户体验。

小猪APP分发的优势

小猪APP分发的解决方案具有许多优势，例如：

• 快速封装网页成apk
• 自动配置参数
• apk的优化和测试
• 多种封装工具和参数配置的选项
• 专业的技术支持

小猪APP分发的解决方案可以帮助开发者快速将网页封装成apk，并提高用户体验和appstore的下载量。

结论

网页封装成apk可以提高用户体验和appstore的下载量，但如何实现却是一个让许多开发者头疼的问题。小猪APP分发的解决方案可以帮助开发者快速将网页封装成apk，并提供了多种封装工具和参数配置的选项。

分享是一种传递，是一种给予，更是一种收获。它让我们在人生的旅途中，将快乐、幸福、智慧和爱不断地传递下去，让每一个人都感受到温暖和力量。

在基于vue全家桶技术体系，基本上可以开发各端的各种应用，pc端的应用，开发完成以后，直接运行打包命令 yarn build 即可打包，部署到服务器端上线即可。那么，今天我们来聊一聊，开发好的vue移动端应用，如何打包成app，安装在自己的手机上呢？

首先，基于vue开发的应用，现在主流的是使用vue/cli的4.x版本搭建的项目，从vue-cli的3.x版本以后，如何修改vue的项目配置呢？过程和步骤如下。

我们需要在项目根目录下创建一个vue.confing.js文件，项目目录如下

• 在vue.config.js中，我们就可以写很多webpack配置，常用的有: 配置端口号，配置跨域服务器代理等。我们需要的主要是配置一个打包的目录publicPath,否则打包出来的apk文件，安装在安卓手机上，可能出现白屏，具体配置如下:

module.exports={

devServer: {

port: "6868", // 配置开发服务器的端口号（打包可以无需配置）

// 配置跨域代理(也可以使用CROS解决跨域)

proxy: {

"/ api": {

},

target: "http://192.168.1.1:4343", // 目标服务器地址

ws: true, // 是否代理websocket

changeOrigin: true, // 是否跨域

pathRewrite: {

"^/api": '' // url重写

}

}

},

publicPath: "./" // 需要配置 否则打包后的apk文件安装在手机可能白屏

}

• 配置好了以后，从项目目录进入终端，运行打包命令即可

• 打包完成以后，项目根目录下，会多出一个dist目录，内容如下：

经历以上步骤，我们的vue项目就已经打包完成了，接下来，需要借助一个工具hbuilderX，把我们的项目打包为android端的apk文件，具体步骤如下：

一、首先，去官网下载hbuildX，下载地址为: https://www.dcloud.io/hbuilderx.html. 选择自己的环境，下载对应的版本即可，下载完成直接解压，打开HbuildX.

启动后界面如下：

• 启动界面的左下角有一个登录按钮，点击登录，如果没有账号的话，显注册一个账号在登录，登录完成以后，左下角会有自己的账号名称。

• 然后，选择新建、项目，创建一个5+App项目，项目名称和路径自己选择即可。

• 创建出来的项目目录和目录说明如下，把之前打包好的dist目录内容复制粘贴过来，直接选择覆盖即可。

以上步骤完成以后，接下来所有工作准备就绪，只剩下打包了，具体打包步骤如下：

• 打开manifest.json，配置核心重要的几个选项，具体配置如下：

生成的图标在unpackage目录下面的res目录中

• 选择发行=》原生App云打包=>然后选择打android的包，有ios的证书也可以打包为ios，android可以用免费的公用证书，开发者直接使用即可，具体选择如下，然后接下来等待即可。

• 稍微等待之后，打包成功之后，会返回apk下载文件的下载链接，点击链接，把apk文件下载下来，然后发送到自己的android手机，安装在自己的手机上即可。

经历过以上的步骤，我们就可以在自己的手机上体验自己开发的app了，大家可以按照步骤来试一试，把自己开发的app安装在自己的手机上，使用起来吧。

多产品朋友想在手机上预览自己的原型，这样给到甲方和程序时能更直观的展现产品全貌，大幅度降低沟通成本，笔者尝试了以下方法（老司机可以直接看方法三）。

一、使用官方Axure Share

• 优点：简单部署，注册Axure账号，直接发布到Axure Share，手机端使用官方App登录即可查看原型。
• 缺点：由于某些原因，官方服务器访问及其缓慢，这种方法聊胜于无吧。

二、使用国内第三方原型托管

这里推荐 产品大牛 和 Axhub，大家还可以找到更多，其实原理就是国内服务器部署了代理服务器，大家把html原型文件上传后就可以查看到。

• 优点：访问速度快，可以设置密码权限。
• 缺点：每次更新Axure文件需要打包html文件。

三、“生成”手机APP（老司机直接看这里）

我们基于方法二就可以用链接生成一个APP了，实现过程如下：

（1）准备工具

AxureRP9 第三方原型托管平台（以产品大牛为例） Fusion App。

（2）绘制手机端原型

笔者推荐使用AxureRP9，因为使用AxureRP9的自适应视图对手机端有更好的适配体验（AxureRP8也可以用自适应视图）。

我们在绘制原型时，设置自适应视图：

设置自适应视图

这样，在PC浏览器上，方便程序员美术可以看到我们的功能点需求说明，在移动端可以直接自适应（隐藏说明，只显示原型功能内容）。

PC版视图内容

PC版视图效果-可向程序美术展示

手机版视图内容

手机版视图效果-可向老板甲方展示

（3）生成html后上传至第三方托管平台（以产品大牛为例）

上传至产品大牛：

上传至产品大牛

获得原型演示链接：

原型演示链接

（4）“生成”手机APP

有了演示链接后，我们就可以通过PC浏览器预览PC版视图，也可以使用手机浏览器（推荐谷歌）查看我们的原型了，但是手机端浏览器体验还是不爽，使用Fusion App快速生成一个套壳APP，瞬间将原型提升至原生体验（斜眼233）。

下载安装Fusion App（文末有链接，或者酷安市场可以下载）； 右下角新建一个工程。

新建工程

选择空白模板：

选择空白模板

输入应用名称，自动生成包名（注意包名必须是三段式不能有特殊字符）。

输入应用名

输入我们之前的演示链接，打开显示状态栏，其它选择默认。

输入原型演示链接

右上角选择应用打包，安装应用

安装应用

安装完我们就获得了一个套壳APP，可以将这个安装包扔给老板，甲方客户，体验so cool。

安装完成

打开APP 甚至还有导航栏配色自适应！

打开APP

进阶操作：我们发现好像内容没有自适应呢？这里有一个隐藏操作，连续三击屏幕会弹出Axure的一个设置菜单。

设置适应宽度

右侧两个卡片可以查看原型页面目录和页面说明，不再赘述。

再看我们的原型内容：

完美适配

笔者体验下来，因为原型托管在国内服务器，加上各项交互操作下来，有着不亚于小程序、PWA应用的体验，AxureRP9也重构了它的内核，所以速度确实有所提升。

作者：盐粒，一只幼年产品流浪狗

本文由 @盐粒 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议