# 微信小程序微信支付 前端源码+视频演示 Uniapp版

**Repository Path**: little-turtle-z/wxpay-applet-front

## Basic Information

- **Project Name**: 微信小程序微信支付 前端源码+视频演示 Uniapp版
- **Description**: 微信小程序 支付-支付回调 退款-退款回调 通俗易懂 代码快速上手
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2023-08-06
- **Last Updated**: 2024-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<!-- PROJECT LOGO -->
<p align="center">
  
  <img src="https://foruda.gitee.com/images/1691218367806324789/a0dd81fb_8992400.png" alt="Logo" width="80" height="80">

  <h3 align="center">微信支付 V3 Uniapp版</h3>
</p>

### 演示视频

| 视频方 | 视频地址  |
|---|---|
| B站 | [演示地址](https://www.bilibili.com/video/BV16j411r7HN)  |

  <h3>上手指南</h3>

#### 微信支付参数获取
 ```sh
 appId: 微信开放平台申请APPID
 mch_id: 微信商户号
 mch_serial_no: 商户证书序列号
 api_v3_key: api密钥
 private_key: 商户密钥
    入库格式: -----BEGIN PRIVATE KEY-----
             xxxx
             -----END PRIVATE KEY-----
上述参数 获取 可按此文档  https://pay.weixin.qq.com/wiki/doc/apiv3/open/devpreparation/chapter1_1_1.shtml

 openId: 用户在直连商户appid下的唯一标识 获取方式->微信登录

微信登录源码分享: https://gitee.com/little-turtle-z/wechat-login 
微信登录参考文档: 小程序-> https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
                 uniapp-> https://uniapp.dcloud.net.cn/tutorial/app-oauth-weixin.html
```

#### 代码获取

```sh
git clone https://gitee.com/little-turtle-z/wxpay-applet-front.git
```
#### 源代码获取  需配置点
1. manifest.json 
   - 基础配置-> (uniapp端) appid 
   - app模块配置->Payment(支付)->微信支付 (微信端)appid 
   - 微信小程序配置 (微信端)appid 需配置 
2. api->request baseURL 后端访问接口路径 需配置
3. pages->index openId 需配置

 
### 源码分享地址

| 前后端 | 项目地址  |
|---|---|
| 前端 | [代码地址](https://gitee.com/little-turtle-z/wxpay-applet-front)  |
|  后端 | [代码地址](https://gitee.com/little-turtle-z/wxpay-applet-back)  |


### 支付流程简要
  ![流程简要](https://foruda.gitee.com/images/1691220893690753219/7c6072a2_8992400.jpeg)

### 目录结构

```sh 
|--api 后端访问接口配置
|--components 组件
|  |--loading 请求加载组件
|--pages
|  |--index 支付页面
|--static
|--App.vue
|--manifest.json 
|--index.html
|--main.js
|--pages.json
|--uni.scss 
```