DiscuzQ構建/釋出小程式與H5前端
說明
Discuz! Q的小程式與H5前端，基於uni-app開發框架，現支援發行為微信小程式和H5。
使用方法
1. 安裝Discuz! Q
在使用Discuz! Q小程式之前，請先安裝好你的Discuz! Q，具體方法請點選這裡，檢視安裝文件。
2. 準備HBuilderX
- 將HBuilderX升級到最新版本，如果還沒有，請安裝HbuilderX標準版
- 安裝uni-app編譯外掛
- 點選這裡，點選『使用HBuilderX匯入外掛』，安裝sass編譯外掛
3. 準備小程式開發工具
啟動微信開發者工具，開啟工具 > 設定 > 安全設定，將服務埠開啟。
4. 建立Discuz! Q專案
如果你使用的是v2.8.1以上的HBuilder X，選擇 檔案 > 新建 > 專案 > uni-app > 選擇 Discuz! Q模板
如果你的HBuilder X中看不到Discuz! Q模板，可點選這裡，然後選擇『使用HBuilderX匯入外掛』
WARNING
專案的路徑中，不能包含中文和標點
5. 修改配置，指向自己的伺服器
修改common/const.js檔案中的以下兩行：
export const DISCUZ_TITLE = "設定為自己小程式的標題";
let host = "設定為自己Discuz! Q的訪問地址，比如https://www.dxqq.net/";
6. 發行
選擇 發行 > 小程式 - 微信，輸入自己的小程式ID，即可生成微信小程式，並自動在微信開發工具中開啟。在微信開發工具中選擇上傳即可。
如果你是開發者，修改了Discuz! Q的前端程式碼，想對伺服器上的H5頁面進行更新，也可以選擇 發行 > 網站 - H5手機版，生成H5頁面，然後上傳到Discuz! Q的伺服器上，覆蓋原public目錄下的index.html和static目錄。Discuz! Q預設的升級和安裝程式中已經包含了最新的H5頁面，普通使用者無需進行這一步操作。
不使用HBuilder構建
如果你對npm工具/H5前端鏈比較熟悉，不想使用HBuilder X，也可以自己通過npm進行構建。
下載小程式/H5前端程式碼
請下載最新前端程式碼，並解壓縮到一個目錄中。
構建小程式
進入解壓縮後的目錄，修改.env.production檔案，將其中的伺服器指向自己的Discuz! Q地址。
修改src下的manifest.json檔案，將其中的小程式ID換成自己的小程式ID
然後執行：
npm config set registry http://mirrors.cloud.tencent.com/npm/
npm install
npm run build:mp-weixin
上傳小程式
通過微信開發工具，開啟構建完的小程式目錄，即可上傳
構建與釋出H5
如果你是開發者，修改了Discuz! Q的前端程式碼，想對伺服器上的H5頁面進行更新，可以在解壓縮後的目錄中，執行
npm run build:h5
將生成的檔案，上傳到Discuz! Q的伺服器上，覆蓋原public目錄下的index.html和static目錄。
Discuz! Q預設的升級和安裝程式中已經包含了最新的H5頁面，普通使用者無需進行這一步操作。
本地除錯方法
本地除錯小程式或H5，現在只支援npm方式構建。
本地除錯小程式方法
基於上面的文件，下載程式碼並執行過npm install之後，先修改.env.development檔案，將其中的伺服器指向自己的Discuz! Q地址，然後執行以下命令除錯小程式：
npm run dev:mp-weixin
之後使用微信開發工具，開啟構建完的開發版小程式，即可進行原始碼級除錯。
本地除錯H5方法
基於上面的文件，下載程式碼並執行過npm install之後，先修改.env.development檔案，將其中的伺服器指向自己的Discuz! Q地址，然後執行以下命令除錯H5：
npm run dev:h5
除錯H5的時候，由於H5資源來自本地，但API請求直接指向了遠端的Discuz! Q，可能會遇到跨域訪問的問題，請對Web伺服器做相應的配置，允許來自http://localhost:8080的跨域訪問。比如Nginx下，在原來的location /配置中，加入允許跨域的配置 ：
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
location / {
if ($request_method = OPTIONS ) {
add_header Content-Length 0;
add_header Content-Type text/plain;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization';
return 200;
}
try_files $uri $uri/ /index.php?$query_string;
}
瀏覽器會在發現是跨域請求的時候，先向目標伺服器傳送一個OPTIONS請求作為跨域請求的測試(Test Flight)，這裡的配置會返回給瀏覽器：『允許來自http://localhost:8080的跨域請求，允許使用GET, POST, PATCH, DELETE, PUT, OPTIONS這些方法』