使用HBuilderX打包ShopXO開源商城新版本小程式uniapp主題教程

ShopXO開源商城發表於2021-11-24
UIAPP

原始碼地址

Gitee：gitee.com/zongzhige/shopxo-uniapp

GitHub：https://github.com/gongfuxiang/shopxo-uniapp

Coding：https://zongzhige.coding.net/public/shopxo/uniapp/git

CodeChina：https://codechina.csdn.net/zongzhige/shopxo-uniapp

uniapp外掛：https://ext.dcloud.net.cn/plugin?id=6380

1. 下載 HBuilderX 工具

HBuilderX支援外掛擴充功能。App開發版已整合相關外掛、開箱即用

根據自身電腦系統選擇對應軟體下載，建議選擇APP開發版

下載地址：https://www.dcloud.io/hbuilderx.html

image.png

image.png

2. 下載好軟體安裝後開啟

建議直接在uniapp外掛頁面一鍵匯入，正常情況下uniapp外掛都是最新的，大家可以看git平臺正式版本提交的記錄日期在uniapp外掛頁面更新日期之前、就表示uniapp外掛也是最新版本。如果不是最新的可自行到以上git地址平臺下載包，解壓後直接將原始碼目錄拖入 HBuilderX 工具即可

一鍵匯入方式、uniapp外掛地址：https://ext.dcloud.net.cn/plugin?id=6380

image.png

3. 左側選中 App.vue 檔案

將該原始碼匯入HBuilderX開發工具、頂部工具欄 執行->執行到小程式模擬器->(根據支援平臺自行選擇、如 微信開發者工具)

App.vue中修改 request_url 和 static_url 地址為自己的商城地址即可使用

主題預設為黃色(yellow)，如更改主題 App.vue檔案中 default_theme + 底部css引入，pages.json檔案中 tabBar選中圖示+selectedColor選中顏色

manifest.json 檔案中修改對應終端配置，比如小程式appid（微信小程式直播、好物推薦配置都在這裡面自行去掉註釋、一定要先申請許可權、不然小程式空白）

釋出、HBuilderX開發工具、頂部工具欄 發行->(根據支援平臺自行選擇、如 微信開發者工具)

image.png

微信小程式：需要再下載微信小程式開發者工具，開啟，在頂部設定-安全設定（開啟安全）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章