选择 发行 >
也可以选择 发行 > 网站 – H5手机版,生成H5页面,然后上传到Discuz! Q的服务器上,覆盖原public目录下的index.html和static目录。
#不使用HBuilder
如果你对npm工具链比较熟悉,不想使用HBuilder X,也可以自己通过npm进行
#下载小程序代码
请下载小程序的最新代码,并解压缩到一个目录中。
进入解压缩后的目录,修改 .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
建议使用环境如下:
node: 14.x.x
npm: 6.14.x
查看node版本:执行 node -v
查看npm版本:执行 npm-v
npm降级:执行 npm install npm@6.14.10 -g
小程序前端编译:
第一步:安装 Node.js 。
第二步:这里我选择 HBuilder X 做示范,因为比较好操作。
第三步:下载 DiscuzQ3.0 前端源码
下载网址: https://gitee.com/Discuz/discuz-fe
第四步:把文件拖到 软件 HBuilder X 里面。(如图)
执行 npm run build:weapp 的时候,会生成一个文件包为:mini/dist
调试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这些方法』