Discuz! Q部署小程序详细教程

前提条件

拥有未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱。
注册小程序所需的账号信息。

操作步骤

步骤一：注册账号信息

进入微信公众平台 (opens new window)，单击击右上角的【立即注册】按钮。

在注册账号类型页，单击选择【小程序】，如下图所示：

在账号信息页，填写修改注册信息。如下图所示：

邮箱：作为登录帐号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱，每个邮箱仅能申请一个小程序。
密码：请填写微信小程序账号密码，字母、数字或者英文符号，最短8位，区分大小写。
确认密码：请再次填写微信小程序账号密码。
验证码:请根据图片信息，填写对应验证码。

勾选【你已阅读并同意《微信公众平台服务协议》及《微信小程序平台服务条款》】，单击【注册】。

步骤二：激活注册邮箱

登录填写的注册邮箱并查收激活邮件，单击邮箱中的激活链接。

步骤三：信息登记

1.单击邮箱中的激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。

选择主体类型：

注册选择类型	组织机构类型
个人	18岁以上有国内身份信息的微信实名用户
企业类型	个人独资企业、企业法定代表人、企业非法定代表人、非公司制企业法定代表人、全名所有制、农民专业合作社、企业分支机构、合伙企业、其他企业个体户，个体工商户、个体经营
媒体类型	事业单位媒体、其他媒体、电视广播、报刊、杂志、网络媒体等
其他组织	免费类型（基金会，政府机构驻华代表处）
社会团体（社会团体法定代表人、社会团体分支、代表机构、其他社会团体、群众团体）
民办非企业，学校，医院等
其他组织（宗教活动场所、农村村民委员会、城市居民委员会、自定义区、其他未列明的组织机构）
政府单位	事业单位（事业单位法定代表人、事业单位分支、派出机构、部队医院、国家权力机关法定代表人、其他事业单位）
政府机关(国家行政机关法定代表人、民主党派、政协组织、人民解放军、武警部队、其他机关)

选择验证方式：

企业类型帐号可选择两种主体验证方式。

方式一：支付验证需要用公司的对公账户向腾讯公司打款来验证主体身份，打款信息在提交主体信息后可以查看到。请根据页面提示，向指定的收款帐号汇入指定金额。

WARNING

请在10天内完成汇款，否则将注册失败。

方式二：微信认证通过微信认证验证主体身份，需支付 300元 认证费。认证通过前，小程序部分功能暂无法使用。如需了解主体验证方式请点击这里 (opens new window)。

步骤四：管理员信息登记

TIP

个人主体账号无需进行以下操作。

填写管理员信息。

单击【确认】主体信息不可变更。即可注册成功。

HBuilder 构建（推荐）

操作场景

Discuz! Q 的小程序与 H5 前端，基于 uni-app 开发框架，现支持发行为微信小程序和 H5。本文档将指导您如何使用 HBuilder 构建 Discuz! Q 小程序。

前提条件

已安装 PC 端 Discuz! Q。
已安装微信小程序开发工具。

操作步骤

步骤一：环境准备

安装 HbuilderX 标准版

在 HbuilderX 下载页面 (opens new window)，单击【DOWNLOAD】。如下图所示：

在弹出的下载窗口中，单击下载【标准版】，如下图所示：

TIP

请根据您的机型下载 HbuilderX 标准版，此处以 Windows 系统为例。

将下载的安装包，解压至电脑任意文件夹，并双击【HBuilderX.exe】运行程序。

安装 scss/sass 编译插件。

在 scss/sass编译下载页面 (opens new window)登录 HBuilderX 账号，并单击【使用 HBuilderX 导入插件】。如下图所示：

在弹出的窗口中，单击【打开 HBuilderX】。即可完成安装sass编译插件操作。

步骤二：构建 Discuz! Q 小程序

开启服务端口

启动微信开发者工具，并使用微信登录微信开发者工具。
单击设置图标，并单击选择 工具 > 设置 > 安全 设置，将服务端口开启。如下图所示：

构建 Discuz! Q 项目

打开 HBuilder X，选择【文件】 >【新建】 >【项目】 > 【uni-app】 > 选择 Discuz! Q 模板。如下图所示：

TIP

如果您的HBuilder X 中看不到 Discuz! Q 模板，您可以进入DCLOUD 插件市场 (opens new window)，单击【使用HBuilderX导入插件】。

单击【创建】，并等待 HBuilder X 下载 Discuz! Q 模板。

WARNING

项目的路径中，不能包含中文和标点符号。

修改如下 common/const.js 文件中的以下两行配置信息，指向自己的服务器。

export const DISCUZ_TITLE = "设置为自己小程序的标题";
let host = "设置为自己Discuz! Q的访问地址， 例如 https://discuz.chat/";
</code><em></em>

export const DISCUZ_TITLE = "设置为自己小程序的标题";

let host = "设置为自己Discuz! Q的访问地址，例如 https://discuz.chat/";

</code>

步骤三：发行 Discuz! Q 小程序

在 HBuilder X 中，单击选择【发行】 >【小程序-微信（仅适用于uni-app）】。
在弹出的窗口中，输入您的微信小程序 AppID，即可生成微信小程序，并自动在微信开发工具中打开。如下图所示：

在打开的微信开发者工具中，单击菜单栏【上传】。如下图所示：

在弹出的窗口中，输入版本信息及项目，单击【上传】。即可完成发行 Discuz! Q 小程序操作。

TIP

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

npm 构建

操作场景

Discuz! Q 的小程序与H5前端，基于uni-app开发框架，现支持发行为微信小程序和H5。本文档将指导您如何使用 npm 进行构建 Discuz! Q 小程序。

TIP

建议使用 HBuilder 构建 Discuz! Q 小程序 (opens new window)，更简单、方便、快捷。使用该构建方式需已安装 npm 工具。

前提条件

已安装 PC 端 Discuz! Q。
已安装 npm 工具。
已安装微信开发者工具。
已下载最新前端代码 (opens new window)，并解压缩到任意一个目录中。

操作步骤

构建 Discuz! Q 小程序

进入已经解压缩的 ”最新前端代码 (opens new window)“ 目录，修改目录中 .env.production 文件，将其中的服务器指向自己的 Discuz! Q 网站地址。如下所示：

VUE_APP_TITLE="自定义，可输入您的网站名称或小程序名称"
VUE_APP_REQUEST_HOST=您的网站地址
</code><em></em>

VUE_APP_TITLE="自定义，可输入您的网站名称或小程序名称"

VUE_APP_REQUEST_HOST=您的网站地址

</code>

修改 src 下的 manifest.json 文件，将其中的小程序 ID 换成自己的 AppID (小程序ID)。如下所示：

{
  "name": "自定义，可输入您的网站名称或小程序名称",
  "appid": "您的 AppID (小程序ID)",
</code><em></em>

{

"name": "自定义，可输入您的网站名称或小程序名称",

"appid": "您的 AppID (小程序ID)",

</code>

在终端中，运行以下命令，构建Discuz! Q 小程序。如下所示：

npm config set registry http://mirrors.cloud.tencent.com/npm/
npm install
npm run build:mp-weixin
</code><em></em>

npm config set registry http://mirrors.cloud.tencent.com/npm/

npm install

npm run build:mp-weixin

</code>

上传 Discuz! Q 小程序

打开微信开发者工具，使用微信扫码登录微信微信开发者工具。
选择【导入项目】，输入项目相关信息并选择构建完成的小程序目录。如下图所示：

单击【导入】。
在微信开发者工具，单击工具栏【上传】按钮，即可完成上传 Discuz! Q 小程序操作。

TIP

如果您是开发者，修改了 Discuz! Q 的前端代码，想对服务器上的 H5 页面进行更新，可以在解压缩后的目录中，执行 npm run build:h5将生成的文件，上传到 Discuz! Q 的服务器上，覆盖原 public 目录下的 index.html 和 static 目录。Discuz! Q 默认的升级和安装程序中已经包含了最新的 H5 页面，普通用户无需进行这一步操作。

发布

操作场景

本文档将指导您使用微信开发者工具上传构建完成的 Discuz! Q 小程序后，如何发布 Discuz! Q 小程序，使可在微信中进行搜索正常使用。

前提条件

已使用微信开发者工具上传构建完成的 Discuz! Q 小程序。

操作步骤

使用小程序的微信号登录微信公众平台 (opens new window)。
在小程序管理后台中，单击侧边菜单栏【版本管理】。即可看见已上传的版本。如下图所示：

TIP

在版本管理页没有已上传的开发版本，请检查是否正确上传成功。

单击【提交审核】，并完成信息确认。

TIP

提交审核前需填写完成微信小程序基本信息与小程序开发与管理的绑定操作。详情可登录小程序管理后台首页查看小程序发布流程 (opens new window)。
发布 Discuz! Q 小程序后，需等待微信审核，审核成功后，即可正常使用，请耐心等待。

审核通过后，在小程序管理后台【版本管理】，单击【发布】，即可完成发布 Discuz! Q 小程序操作。

配置

概述

本文档将对 Discuz! Q 小程序的基本配置信息进行说明。您可参考以下内容，填写补充小程序相关配置。

服务器域名配置

TIP

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。
Discuz! Q 小程序需配置 request合法域名、uploadFile合法域名、downloadFile 合法域名三个域名。

使用小程序的微信号登录微信公众平台 (opens new window)。
在小程序管理后台中，单击侧边菜单栏【开发管理】。可进行配置服务器域名。如下图所示：

单击【修改】，进入配置服务器信息页并使用小程序管理员微信扫码身份确认。
在配置服务器信息中，输入如下信息：

request合法域名: 请输入您的网站地址。此处以 discuz 官方社区网站地址 https://discuz.chat 为例。
socket合法域名: 不填写。
uploadFile合法域名: 请输入您的网站地址。此处以 discuz 官方社区网站地址 https://discuz.chat 为例。
downloadFile合法域名: 请输入您的网站地址。此处以 discuz 官方社区网站地址 https://discuz.chat 为例。
udp合法域名：不填写。

5.单击【保存并提交】，即可完成服务器域名配置。

调试

概述

本文档将对 Discuz! Q 小程序或 H5 的调试进行说明。您可参考以下内容，对小程序或H5 进行调试。

TIP

本地调试小程序或H5，目前只支持 npm 方式构建。

前提条件

已下载最新前端代码并已执行 npm install 。

TIP

下载代码并执行过npm install之后，先修改 .env.development 文件，将其中的服务器指向自己的Discuz! Q地址。

本地调试小程序

可运行以下命令调试小程序：

npm run dev:mp-weixin
</code><em></em>

1 2	npm run dev:mp-weixin </code><em></em>

本地调试 H5

可运行以下命令调试H5：

npm run dev:h5
</code><em></em>

1 2	npm run dev:h5 </code><em></em>

调试 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;
  }
</code><em></em>

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;

}

</code>

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

Discuz! Q部署小程序详细教程

前提条件

操作步骤

步骤一：注册账号信息

步骤二：激活注册邮箱

步骤三：信息登记

步骤四：管理员信息登记

HBuilder 构建 （推荐）

操作场景

前提条件

操作步骤

步骤一：环境准备

安装 HbuilderX 标准版

安装 scss/sass 编译插件。

步骤二：构建 Discuz! Q 小程序

开启服务端口

构建 Discuz! Q 项目

步骤三：发行 Discuz! Q 小程序

npm 构建

操作场景

前提条件

操作步骤

构建 Discuz! Q 小程序

上传 Discuz! Q 小程序

发布

操作场景

前提条件

操作步骤

配置

概述

服务器域名配置

调试

概述

前提条件

本地调试小程序

本地调试 H5

您可能感兴趣的文章

Discuz! Q部署小程序详细教程

服务器安装SSL证书如何使http跳转到HTTPS地址

有道乐读拥抱AWS利用AmazonWebServices部署云上的少儿图书馆

云计算优势与缺点分析

参与讨论 点击这里取消回复。

微信公众号

HBuilder 构建（推荐）

参与讨论点击这里取消回复。