前言

大家好，我是 BNTang, 在上一節(jié)文章中，我給大家詳細的介紹了如何將我開發(fā)好的項目打包為網(wǎng)頁。

趁熱打鐵，在來一篇文章，給大家詳細的介紹如何將項目打包為小程序。

正文

• 打開微信小程序呢，其實還是需要進行一些相關(guān)的配置的
• 首先打開微信小程序的配置頁面找到 manifest.json 文件
• 打開 manifest.json 之后找到 微信小程序配置

配置微信小程序AppID

• 在微信開發(fā)者工具中申請獲取
• 我們的項目打包，上傳到微信小程序中，需要告訴微信小程序開發(fā)者是誰，所以說需要配置一下AppID

• 然后將 ES6轉(zhuǎn)換ES5/上傳代碼時樣式自動補全/上傳代碼時自動壓縮 都勾選上

配置完畢之后呢，就可以進行發(fā)行了，點擊 HBuilderX 工具欄中的 發(fā)行 -> 小程序-微信(僅適用于uni-app)：

點擊了之后再彈出來的彈框中，只要你之前配置好了微信小程序的內(nèi)容，會自動為你填充，直接點發(fā)行：

打包之后會自動給你打開微信小程序開發(fā)工具：

當(dāng)我運行起來之后發(fā)現(xiàn)，輸入框的樣式有問題，我來一張圖來對比一下網(wǎng)頁VS小程序：

尺寸和網(wǎng)頁版的不一樣，不對的話這里我需要修復(fù)一下，這里就是 UniApp 的一些坑。

UniApp 的坑

• UniApp 看上去比較方便，其實內(nèi)部的問題還是比較多的
• 那么遇到這種問題我們該如何去解決呢？

比較傳統(tǒng)的方式就是百度，可以問AI，等等，因為這里我已經(jīng)百度詢問過了，就不用去百度了，已經(jīng)有經(jīng)驗了，我直接給大家上代碼解決方案即可。

解決方式很簡單就是將我之前寫的 height: 30%;，改為 min-height: 180rpx; 即可：

• 重新發(fā)行，查看效果：

發(fā)布小程序

通過如上內(nèi)容之后就沒問題了，都沒問題之后，就可以發(fā)布了，點擊微信小程序工具中，右上角的詳情，可以針對自己的項目，進行一些相關(guān)的配置，因為我們自己的這個項目沒有訪問網(wǎng)絡(luò)，所以我是不需要配置的。

如果需要訪問網(wǎng)絡(luò)就可以進行配置一下相關(guān)內(nèi)容。

都弄完之后只需要點擊微信小程序工具中，右上角的 上傳:

上傳之后在回到小程序的官網(wǎng)：https://mp.weixin.qq.com/，登錄自己的賬號，選擇小程序登錄而不是公眾號，關(guān)于賬號的注冊等知識這里不介紹：

登錄之后，找到管理菜單中的版本管理：

體驗版本

首選是設(shè)置為體驗版本：

點擊提交：

提交之后，他會給你一個二維碼，這個時候你就可以掃碼進行體驗?zāi)愕男〕绦蛄耍?/p>

提交審核

體驗完畢之后就可以提交審核了，提交審核前需要設(shè)置小程序上線主營類目功能，然后才可以進行提交，小程序上線主營類目功能這里不介紹大家自行了解。

如果審核通過了會跑到審核版本當(dāng)中：

發(fā)布版本

發(fā)布之后就變成線上 App 正在使用的版本了：

End

• 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復(fù)
• 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-打包成小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。