# 微信公众号h5基础框架

**Repository Path**: programer_home/mp-vue-base

## Basic Information

- **Project Name**: 微信公众号h5基础框架
- **Description**: 微信浏览器h5快速开发框架，基于vue2、vue-router、vant-ui、axios快速构建，支持微信官方sdk调用并且获取用户信息，支持路由守卫拦截，支持jssha直接前端计算signature无需后端配合返回，帮助前端人员快速开发微信公众号h5代码和页面
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 26
- **Forks**: 2
- **Created**: 2021-11-30
- **Last Updated**: 2025-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, 微信, H5

## README

# 微信官方
- **API**: [微信开发者文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)
- **教程**: [微信登录教程](https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html)

## 注意事项

### 项目配置（本地）

1. **内外网映射工具**:
   - 使用 [natapp.cn](https://natapp.cn/) 进行注册和登录。（建议使用付费版或其他服务以提高速度）
2. **配置隧道**:
   - 左侧选择“我的隧道”，然后单击配置。
   - 本地地址输入当前 Vue 项目的运行地址（不要加端口号）。
   - 本地端口号填写当前项目的运行端口号，点击“修改”。
   - 复制 authtoken。
3. **下载客户端**:
   - 在 [natapp.cn](https://natapp.cn/) 右上角点击客户端下载，下载之后解压缩到文件目录当中去
   - 在软件目录下运行 `cmd`（Shift + 鼠标右键） -> Powershell -> 输入 `./natapp.exe -authtoken=这里写刚刚复制的authtoken`。
4. **获取映射网址**:
   - 复制映射的网址。注意：每次重新执行都会生成随机地址，需要将 APP.vue 和微信公众平台的测试账号中相关地址更新为新的代理地址。
5. **登录微信公众平台**:
   - 进入“设置与开发” -> “开发者工具” -> “公众平台测试账号”。
   - 请扫描测试号二维码进行公众号关注，否则无法调试（重要）。
6. **修改 JS 接口安全域名**:
   - 只需使用映射后的域名（不需要 `http://`）。
7. **网页服务配置**: 
   - 下拉页面找到“网页服务” -> “网页账号” -> 修改，输入域名（不需要 `http://`）。
8. **获取 AppID 和 AppSecret**:
   - 在公众平台测试账号页面内。请勿使用公众号的 AppID 和 AppSecret（大坑）。
9. **修改 redirect_url**:
   - 返回项目目录，打开 APP.vue，修改 redirect_url 字段为映射地址以及 AppID 和 AppSecret。
10. **修改 wx.js**:
   - 在 util/wx.js 中修改注释描述的地方，否则无法正常运行（验证 signature: [微信调试](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)）。
11. **运行项目**:
   - 直接在微信开发者工具顶部 URL 输入 `http://192.168.1.xxx:8080` 即可！

### 项目配置（线上）

1. **设置与开发**:
   - 公众号设置 -> 功能设置 -> JS 接口安全域名（不要 `http://`）。
   - 安全中心 -> IP 白名单（不要 `http://`）。
   - 基本配置 -> 服务器配置（用于发送模板消息，具体请查看相关文档）。
   - 接口权限申请和配置
2. **修改 redirect_url**:
   - 返回项目目录，打开 APP.vue，修改 redirect_url 字段为 IP 白名单的回调地址。
3. **Nginx 配置**:
   - 后台 Nginx 需添加代理配置，具体可参考 config/index 的代理。

## 目录结构

```bash
src/
├── api             # 接口请求
│   └── public      # 微信或全局共用的 API 接口
├── assets          # 静态资源
├── router          # 路由集合
├── store           # Vue 状态管理
│   └── modules     # 按功能划分的模块
├── utils           # 工具集
│   ├── directives.js  # 全局自定义指令封装
│   ├── public.js      # 全局方法属性调用
│   ├── request.js     # 全局接口调用
│   ├── statusCode.js  # 接口异常状态码枚举
│   └── wx.js          # 微信相关配置
```

**注意**: 代理跨域在 `config/index` 中配置。

## 运行方式

```bash
# 安装环境包
npm install

# 运行项目
npm run dev

# 打包
npm run build

# 打包并生成分析图
npm run build --report
```