如何使用uniapp实现微信支付功能

1. 简介

微信支付是一种非常方便的支付方式，可以实现线上和线下的支付。而在移动应用中，我们可以通过微信公众平台提供的开发接口去实现微信支付功能。而本文将介绍使用uniapp实现微信支付功能的步骤。

2. 接入微信支付

2.1 配置微信支付参数

接入微信支付需要在微信商户平台注册开发者账号，并在开发者中心中生成应用ID和密钥。

打开微信公众平台官方网站：https://open.weixin.qq.com/，使用微信账号进行注册或登录，然后点击左侧菜单栏中的“微信支付”进行开通。请注意：在开通微信支付之前，需要先申请企业实名认证。

在开通微信支付之后，需要配置微信支付参数。打开微信商户平台官方网站：https://pay.weixin.qq.com/，使用微信账号进行注册或登录.

在商户平台中点击“产品中心”-“开发配置”，然后在“支付配置”中填写相关信息。

/*
 * 微信支付参数配置
 * 注意：这里的参数均为示例参数，请使用在微信商户平台中生成的真实参数
 */
const wxpayConfig = {
    appid: 'wxxxxxxxxxxxxxxxxx', // 小程序ID
    mch_id: 'xxxxxxxxx', // 商户号
    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // API密钥
    notify_url: 'https://www.example.com/wxpay/notify' // 支付结果通知地址
}

2.2 安装依赖

要使用uniapp实现微信支付功能，需要使用unified-payment插件。

在项目根目录中，打开终端并输入以下命令进行安装：

npm install unified-payment --save

在安装完成后，需要在main.js文件中引入插件。

import Vue from 'vue'
import App from './App'
import unifiedPayment from 'unified-payment'
Vue.config.productionTip = false
Vue.use(unifiedPayment)
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

3. 实现微信支付

3.1 创建支付订单

在客户端中发送支付请求后，需要创建相应的支付订单。

在uniapp应用中，可使用uni.request方法创建订单并返回prepay_id。代码如下：

/**
 * 创建微信支付订单
 * @param {Object} data 订单信息
 * @param {Function} success 支付成功回调
 * @param {Function} fail 支付失败回调
 */
function createWeChatPayOrder(data, success, fail) {
    uni.request({
        url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
        method: 'POST',
        data: {
            appid: wxpayConfig.appid,
            mch_id: wxpayConfig.mch_id,
            nonce_str: nonceStr(),
            body: data.body, // 商品描述
            out_trade_no: data.out_trade_no, // 商户订单号
            total_fee: data.total_fee, // 总金额，单位为分
            spbill_create_ip: data.spbill_create_ip, // 终端IP
            notify_url: wxpayConfig.notify_url, // 通知地址
            trade_type: 'JSAPI',
            openid: getApp().globalData.openid
        },
        success(res) {
            const { return_code, result_code, prepay_id } = parseResult(res.data)
            if (result_code === 'SUCCESS' && return_code === 'SUCCESS') {
                success(prepay_id)
            } else {
                fail(res.data)
            }
        },
        fail(res) {
            fail(res)
        }
    })
}

在上面的代码中，prepay_id是后面获取支付信息需要用到的参数。

3.2 获取支付信息

在创建支付订单之后，需要获取支付信息，生成支付签名，并将接口返回的支付信息传递给微信客户端进行支付。

调用uni.requestPayment方法可以打开微信客户端并传递支付信息。

/**
 * 获取微信支付信息
 * @param {String} prepay_id
 * @param {Function} success
 * @param {Function} fail
 */
function getWeChatPayInfo(prepay_id, success, fail) {
    uni.request({
        url: 'https://api.mch.weixin.qq.com/pay/orderquery',
        method: 'POST',
        data: {
            appid: wxpayConfig.appid,
            mch_id: wxpayConfig.mch_id,
            nonce_str: nonceStr(),
            out_trade_no: data.out_trade_no
        },
        success(res) {
            const { return_code, result_code } = parseResult(res.data)
            if (result_code === 'SUCCESS' && return_code === 'SUCCESS') {
                const { nonce_str, prepay_id, sign } = parseResult(res.data)
                const signData = {
                    appId: wxpayConfig.appid,
                    timeStamp: (Date.now() / 1000).toFixed(0),
                    nonceStr: nonce_str,
                    signType: 'MD5',
                    package: `prepay_id=${prepay_id}`
                }
                signData.paySign = createSign(signData)
                success(signData)
            } else {
                fail(res.data)
            }
        },
        fail(res) {
            fail(res)
        }
    })
}
/**
 * 创建支付签名
 * @param {*} signData 支付信息
 */
function createSign(signData) {
    let stringA = Object.keys(signData)
        .filter(key => signData[key])
        .sort()
        .map(key => `${key}=${signData[key]}`)
        .join('&')
    stringA += `&key=${wxpayConfig.key}`
    return md5(stringA).toUpperCase()
}
/**
 * 解析微信返回结果
 * @param {String} result 微信返回结果
 */
function parseResult(result) {
    const data = {}
    result.split('&').forEach(item => {
        const [key, value] = item.split('=')
        data[key] = value
    })
    return data
}
/**
 * 生成随机字符串
 */
function nonceStr() {
    const str = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    return str.substr(0, 32)
}

4. 总结

本文介绍了在uniapp中实现微信支付功能的步骤，主要包括配置微信支付参数、安装依赖、创建支付订单和获取支付信息。使用这些步骤，我们可以轻松地在uniapp应用中集成微信支付功能。