更新记录

1.0.1（2026-09-04） 下载此版本

微信一键登录，发布限制，查看限制等

平台兼容性

uni-app(3.8.3)

uni-app x(3.8.3)

其他

AIGC: Label: "1" ContentProducer: 001191440300708461136T1XGW3 ProduceID: 9913cb466885519dde68d516e257ed8f_e38f55f8a51d11f18232525400e6dd8f ReservedCode1: 1PwhXS7v+rkgTD5W8muJILmPo8uLSVAids3T0QZNhbvmH7XzQhxYES6MM1qVSGmUPemyx+59G/SKFXGRMcV3lkm6bpDDHKXqRqGsQQfyqcPifcvx/9A5ZPodo5ME33AhJgA1anWI//wMuVI2jcpbRYF8yf2PsH2RaMFxdaViJ63NpGSaIFVH0lWwp00= ContentPropagator: 001191440300708461136T1XGW3 PropagateID: 9913cb466885519dde68d516e257ed8f_e38f55f8a51d11f18232525400e6dd8f ReservedCode2: 1PwhXS7v+rkgTD5W8muJILmPo8uLSVAids3T0QZNhbvmH7XzQhxYES6MM1qVSGmUPemyx+59G/SKFXGRMcV3lkm6bpDDHKXqRqGsQQfyqcPifcvx/9A5ZPodo5ME33AhJgA1anWI//wMuVI2jcpbRYF8yf2PsH2RaMFxdaViJ63NpGSaIFVH0lWwp00=

swb_h5 使用/部署说明文档

本文档基于 F:\新建文件夹\data\swb_h5 项目源码真实内容编写，覆盖项目简介、目录结构、环境准备、三端编译发布、核心功能模块、接口配置、部署注意事项与常见问题。

1. 项目简介与技术栈

1.1 项目简介

swb_h5 是 SWB 项目的前端部分，基于 uni-app 跨端框架开发，一套代码可编译为 H5（浏览器网页）、微信小程序、App（Android/iOS） 三端。项目定位为"AI 供需圈"信息发布与社群服务平台，主要提供合作信息发布浏览、模型（社群）管理、消息、个人中心等能力。

• 产品名称：AI供需圈（见 manifest.json 的 name 字段）
• 应用标识：__UNI__C3F80A0
• 版本：1.0.0（versionCode: 100）
• 后端技术：Laravel（接口风格为 /api/...，如 /common/getConfig、/account/login、/account/login_password 等）
• 代码仓库：https://gitee.com/lh1010/swb_app.git （见 package.json）

1.2 技术栈

1.3 三端形态

2. 目录结构说明

swb_h5
├── App.vue                      # 应用入口组件（onLaunch/onShow/onHide/onError + 全局样式）
├── main.js                      # 应用启动文件（注册 Vue、uView 等）
├── manifest.json                # 应用配置：三端平台配置、H5 代理、appid、版本等
├── pages.json                   # 页面路由、tabBar 配置、全局样式
├── index.html                   # H5 端 HTML 模板（含 viewport 适配）
├── uni.scss                     # 全局 scss 变量（含 uview 主题引入）
├── package.json                 # 依赖声明
├── package-lock.json            # 依赖锁文件
├── .editorconfig                # 编辑器编码规范
├── .hbuilderx/                  # HBuilderX 编辑器配置
│   └── launch.json
├── utils/                       # 工具模块
│   ├── config.js                # 全局配置：api_url 接口地址（重要）
│   ├── http.js                  # 网络请求封装（request/upload，携带 user_token）
│   ├── util.js                  # 工具函数：is_wx/is_pc/is_mp 环境判断、时间格式化等
│   ├── util.wxs                 # wxs 工具（小程序端样式内使用）
│   └── uni-i18n-polyfill.js     # i18n 兼容补丁
├── components/                  # 公共组件
│   ├── customtop.vue            # 顶部标题栏组件
│   ├── customtop2.vue           # 顶部标题栏组件（变体，带搜索图标开关）
│   ├── city.vue / city.css      # 城市选择组件
├── custom-tab-bar/              # 自定义 tabBar（H5 用 index.vue；小程序原生用 index.js/json/wxml/wxss）
├── pages/                       # 页面目录
│   ├── index/                   # 首页（合作信息流）、搜索、外链跳转
│   ├── qun/                     # 模型/社群模块（找模型、模型大厅、换群大厅、发布/编辑/置顶）
│   ├── post/                    # 合作信息（列表、详情、发布、编辑、置顶）
│   ├── message/                 # 消息中心
│   ├── account/                 # 个人中心及子功能（登录/注册/会员/金币/钱包/发布/认证等）
│   ├── article/                 # 文章详情（关于我们、协议、须知等）
│   └── danbao/                  # 担保交易（列表、发起、详情）
├── static/                      # 静态资源
│   ├── images/                  # 图片资源（logo、图标、默认头像等）
│   └── iconfont/                # 字体图标
├── uni_modules/                 # uni-app 插件市场模块
│   ├── uni-datetime-picker/     # 日期时间选择器
│   ├── uni-icons/               # 图标组件
│   ├── uni-scss/                # scss 工具样式
│   └── uni-table/               # 表格组件
└── unpackage/                   # 编译产物（dist/build 下分 web、mp-weixin、app-plus 等）

2.1 主要页面清单（来自 pages.json）

3. 环境准备与依赖安装

3.1 环境要求

3.2 方式一：HBuilderX（推荐，本项目无 CLI 编译脚本）

本项目 package.json 中仅含 test 脚本，没有 dev / build 等 CLI 编译命令，因此最推荐使用 HBuilderX 可视化开发：

1. 安装 HBuilderX
2. 菜单 文件 → 打开目录，选择 F:\新建文件夹\data\swb_h5
3. 首次运行前需安装项目依赖（下方 3.3 节）
4. 选择运行目标：运行 → 运行到浏览器（H5）/ 运行 → 运行到小程序模拟器 → 微信开发者工具 / 运行 → 运行到手机或模拟器（App）

3.3 方式二：CLI 方式（可选）

若希望使用命令行编译，需基于 uni-app 官方 CLI 模板处理。当前目录不是标准 CLI 脚手架（无 vue.config.js / vite.config.js），直接 npm run 无效。如确需 CLI，可参考 uni-app 官方文档初始化 CLI 项目后，将 pages/、utils/、components/ 等业务目录迁移过去。

3.4 安装项目依赖

在项目根目录执行（HBuilderX 也会在运行/发行时自动提示安装）：

npm install

项目依赖清单（来自 package.json）：

• 运行依赖：uview-ui（^2.0.31）、vconsole（^3.14.6）
• 开发依赖：sass（^1.53.0）、sass-loader（^10.3.1）

注意：vconsole 默认在 main.js 中被注释，未启用；如需要移动端调试面板，可取消注释。

4. 三端编译运行与打包发布流程

4.1 H5 端

运行调试

1. HBuilderX 中打开项目
2. 菜单 运行 → 运行到浏览器 → Chrome（或其它浏览器）
3. 本地开发代理：manifest.json → h5.devServer.proxy 已配置 /api 代理到 https://152.136.46.211/api（默认目标为测试服务器，pathRewrite 去掉 /api 前缀）

打包发布

1. 菜单 发行 → 网站-H5手机版
2. 构建产物输出到 unpackage/dist/build/web/
3. 将 web 目录整体上传至 Web 服务器（Nginx/Apache 等）部署
4. 由于 manifest.json 中 h5.router.base: "./"，支持部署到站点任意子路径；mode: "history" 为 history 路由，服务器需配置 history 回退（所有路径回退到 index.html），否则刷新页面 404，或改为 hash 模式

4.2 微信小程序端

运行调试

1. 在 manifest.json → mp-weixin → appid 中填入真实小程序 AppID（当前为 null）
2. 安装并打开微信开发者工具，且开启其「服务端口」
3. HBuilderX 菜单 运行 → 运行到小程序模拟器 → 微信开发者工具
4. 编译产物输出到 unpackage/dist/dev/mp-weixin/

打包发布

1. HBuilderX 菜单 发行 → 小程序-微信
2. 产物输出到 unpackage/dist/build/mp-weixin/
3. 用微信开发者工具打开该目录，点击「上传」，在微信公众平台提交审核、发布

配置说明：mp-weixin 段 urlCheck: false（跳过合法域名校验，便于调试）；上线前若开启合法域名校验，需在微信公众平台配置 request 合法域名（接口域名 https://ai.xxyxx.cn）。

4.3 App 端（Android/iOS）

运行调试

1. HBuilderX 菜单 运行 → 运行到手机或模拟器（需真机连接或启动模拟器）
2. 项目已配置 Android 权限（相机、定位、网络、存储等），app-plus.distribute.android.permissions 可见

打包发布

1. HBuilderX 菜单 发行 → 原生App-云打包
2. 选择打包平台（Android 使用自有证书或公共测试证书；iOS 需 Apple 开发者证书+描述文件）
3. 云打包完成后下载安装包（Android .apk/.aab，iOS .ipa）上架各应用市场

5. 核心功能模块说明

5.1 登录模块（重点）

项目共有三处登录入口，全部复用 utils/util.js 中的 util.is_wx() 做微信环境判断：

• pages/account/login.vue —— 手机号+验证码登录页
• pages/account/login_password.vue —— 手机号+密码登录页（账号密码登录）
• pages/account/register.vue —— 注册页
• pages/account/index.vue —— 个人中心，未登录时点击头像弹出「微信一键登录」弹窗

5.1.1 微信环境判断方式（utils/util.js）

is_wx() 函数是登录模块的核心判断逻辑：

function is_wx() {
  // #ifdef MP-WEIXIN
  return true; // 微信小程序环境直接返回 true
  // #endif
  // #ifdef H5
  if (typeof navigator === 'undefined') {
    return true;
  }
  let ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;   // 微信内置浏览器（公众号 H5）
  } else {
    return false;  // 普通浏览器
  }
  // #endif
  return false;
}

判断结论：

• 微信小程序端：MP-WEIXIN 条件编译直接返回 true（必然属于微信环境）
• H5 端：通过 navigator.userAgent 匹配 /MicroMessenger/i 判断是否微信内置浏览器
• 普通浏览器：userAgent 不含 MicroMessenger，返回 false（非微信环境）
• App 端：非 MP 也非 H5，返回 false（视为非微信环境）

5.1.2 账号密码登录的环境显隐逻辑（login_password.vue）

账号密码登录页实现了「非微信环境显示账号密码登录、微信环境不显示」的逻辑：

模板层（账号密码表单用 v-if="showPwdLogin" 包裹）：

<u--form ref="form">
  <!-- 账号密码登录：仅非微信环境（浏览器）显示，微信环境（MicroMessenger）不显示 -->
  <view v-if="showPwdLogin">
    <u--input placeholder="手机号" class="item" v-model="form.phone"></u--input>
    <u--input placeholder="密码" class="item" v-model="form.password" type="password"></u--input>
    <button class="luckbtn luckbtn-default" @click="formSubmit();">立即登录</button>
  </view>

  <!-- #ifdef MP-WEIXIN -->
  <button ... open-type="getPhoneNumber" @getphonenumber="onWechatLogin">微信一键登录</button>
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <button ... @click="onWxmpLogin">微信一键登录</button>
  <!-- #endif -->
</u--form>

逻辑层（data 初始化 + onLoad 环境赋值）：

data() {
  return {
    wxLogining: false,
    wxmpLogining: false,
    showPwdLogin: true,          // 账号密码登录显隐开关
  }
},
onLoad(options) {
  // 非微信环境（浏览器）显示账号密码登录；微信环境（MicroMessenger）不显示
  this.showPwdLogin = !util.is_wx();
  ...
}

最终效果矩阵：

相关登录接口（utils/http.js 中的 request.post）：

登录成功后统一执行：uni.setStorageSync('user_token', ...) 存储登录态 → 提示成功 → uni.switchTab 跳转个人中心。

备注：个人中心 account/index.vue 的微信登录弹窗同样使用双端条件编译（H5 走 onWxmpLogin，小程序走 open-type="getPhoneNumber" 的 onWechatLogin），并支持 wxmp_openid / user_token 参数授权回跳自动完成登录。

5.2 其它主要页面模块

5.3 网络请求与登录态

• 请求封装在 utils/http.js：所有请求自动携带 user_token（从 uni.getStorageSync('user_token') 读取）
• 自动附带 request_client 参数：H5 端为 H5，微信小程序端为 MP，用于后端区分来源
• 响应处理：code == 401 提示"登录已失效，请重新登录"；code == 500 提示"服务异常"
• 请求超时 30s；upload() 封装文件上传（/upload 接口）

6. 接口/后端配置说明

6.1 接口地址配置位置（核心）

生产/统一接口地址在 utils/config.js：

export default {
  name: "领浩通",
  api_url: "https://ai.xxyxx.cn/api",   // 全部请求以此为前缀
};

• http.js 中所有 request.post(url, ...) 均拼接 config.api_url + url
• 修改后端地址时，修改 utils/config.js 的 api_url 即可，全项目生效

6.2 H5 本地开发代理（manifest.json）

"h5": {
  "devServer": {
    "proxy": {
      "/api": {
        "target": "https://152.136.46.211/api",
        "changeOrigin": true,
        "pathRewrite": { "^/api": "" }
      }
    }
  }
}

• 仅影响 H5 本地开发（devServer 代理），正式构建的接口地址仍取 config.js 的 api_url
• 注释中保留过 http://swb.localhost.com/api，当前激活目标是 https://152.136.46.211/api，按需调整

6.3 是否需要修改

7. 部署上线注意事项

1. 源码改动后必须重新构建才生效：本项目业务代码位于 pages/、components/、utils/ 等源码目录；unpackage/dist/ 下的 web、mp-weixin、app-plus 等均为编译产物，直接改 dist 无效，改动源码后需在 HBuilderX 重新运行/发行生成新产物再部署。
2. H5 history 路由回退：h5.router.mode: "history"，Web 服务器必须配置 history 回退（如 Nginx try_files $uri $uri/ /index.html;），否则直接刷新子路径页面会 404；若不想配回退，可改为 hash 模式。
3. H5 部署路径：h5.router.base: "./"，可将 unpackage/dist/build/web 部署到任意子路径，但要确保服务器 rewrite 与之匹配。
4. 微信小程序 AppID：manifest.json → mp-weixin.appid 当前为 null，发行前必须填入真实 AppID。
5. 微信小程序合法域名：mp-weixin.setting.urlCheck 当前为 false；正式上线若需开启，请在微信公众平台将接口域名（https://ai.xxyxx.cn）加入 request 合法域名。
6. 接口地址核对：上线前务必确认 utils/config.js 的 api_url 指向正式环境，避免误连测试服务器。
7. App 证书：云打包 Android 建议使用自有签名证书（公共证书不可上架正式应用商店）；iOS 需 Apple 开发者证书与描述文件。
8. 自定义 tabBar：H5 使用 custom-tab-bar/index.vue 组件（页面内 #ifdef H5 引入）；微信小程序使用原生自定义 tabBar（custom-tab-bar 目录，含 index.js/json/wxml/wxss），且 pages.json 中 tabBar.custom: true。两套实现需保持 tab 一致。
9. 微信登录授权：H5 公众号授权依赖后端 app_url（/common/getConfig 返回），需确保后端配置的 app_url 可被微信网页授权回调访问；授权域名需在公众号后台配置。
10. 敏感信息：manifest.json 与 config.js 中的接口地址、测试服务器 IP 等为明文，交付生产时注意脱敏与安全加固。

8. 常见问题

8.1 微信环境里还能看到账号密码登录表单？

• 检查 login_password.vue 的 showPwdLogin 是否在 onLoad 中正确赋值：this.showPwdLogin = !util.is_wx()
• 确认微信内置浏览器 userAgent 包含 MicroMessenger（可用 util.is_wx() 打印验证）
• 若在微信开发者工具中调试 H5，请确认模拟 UA 是否为微信环境

8.2 普通浏览器里看不到账号密码登录？

• 大概率是改了源码但未重新构建，仍访问旧产物（unpackage/dist/build/web），需在 HBuilderX 重新「发行」后刷新部署。

8.3 登录报"登录已失效，请重新登录"（code 401）

• 本地 user_token 过期或未登录，重新登录获取新 token 即可；http.js 会自动读取 uni.getStorageSync('user_token')。

8.4 登录报"服务异常"（code 500）

• 后端接口异常，联系后端排查；前端仅做提示透传（见 http.js）。

8.5 H5 刷新页面 404？

• history 路由导致，需在 Nginx 配置 try_files $uri $uri/ /index.html; 回退，或改 hash 路由。

8.6 微信小程序端报"url not in domain list"

• mp-weixin.setting.urlCheck 已设 false 可绕过（调试用）；正式发布需在微信公众平台配置 request 合法域名。

8.7 微信一键登录点了没反应 / 授权失败

• 小程序端需在开发者工具开启「不校验合法域名」并确保 open-type="getPhoneNumber" 可用；H5 端需先在公众号内完成网页授权拿到 wxmp_openid（未授权时会跳转 /wxmp_login）。

8.8 App 端没有微信一键登录按钮？

• 微信一键登录按钮使用 #ifdef H5 / #ifdef MP-WEIXIN 条件编译，App 端默认不编译该按钮，属预期行为；如需 App 内微信登录，需另行接入微信开放平台 SDK 并在 manifest.json 配置。

8.9 修改了 config.js 接口地址不生效？

• 确认改的是 utils/config.js（请求前缀来源），并重新构建对应端产物。

8.10 npm install 报 sass 相关错误？

• 项目依赖 sass 与 sass-loader，请确保 Node 版本兼容（Node 12–16 稳妥）；版本冲突时按 uni-app 官方建议锁定 sass-loader@10。

文档信息：基于 F:\新建文件夹\data\swb_h5 源码编写，覆盖 manifest.json、pages.json、package.json、App.vue、main.js、utils（config/http/util）、components、custom-tab-bar 及全部页面路由与核心登录逻辑。 （内容由AI生成，仅供参考）