# flutter_wxpay_demo

**Repository Path**: scenario-samples/flutter_wxpay_demo

## Basic Information

- **Project Name**: flutter_wxpay_demo
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例展示了在Flutter中使用微信开放平台sdk提供的微信app支付、微信小程序支付工能。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-15
- **Last Updated**: 2025-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**注：使用此微信支付(app内支付、小程序支付)插件，代表您已经有接入微信支付相关的知识储备基础，如您暂时不了解相关微信支付知识，您可以参考地址：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/ohos.html**
### 介绍

本示例展示了在Flutter中使用微信开放平台sdk提供的微信app支付、微信小程序支付工能。

## 效果预览


| ![avatar](./image1.png) | ![avatar](./image2.png) | 

### 1、环境配置：

**鸿蒙应用开发手册：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/ohos.html**

**鸿蒙-SDK-调用说明：https://pay.weixin.qq.com/doc/v3/merchant/4012073588#%E9%B8%BF%E8%92%99-SDK-%E8%B0%83%E7%94%A8%E8%AF%B4%E6%98%8E**

**app调起支付参数说明：https://pay.weixin.qq.com/doc/v3/merchant/4012265144#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0**



### 2、代码说明

```
|---lib
|   |---main.dart                                           //Flutter 应用的主入口
|---ohos/entry                                              //harmony程序
|   |---libs                                                //依赖库
|   |---src/main/ets                     
|       |---entryability             
|           |---WxPayFlutterPlugin.ets                      //注册flutter和原生的消息通道
|           |---EntryAbility.ets                            //处理微信回调
|           |---PayFlutterBroadcastReceiver.ets             /接收flutter返回信息
|           |---WXApiWrap.ets                               //包装微信api（请求和回调响应）
|           |---WxPayPlugin.ets                             //微信支付组件
|       |---pages
|           |---Index.ets                                   //主页面
|       |---plugins
|           |---GeneratedPluginRegistrant.ets               //自动注册

```

main.dart页面中主要包含微信支付（payPingWX）和微信小程序支付（payPingWXMin）两种支付方式，点击之后使用MethodChannel实现鸿蒙与flutter通信，进行方法调用和参数传递。参数传递过去以后在WxPayFlutterPlugin.ets中进行调用处理，根据支付方式分别调用WxPayPlugin.ets中的payByWx方法和wxMiniProgram方法。

## 使用说明
### 步骤1 修改参数：
1、main.dart的_payPingWX()方法中的body参数修改为的微信支付参数
2、main.dart的_payPingWXMin()方法中的body参数修改为自己的小程序参数
3、WxPayFlutterPlugin.ets中的 WXApi = wxopensdk.WXAPIFactory.createWXAPI("xxxxx")需要修改为自己的appid
4、WXApiWrap.ets中的 WXApi = wxopensdk.WXAPIFactory.createWXAPI("xxxxx")需要修改为自己的appid

### 步骤2 修改依赖

工程使用的部分组件需要修改为兼容ohos的版本 

修改oh-package.json5中的字段dependencies，添加以下内容

```
"dependencies": {
    "@tencent/wechat_open_sdk": "^1.0.4",
  }
```
或直接安装依赖：

```
ohpm i @tencent/wechat_open_sdk 
```
### 步骤3 打包 [flutter_wxpay_demo工程]
```
cd ohos 
hvigorw clean
cd..
flutter build hap --debug
```

### 步骤4 安装到设备
```
hdc install ohos\entry\build\default\outputs\default\entry-default-signed.hap
```


# 其他包引入
其他组件若需要使用到Flutter提供的三方库，请参考[Flutter三方库支持OHOS总览](https://docs.qq.com/sheet/DVVJDWWt1V09zUFN2?tab=BB08J2)


## 相关权限

1. 本示例应用在调用一键登录组件的场景需要访问网络，已在module.json5文件中添加网络权限"ohos.permission.INTERNET"。

## 依赖

依赖设备具备WIFI能力
# FAQ

### 若Flutter下载相关依赖失败，可能是路径过长导致
1. 配置环境变量 PUB_CACHE=D:/PUB(自定义路径)

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">