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.rkb.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这些方法』
