前言

大家好，我是 BNTang, 在上一節文章中，我給大家詳細的介紹了如何將我開發好的項目打包為網頁。

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

正文

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

配置微信小程序AppID

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

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

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

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

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

當我運行起來之后發現，輸入框的樣式有問題，我來一張圖來對比一下網頁VS小程序：

尺寸和網頁版的不一樣，不對的話這里我需要修復一下，這里就是 UniApp 的一些坑。

UniApp 的坑

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

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

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

• 重新發行，查看效果：

發布小程序

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

如果需要訪問網絡就可以進行配置一下相關內容。

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

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

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

體驗版本

首選是設置為體驗版本：

點擊提交：

提交之后，他會給你一個二維碼，這個時候你就可以掃碼進行體驗你的小程序了：

提交審核

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

如果審核通過了會跑到審核版本當中：

發布版本

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

End

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。