管理员
- 贡献
- 97327
- 金币
- 8999
 
|
马上注册,结交更多好友
您需要 登录 才可以下载或查看,没有账号?立即注册
×
前端转H5说明
调试H5
打开HBuilderX工具,点击菜单栏-运行-运行到浏览器,选择 任意浏览器进行调试。
打包H5
1.打开manifest.json,点击左侧h5配置,路由模式选择hash,运行的基础路径输入/h5/
2.点击菜单栏-发行-网站-pc
3.填写网站域名信息
4.打包成功后,点击控制台打开打包路径,路径在此目录下/unpackage/dist/build/h5
这样就打包成功了
部署H5
1.打开打包后路径,将整个h5文件打包,并上传至网站根目录/public下解压。
2.访问H5:https://你的域名/
注意:新版HBuilderX打包后会有个web目录,只需要将web目录上传即可。
部署问题
域名与接口不一致,导致无法跨域请求接口数据
后端需要设置跨域设置,打开后端/application/config.php文件,拉到最底下找到cors_request_domain项,将你的域名加在后面,多个域名用英文逗号隔开。
小程序网页版地址exam-1.9.1-extended\uniapp\unpackage\dist\build\web
微信小程序地址exam-1.9.1-extended\uniapp\unpackage\dist\build\mp-weixin
后端配置
部署说明
后端部署:必须加上伪静态:隐藏 index.php 入口,否则前端无法访问后端图片;
配置 nginx 伪静态隐藏入口 index.php:
- location / {
- if (!-e $request_filename){
- rewrite ^(.*)$ /index.php?s=$1 last; break;
- }
- }
复制代码 配置 apache 伪静态隐藏入口 index.php:
- httpd.conf 配置文件中加载了 mod_rewrite.so 模块
- AllowOverride None 将 None 改为 All
- 把下面的内容保存为 .htaccess 文件放到应用入口文件的同级目录下
- <IfModule mod_rewrite.c>
- Options +FollowSymlinks -Multiviews
- RewriteEngine On
- RewriteCond %{REQUEST_FILENAME} !-d
- RewriteCond %{REQUEST_FILENAME} !-f
- RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
- </IfModule>
复制代码
微信配置
- 请在网站后台 考试系统 - 参数配置 - 微信配置 填写小程序 AppId、Secret 值;
- 流量主功能请在 微信小程序后台 -> 推广 -> 流量主 -> 广告管理 里创建 插屏广告 ,并将创建后的广告位 ID 复制到 后台 -> 参数配置 -> 流量主配置 -> 首页插屏广告 中;
试题导入
FastAdmin 框架默认未开放 excel 格式的上传格式,请按以下步骤修改,否则会导致:上传文件格式受限制 (code:0) 的问题
- 修改整站上传文件限制,打开后端文件 application/extra/upload.php 文件,找到 mimetype 字段并在值后面追加 xls,xlsx 类型(如已存在则忽略此步操作),完整配置:
- 'mimetype' => 'jpg,png,bmp,jpeg,gif,webp,zip,rar,wav,mp4,mp3,webm,csv,xls,xlsx',
复制代码- 先在后台 分类管理 创建好 题库 分类;
- 打开后台 试题管理 ,点击 导入 按钮;
- 下载 导入模板文件;
- 填写好模板文件后再导入(请严格按照模板文件中的可提示选项进行填写);
注意:材料题不支持直接导入,请将题目设置为其他题型,导入后再修改
一、小程序后台配置
小程序后台配置
点击打开微信小程序后台,并扫码登录。
域名配置
- 点击左侧菜单 开发 - 开发管理 - 开发设置,找到服务器域名栏,点击开启或修改按钮。
- 设置 request合法域名(即请求域名)、uploadFile合法域名(同请求域名)、downloadFile合法域名
二、前端运行及配置
下载 HBuilderX 开发工具
将代码目录拖入 HBuilderX
前端源码位于目录 addons/exam/uniapp/ 下,将 addons/exam/uniapp 整个拖入 HBuilderX 中。
修改配置
前端配置说明
- 修改接口域名
- 打开前端源码应用信息文件 /static/appInfo.js
- 修改文件中的 api_host 即可
- 修改小程序 app id
- 修改 manifest.json 文件中的 mp-weixin 的 appid,即微信小程序 appid
- 设置 uni-app 应用标识(AppID)
- 用 HBuilderX 开发工具打开 manifest.json 文件,在基础配置页填写 AppID 或点击重新获取生成即可。
- 备注:每次插件更新时会置空此 AppID,需要用户自行生成或手动填写 AppID(建议生成后保存,下次用同样的 AppID 发布)。
- uniapp/pages/index/index.vue 修改里面的标题
调试运行
两种调试方式:
- 按快捷键 ctrl+r,选择微信开发者工具
- 或者点击菜单栏「运行 - 运行到小程序模拟器 - 微信开发者工具」
- 在弹出的微信开发工具中调试应用。
三、小程序发布
- 调试运行无问题之后,在 HBuilderX 开发工具中,点击菜单栏 发行 - 小程序 - 微信
- 在弹出的微信开发工具,点击上传,设置版本号并上传
- 上传成功后,登录微信小程序后台,在版本管理提交审核即可。
(附带操作截图示意 HBuilderX 发行、上传流程)
注意这里不要勾选发行为混合分包选项
四、常见问题:小程序微信登录点击无效
排查清单
- ✅ 后台系统配置 - 微信配置:检查appid和secret填写是否正确,不能带有空格
- ✅ 微信隐私协议授权:是否按文档完成配置,授权后必须审核通过才会生效
- ✅ 小程序后台 IP 白名单:检查微信公众平台开发配置,是否限制了服务器 IP 白名单
- ✅ 服务器域名校验:检查小程序后台开发配置,当前服务端请求域名是否已添加到合法域名列表
💡 调试建议:优先使用微信小程序开发工具运行项目,根据控制台报错信息,可快速定位问题根源。
|
|