著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的企業(yè)和開(kāi)發(fā)者開(kāi)始關(guān)注移動(dòng)應(yīng)用程序的開(kāi)發(fā)和發(fā)布。但是，許多開(kāi)發(fā)者卻面臨著一個(gè)問(wèn)題：如何將網(wǎng)頁(yè)封裝成apk，以提高用戶(hù)體驗(yàn)和appstore的下載量？

網(wǎng)頁(yè)封裝成apk可以帶來(lái)許多好處，例如提高用戶(hù)體驗(yàn)、增加appstore的下載量、降低開(kāi)發(fā)成本等。但是，如何實(shí)現(xiàn)網(wǎng)頁(yè)封裝成apk卻是一個(gè)讓許多開(kāi)發(fā)者頭疼的問(wèn)題。

APP封裝：www.laiff.cn

網(wǎng)頁(yè)封裝成apk的步驟

網(wǎng)頁(yè)封裝成apk的步驟可以概括為以下幾點(diǎn)：

• 選擇合適的封裝工具
• 準(zhǔn)備好網(wǎng)頁(yè)的源代碼
• 配置封裝工具的參數(shù)
• 封裝網(wǎng)頁(yè)成apk
• 測(cè)試和優(yōu)化apk

但是，網(wǎng)頁(yè)封裝成apk的步驟并不像看起來(lái)那么簡(jiǎn)單。許多開(kāi)發(fā)者在封裝過(guò)程中會(huì)遇到各種問(wèn)題，例如封裝工具的選擇、參數(shù)的配置、apk的優(yōu)化等。

小豬APP分發(fā)的解決方案

小豬APP分發(fā)是一個(gè)專(zhuān)業(yè)的應(yīng)用程序分發(fā)平臺(tái)，提供了一站式的應(yīng)用程序分發(fā)解決方案。小豬APP分發(fā)可以幫助開(kāi)發(fā)者快速將網(wǎng)頁(yè)封裝成apk，并提供了多種封裝工具和參數(shù)配置的選項(xiàng)。

小豬APP分發(fā)的解決方案可以解決開(kāi)發(fā)者在網(wǎng)頁(yè)封裝成apk過(guò)程中遇到的所有問(wèn)題。小豬APP分發(fā)的封裝工具可以自動(dòng)配置參數(shù)，快速封裝網(wǎng)頁(yè)成apk。同時(shí)，小豬APP分發(fā)還提供了apk的優(yōu)化和測(cè)試服務(wù)，確保apk的質(zhì)量和用戶(hù)體驗(yàn)。

小豬APP分發(fā)的優(yōu)勢(shì)

小豬APP分發(fā)的解決方案具有許多優(yōu)勢(shì)，例如：

• 快速封裝網(wǎng)頁(yè)成apk
• 自動(dòng)配置參數(shù)
• apk的優(yōu)化和測(cè)試
• 多種封裝工具和參數(shù)配置的選項(xiàng)
• 專(zhuān)業(yè)的技術(shù)支持

小豬APP分發(fā)的解決方案可以幫助開(kāi)發(fā)者快速將網(wǎng)頁(yè)封裝成apk，并提高用戶(hù)體驗(yàn)和appstore的下載量。

結(jié)論

網(wǎng)頁(yè)封裝成apk可以提高用戶(hù)體驗(yàn)和appstore的下載量，但如何實(shí)現(xiàn)卻是一個(gè)讓許多開(kāi)發(fā)者頭疼的問(wèn)題。小豬APP分發(fā)的解決方案可以幫助開(kāi)發(fā)者快速將網(wǎng)頁(yè)封裝成apk，并提供了多種封裝工具和參數(shù)配置的選項(xiàng)。

分享是一種傳遞，是一種給予，更是一種收獲。它讓我們?cè)谌松穆猛局校瑢⒖鞓?lè)、幸福、智慧和愛(ài)不斷地傳遞下去，讓每一個(gè)人都感受到溫暖和力量。

在基于vue全家桶技術(shù)體系，基本上可以開(kāi)發(fā)各端的各種應(yīng)用，pc端的應(yīng)用，開(kāi)發(fā)完成以后，直接運(yùn)行打包命令 yarn build 即可打包，部署到服務(wù)器端上線即可。那么，今天我們來(lái)聊一聊，開(kāi)發(fā)好的vue移動(dòng)端應(yīng)用，如何打包成app，安裝在自己的手機(jī)上呢？

首先，基于vue開(kāi)發(fā)的應(yīng)用，現(xiàn)在主流的是使用vue/cli的4.x版本搭建的項(xiàng)目，從vue-cli的3.x版本以后，如何修改vue的項(xiàng)目配置呢？過(guò)程和步驟如下。

我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.confing.js文件，項(xiàng)目目錄如下

• 在vue.config.js中，我們就可以寫(xiě)很多webpack配置，常用的有: 配置端口號(hào)，配置跨域服務(wù)器代理等。我們需要的主要是配置一個(gè)打包的目錄publicPath,否則打包出來(lái)的apk文件，安裝在安卓手機(jī)上，可能出現(xiàn)白屏，具體配置如下:

module.exports={

devServer: {

port: "6868", // 配置開(kāi)發(fā)服務(wù)器的端口號(hào)（打包可以無(wú)需配置）

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

proxy: {

"/ api": {

},

target: "http://192.168.1.1:4343", // 目標(biāo)服務(wù)器地址

ws: true, // 是否代理websocket

changeOrigin: true, // 是否跨域

pathRewrite: {

"^/api": '' // url重寫(xiě)

}

}

},

publicPath: "./" // 需要配置 否則打包后的apk文件安裝在手機(jī)可能白屏

}

• 配置好了以后，從項(xiàng)目目錄進(jìn)入終端，運(yùn)行打包命令即可

• 打包完成以后，項(xiàng)目根目錄下，會(huì)多出一個(gè)dist目錄，內(nèi)容如下：

經(jīng)歷以上步驟，我們的vue項(xiàng)目就已經(jīng)打包完成了，接下來(lái)，需要借助一個(gè)工具h(yuǎn)builderX，把我們的項(xiàng)目打包為android端的apk文件，具體步驟如下：

一、首先，去官網(wǎng)下載hbuildX，下載地址為: https://www.dcloud.io/hbuilderx.html. 選擇自己的環(huán)境，下載對(duì)應(yīng)的版本即可，下載完成直接解壓，打開(kāi)HbuildX.

啟動(dòng)后界面如下：

• 啟動(dòng)界面的左下角有一個(gè)登錄按鈕，點(diǎn)擊登錄，如果沒(méi)有賬號(hào)的話，顯注冊(cè)一個(gè)賬號(hào)在登錄，登錄完成以后，左下角會(huì)有自己的賬號(hào)名稱(chēng)。

• 然后，選擇新建、項(xiàng)目，創(chuàng)建一個(gè)5+App項(xiàng)目，項(xiàng)目名稱(chēng)和路徑自己選擇即可。

• 創(chuàng)建出來(lái)的項(xiàng)目目錄和目錄說(shuō)明如下，把之前打包好的dist目錄內(nèi)容復(fù)制粘貼過(guò)來(lái)，直接選擇覆蓋即可。

以上步驟完成以后，接下來(lái)所有工作準(zhǔn)備就緒，只剩下打包了，具體打包步驟如下：

• 打開(kāi)manifest.json，配置核心重要的幾個(gè)選項(xiàng)，具體配置如下：

生成的圖標(biāo)在unpackage目錄下面的res目錄中

• 選擇發(fā)行=》原生App云打包=>然后選擇打android的包，有ios的證書(shū)也可以打包為ios，android可以用免費(fèi)的公用證書(shū)，開(kāi)發(fā)者直接使用即可，具體選擇如下，然后接下來(lái)等待即可。

• 稍微等待之后，打包成功之后，會(huì)返回apk下載文件的下載鏈接，點(diǎn)擊鏈接，把a(bǔ)pk文件下載下來(lái)，然后發(fā)送到自己的android手機(jī)，安裝在自己的手機(jī)上即可。

經(jīng)歷過(guò)以上的步驟，我們就可以在自己的手機(jī)上體驗(yàn)自己開(kāi)發(fā)的app了，大家可以按照步驟來(lái)試一試，把自己開(kāi)發(fā)的app安裝在自己的手機(jī)上，使用起來(lái)吧。

多產(chǎn)品朋友想在手機(jī)上預(yù)覽自己的原型，這樣給到甲方和程序時(shí)能更直觀的展現(xiàn)產(chǎn)品全貌，大幅度降低溝通成本，筆者嘗試了以下方法（老司機(jī)可以直接看方法三）。

一、使用官方Axure Share

• 優(yōu)點(diǎn)：簡(jiǎn)單部署，注冊(cè)Axure賬號(hào)，直接發(fā)布到Axure Share，手機(jī)端使用官方App登錄即可查看原型。
• 缺點(diǎn)：由于某些原因，官方服務(wù)器訪問(wèn)及其緩慢，這種方法聊勝于無(wú)吧。

二、使用國(guó)內(nèi)第三方原型托管

這里推薦 產(chǎn)品大牛 和 Axhub，大家還可以找到更多，其實(shí)原理就是國(guó)內(nèi)服務(wù)器部署了代理服務(wù)器，大家把html原型文件上傳后就可以查看到。

• 優(yōu)點(diǎn)：訪問(wèn)速度快，可以設(shè)置密碼權(quán)限。
• 缺點(diǎn)：每次更新Axure文件需要打包html文件。

三、“生成”手機(jī)APP（老司機(jī)直接看這里）

我們基于方法二就可以用鏈接生成一個(gè)APP了，實(shí)現(xiàn)過(guò)程如下：

（1）準(zhǔn)備工具

AxureRP9 第三方原型托管平臺(tái)（以產(chǎn)品大牛為例） Fusion App。

（2）繪制手機(jī)端原型

筆者推薦使用AxureRP9，因?yàn)槭褂肁xureRP9的自適應(yīng)視圖對(duì)手機(jī)端有更好的適配體驗(yàn)（AxureRP8也可以用自適應(yīng)視圖）。

我們?cè)诶L制原型時(shí)，設(shè)置自適應(yīng)視圖：

設(shè)置自適應(yīng)視圖

這樣，在PC瀏覽器上，方便程序員美術(shù)可以看到我們的功能點(diǎn)需求說(shuō)明，在移動(dòng)端可以直接自適應(yīng)（隱藏說(shuō)明，只顯示原型功能內(nèi)容）。

PC版視圖內(nèi)容

PC版視圖效果-可向程序美術(shù)展示

手機(jī)版視圖內(nèi)容

手機(jī)版視圖效果-可向老板甲方展示

（3）生成html后上傳至第三方托管平臺(tái)（以產(chǎn)品大牛為例）

上傳至產(chǎn)品大牛：

上傳至產(chǎn)品大牛

獲得原型演示鏈接：

原型演示鏈接

（4）“生成”手機(jī)APP

有了演示鏈接后，我們就可以通過(guò)PC瀏覽器預(yù)覽PC版視圖，也可以使用手機(jī)瀏覽器（推薦谷歌）查看我們的原型了，但是手機(jī)端瀏覽器體驗(yàn)還是不爽，使用Fusion App快速生成一個(gè)套殼APP，瞬間將原型提升至原生體驗(yàn)（斜眼233）。

下載安裝Fusion App（文末有鏈接，或者酷安市場(chǎng)可以下載）； 右下角新建一個(gè)工程。

新建工程

選擇空白模板：

選擇空白模板

輸入應(yīng)用名稱(chēng)，自動(dòng)生成包名（注意包名必須是三段式不能有特殊字符）。

輸入應(yīng)用名

輸入我們之前的演示鏈接，打開(kāi)顯示狀態(tài)欄，其它選擇默認(rèn)。

輸入原型演示鏈接

右上角選擇應(yīng)用打包，安裝應(yīng)用

安裝應(yīng)用

安裝完我們就獲得了一個(gè)套殼APP，可以將這個(gè)安裝包扔給老板，甲方客戶(hù)，體驗(yàn)so cool。

安裝完成

打開(kāi)APP 甚至還有導(dǎo)航欄配色自適應(yīng)！

打開(kāi)APP

進(jìn)階操作：我們發(fā)現(xiàn)好像內(nèi)容沒(méi)有自適應(yīng)呢？這里有一個(gè)隱藏操作，連續(xù)三擊屏幕會(huì)彈出Axure的一個(gè)設(shè)置菜單。

設(shè)置適應(yīng)寬度

右側(cè)兩個(gè)卡片可以查看原型頁(yè)面目錄和頁(yè)面說(shuō)明，不再贅述。

再看我們的原型內(nèi)容：

完美適配

筆者體驗(yàn)下來(lái)，因?yàn)樵屯泄茉趪?guó)內(nèi)服務(wù)器，加上各項(xiàng)交互操作下來(lái)，有著不亞于小程序、PWA應(yīng)用的體驗(yàn)，AxureRP9也重構(gòu)了它的內(nèi)核，所以速度確實(shí)有所提升。

作者：鹽粒，一只幼年產(chǎn)品流浪狗

本文由 @鹽粒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議