5、編譯小程序和H5 · SparkShop開源商城

# 5、編譯小程序和H5 ## 編譯小程序通過 `HBuilder X` 打開源碼的 `web` 文件，打開 `manifest.json` 找到小程序配置 ![](https://img.kancloud.cn/22/a7/22a73ebce49682e2132f128880f70628_2039x1124.png) 填入你的小程序的APPID。 ![](https://img.kancloud.cn/7e/b5/7eb585ebba98d0b43e9d2aa58871d3ee_2336x1355.png) 以及您的 uni-app的 APPID 找到 `config/app.js` 填寫你的系統域名，即上面部署的域名 ![](https://img.kancloud.cn/e2/21/e221255c58d5acac76a5e2aa13d439a6_2301x1392.png) 編譯前，在項目的目錄上`右鍵 --> 重新識別項目類型`。 ![](https://img.kancloud.cn/23/e6/23e693695e4af88942fe8a1135b6efd2_660x1059.png) 點擊 `發行 --> 小程序-微信` ![](https://img.kancloud.cn/f0/2c/f02c336402d96e4c2263ee141bacafa0_567x816.png) 填寫對應的信息，即可發布了，編譯發布了 ![](https://img.kancloud.cn/fc/b3/fcb3e161fdee851c17e107a9970ab27d_1851x954.png) 編譯完成后，會打開開發者工具。如果未打開，也可以自己打開開發者工具，并找到編譯后的源碼。打開`web\unpackage\dist\build\mp-weixin`，點擊上傳，即可上傳到小程序平臺。 ![](https://img.kancloud.cn/db/0a/db0a75908c9ee8ccec4229123fcea2b5_1870x1483.png) 接下來登陸微信小程序平臺，提交審核即可 ![](https://img.kancloud.cn/d3/e7/d3e7e778dbc3506eb25c36ef7f177f5e_3205x1751.png) ### 編譯h5 配置的接口地址 `config/app.js` 和上面一致。點擊 `發行-->網站-PC Web` ![](https://img.kancloud.cn/e4/59/e45937423461fda40a6806d29553317e_494x837.png) 編譯后的地址在 `web\unpackage\dist\build\h5` ![](https://img.kancloud.cn/b4/77/b477663d5d33af6a117b764e491bf89e_1027x142.png) 將這些文件放到一個靜態的h5域名指向的網站就可以了，比如寶塔上新建一個靜態站點 `h5.sparkshop.cn`,把編譯后的 static 和 index.html 上傳上去，就可以了