ios h5微信支付重新跳转回app

原创

mob649e81693c66 2024-11-10 06:08:39 ©著作权

文章标签 微信支付 H5 App 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e81693c66的原创作品，请联系作者获取转载授权，否则将追究法律责任

在iOS H5中实现微信支付后重新跳转回App

引言

随着移动支付的普及，微信支付成为了众多应用的支付方式之一。在H5页面中实现微信支付后需要让用户顺利返回到你的iOS应用中。本文将详细介绍这一流程，并提供相应的代码和说明，帮助你理解并实现这一功能。

流程概述

实现H5支付后返回App的基本流程如下：

步骤	描述
1	在你的应用中发起微信支付请求，生成支付参数
2	将这些参数传入H5页面进行支付
3	微信支付完成后，H5页面需要通过URL Scheme或Universal Links将用户引回App
4	App接收到支付完成的回调，处理支付结果

详细步骤与代码实现

步骤 1: 在你的应用中发起微信支付请求

首先确保你已在微信开放平台注册过，并获取了 appid 和 secret。然后在你的应用中调用微信支付SDK生成支付参数。

import UIKit
import WXApi

func requestWeChatPay() {
    let appid = "your_app_id" // 你的微信公众号appid
    let secret = "your_secret" // 你的API密钥
    let partnerId = "your_partner_id" // 商户ID

    // 创建支付请求对象
    let req = PayReq()
    req.appId = appid
    req.partnerId = partnerId
    req.prepayId = "prepay_id" // 从后端获取的预支付id
    req.nonceStr = "random_string" // 随机字符串
    req.timeStamp = UInt32(Date().timeIntervalSince1970) // 时间戳
    req.sign = "sign" // 从后端生成的签名
    
    // 发送支付请求
    WXApi.send(req)
}

注释：上述代码实现了从iOS应用中发起微信支付请求，通过调用微信API发送PayReq对象。确保在请求中包含了必要的支付参数。

步骤 2: H5页面进行支付

在H5界面中，你可以用JavaScript代码来实现微信支付，并在支付成功后进行跳转。

<script src="
<script>
    wx.config({
        // 这里传入你后端返回的配置
        debug: false,
        appId: 'your_app_id',
        timestamp: 'your_timestamp',
        nonceStr: 'your_nonce_str',
        signature: 'your_signature',
        jsApiList: ['chooseWXPay']
    });

    wx.ready(function () {
        wx.chooseWXPay({
            timestamp: 'your_timestamp',
            nonceStr: 'your_nonce_str',
            package: 'prepay_id=your_prepay_id',
            signType: 'MD5',
            paySign: 'your_pay_sign',
            success: function (res) {
                // 这里处理支付成功的逻辑
                window.location.href = "yourapp://payment?status=success"; // 跳转到App
            },
            fail: function (res) {
                window.location.href = "yourapp://payment?status=fail"; // 跳转到App
            }
        });
    });
</script>

注释：在H5页面中，我们使用wx.chooseWXPay发起支付，支付成功或失败后，通过修改window.location.href来实现跳转回App。

步骤 3: 在App中处理URL Scheme

需要在你的App中处理通过URL Scheme返回的支付结果。首先要确保在Info.plist中配置了URL Scheme。

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string> <!-- 这里是你的URL Scheme -->
        </array>
    </dict>
</array>

然后在AppDelegate中实现以下方法：

func application(_ application: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    // 获取URL中的支付状态
    let urlString = url.absoluteString
    if urlString.contains("payment?status=success") {
        // 处理支付成功逻辑
        print("支付成功")
    } else if urlString.contains("payment?status=fail") {
        // 处理支付失败逻辑
        print("支付失败")
    }
    return true
}

注释：在AppDelegate中的application(_:open:options:)方法中，我们可以抓取返回的URL，判断支付状态，并执行相应的逻辑。

步骤 4: 处理支付结果逻辑

支付结果的逻辑处理可以是展示支付成功或失败的界面或者更新用户的余额等。

func handlePaymentResult(success: Bool) {
    if success {
        // 更新UI，如跳转到成功页面
        print("支付完成，更新界面")
    } else {
        // 提示用户支付失败
        print("支付失败，给用户提示")
    }
}

注释：这是一个简单的支付结果处理函数，根据支付状态执行不同的逻辑处理。

序列图

以下是整个流程的序列图：

sequenceDiagram
    participant App as iOS App
    participant H5 as H5页面
    participant WX as 微信
    App->>H5: 传递支付请求
    H5->>WX: 发起支付请求
    WX-->>H5: 返回支付结果
    H5->>App: 跳转到App (支付结果)
    App->>App: 处理支付结果