# 微信公众号h5基础框架

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

## Basic Information

- **Project Name**: 微信公众号h5基础框架
- **Description**: 基于微信内置浏览器写的h5公众号基础框架
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-12-15
- **Last Updated**: 2021-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 微信官方

  基础：https://qydev.weixin.qq.com/wiki/index.php?title=%E9%A6%96%E9%A1%B5<p>
  API：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html<p>
  教程：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html<p>

## 注意事项

``` bash
# 项目配置
1.https://natapp.cn/  内外网映射工具，注册，登录一下

2.左侧选择我的隧道点击配置

3.authtoken复制一下

4.本地地址输入当前vue项目运行地址不要加端口号

5.本地端口号写当前项目的运行端口号，点击修改

6.下载客户端，然后在软件目录下运行cmd(shift+鼠标右键)->powershell->输入./natapp -authtoken=这里写刚刚复制的authtoken

7.复制映射的网址

8.登录微信工作平台-->设置与开发-->开发者工具-->工作平台测试账号

9.JS接口安全域名修改为映射之后的地址记住只要域名，不要http://

10.下拉页面找到网页服务-->网页账号-->修改也不要http://

11.打开项目结构的util/wx.js注释描述的地方，否则无法正常运行

12.运行项目，先在浏览器打开，看页面教程食用~
```
## 目录结构

``` bash
src/api：顾名思义，放接口请求的地方
  public：关于微信或者全局共用的api接口

src/assets：静态资源

src/router：路由集合

store：vue的状态管理仓库
  modules：此文件夹下根据功能或者具体的业务划分具体的模块或者功能的js文件

src/utils：工具集
  directives：全局的自定义指令封装
  public：全局的方法属性调用，内部使用this.$func.方法名
  request：全局的接口调用，封装和逻辑都在这里
  statusCode：接口的异常状态码枚举值，可根据服务端提供参数进行自行增加！
  wx：微信的相关配置

注意：代理跨域在config/index
```

## 运行方式

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

# 运行项目
npm run dev

# 打包
npm run build

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