构建/发布Discuz! Q小程序与H5前端

说明

Discuz! Q的小程序与H5前端,基于uni-app开发框架,现支持发行为微信小程序和H5。

使用方法

1. 安装Discuz! Q

在使用Discuz! Q小程序之前,请先安装好你的Discuz! Q,具体方法请点击这里构建/发布Discuz! Q小程序与H5前端 - 图1,查看安装文档。

2. 准备HBuilderX

  • 将HBuilderX升级到最新版本,如果还没有,请安装HbuilderX标准版构建/发布Discuz! Q小程序与H5前端 - 图2
  • 安装uni-app编译插件
  • 点击这里构建/发布Discuz! Q小程序与H5前端 - 图3,点击『使用HBuilderX导入插件』,安装sass编译插件

3. 准备小程序开发工具

启动微信开发者工具,打开工具 > 设置 > 安全设置,将服务端口开启。

4. 建立Discuz! Q项目

如果你使用的是v2.8.1以上的HBuilder X,选择 文件 > 新建 > 项目 > uni-app > 选择 Discuz! Q模板

如果你的HBuilder X中看不到Discuz! Q模板,可点击这里构建/发布Discuz! Q小程序与H5前端 - 图4,然后选择『使用HBuilderX导入插件』

WARNING

项目的路径中,不能包含中文和标点

5. 修改配置,指向自己的服务器

修改 common/const.js 文件中的以下两行:

  1. export const DISCUZ_TITLE = "设置为自己小程序的标题";
  2. let host = "设置为自己Discuz! Q的访问地址,比如https://discuz.chat/";

6. 发行

选择 发行 > 小程序 - 微信,输入自己的小程序ID,即可生成微信小程序,并自动在微信开发工具中打开。在微信开发工具中选择上传即可。

如果你是开发者,修改了Discuz! Q的前端代码,想对服务器上的H5页面进行更新,也可以选择 发行 > 网站 - H5手机版,生成H5页面,然后上传到Discuz! Q的服务器上,覆盖原public目录下的index.html和static目录。Discuz! Q默认的升级和安装程序中已经包含了最新的H5页面,普通用户无需进行这一步操作。

不使用HBuilder构建

如果你对npm工具/H5前端链比较熟悉,不想使用HBuilder X,也可以自己通过npm进行构建。

下载小程序/H5前端代码

请下载最新前端代码构建/发布Discuz! Q小程序与H5前端 - 图5,并解压缩到一个目录中。

构建小程序

进入解压缩后的目录,修改 .env.production 文件,将其中的服务器指向自己的Discuz! Q地址。

修改src下的manifest.json文件,将其中的小程序ID换成自己的小程序ID

然后执行:

  1. npm config set registry http://mirrors.cloud.tencent.com/npm/
  2. npm install
  3. npm run build:mp-weixin

上传小程序

通过微信开发工具,打开构建完的小程序目录,即可上传

构建与发布H5

如果你是开发者,修改了Discuz! Q的前端代码,想对服务器上的H5页面进行更新,可以在解压缩后的目录中,执行

  1. npm run build:h5

将生成的文件,上传到Discuz! Q的服务器上,覆盖原public目录下的index.html和static目录。

Discuz! Q默认的升级和安装程序中已经包含了最新的H5页面,普通用户无需进行这一步操作。

本地调试方法

本地调试小程序或H5,现在只支持npm方式构建。

本地调试小程序方法

基于上面的文档,下载代码并执行过npm install之后,先修改 .env.development 文件,将其中的服务器指向自己的Discuz! Q地址,然后运行以下命令调试小程序:

  1. npm run dev:mp-weixin

之后使用微信开发工具,打开构建完的开发版小程序,即可进行源码级调试。

本地调试H5方法

基于上面的文档,下载代码并执行过npm install之后,先修改 .env.development 文件,将其中的服务器指向自己的Discuz! Q地址,然后运行以下命令调试H5:

  1. npm run dev:h5

调试H5的时候,由于H5资源来自本地,但API请求直接指向了远程的Discuz! Q,可能会遇到跨域访问的问题,请对Web服务器做相应的配置,允许来自 http://localhost:8080 的跨域访问。比如Nginx下,在原来的 location / 配置中,加入允许跨域的配置 :

  1. add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
  2. location / {
  3. if ($request_method = OPTIONS ) {
  4. add_header Content-Length 0;
  5. add_header Content-Type text/plain;
  6. add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
  7. add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
  8. add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization';
  9. return 200;
  10. }
  11. try_files $uri $uri/ /index.php?$query_string;
  12. }

浏览器会在发现是跨域请求的时候,先向目标服务器发送一个OPTIONS请求作为跨域请求的测试(Test Flight),这里的配置会返回给浏览器:『允许来自http://localhost:8080的跨域请求,允许使用GET, POST, PATCH, DELETE, PUT, OPTIONS这些方法』