1. UniApp概述
UniApp是由DCloud公司推出的一款跨平台开发工具，能够快速实现一份代码同时部署到多个平台，包括iOS、Android、H5、小程序等。通过UniApp，我们可以方便地实现支付宝与微信支付的集成与使用。
2. 支付宝支付集成
2.1. 配置支付宝开发者账号
首先，我们需要有一份支付宝开发者账号，并前往支付宝开发平台创建应用以获取相应的应用ID和私钥等信息。具体步骤如下：
1. 前往支付宝开发平台（https://openhome.alipay.com/platform/home.htm）注册开发者账号。
2. 登录后，进入控制台，在应用管理中点击创建应用。
3. 填写相关应用信息，包括应用名称、应用类型、应用描述、LOGO等，并提交审核。
4. 应用审核通过后，我们可以获取到应用ID和应用私钥等信息，这些信息稍后会用到。
2.2. 安装相关插件
UniApp针对支付宝和微信支付的集成，都需要安装相关的插件，这里我们先安装支付宝支付插件。在HBuilderX的插件市场中搜索“支付宝插件”并安装，或者在命令行中执行以下命令安装：
npm install uniapp-alipay --save
2.3. 支付宝SDK接入
接下来，我们需要将支付宝SDK接入到我们的项目中。在HBuilderX的项目根目录下创建一个libs文件夹，并将下载好的alipay.js SDK文件拷贝到该目录下。然后，在manifest.json文件中引入SDK文件和插件：
{
"app-plus": {
"plugins": {
"uniapp-alipay": {
"version": "1.0.0",
"provider": "uniapp.alipay"
}
}
},
"mp-weixin": {
"plugins": {
"uniapp-alipay": {
"version": "1.0.0",
"provider": "uniapp.alipay"
}
}
},
"mp-alipay": {
"plugins": {
"uniapp-alipay": {
"version": "1.0.0",
"provider": "uniapp.alipay"
}
}
},
"libs": {
"alipayjs-sdk": {
"version": "1.0.0",
"path": "./libs/alipay.js"
}
}
}
2.4. 调用支付宝支付接口
支付宝支付接口需要传入一些必要的参数，包括应用ID、支付金额、订单标题、订单详情等等。我们可以将这些参数封装成一个对象，并调用支付宝插件中的alipay方法来发起支付申请。具体代码如下：
/**
* 获取订单信息
*/
function getOrder() {
// 设置订单金额
let money = '1.00';
// 构造订单数据
let order = {
app_id: '应用ID',
method: 'alipay.trade.app.pay', // 固定值
charset: 'utf-8', // 参数编码
notify_url: '',
timestamp: Math.floor(new Date().getTime() / 1000), // 时间戳
version: '1.0', // 版本号
biz_content: JSON.stringify({
subject: '订单标题',
out_trade_no: Date.now().toString(), // 生成订单号
total_amount: money,
product_code: 'QUICK_MSECURITY_PAY',
body: ''
}) // 订单详情
};
// 使用私钥对订单信息进行签名
let sign = CryptoJS.RSA.encrypt(JSON.stringify(order), '应用私钥');
// 将签名串转化为基础64编码
sign = encodeURIComponent(CryptoJS.enc.Base64.stringify(sign.ciphertext));
// 修改订单信息中的签名
order.sign = sign;
// 返回订单信息
return JSON.stringify(order);
}
/**
* 调用支付接口
*/
function doPay() {
// 获取订单信息
let order = getOrder();
// 调用支付宝支付接口
uni.requestPayment({
provider: 'alipay',
orderInfo: order,
success: function(res) {
console.log('支付成功', res);
},
fail: function(err) {
console.log('支付失败', err);
}
});
}
3. 微信支付集成
3.1. 配置微信开发者账号
类似支付宝支付集成，我们也需要有一份微信开发者账号，并前往微信开放平台创建应用以获取相应的应用ID和密钥等信息。具体步骤如下：
1. 前往微信开放平台（https://open.weixin.qq.com/）注册开发者账号。
2. 登录后，在应用管理中点击创建应用。
3. 填写相关应用信息，包括应用名称、应用类型、应用描述、LOGO等，并提交审核。
4. 应用审核通过后，我们可以获取到应用ID和密钥等信息，这些信息稍后会用到。
3.2. 安装相关插件
与支付宝支付插件类似地，在HBuilderX的插件市场中搜索“微信支付插件”并安装，或者在命令行中执行以下命令安装：
npm install uniapp-wechat --save
3.3. 微信支付API接入
微信支付需要调用微信提供的API进行接入，因此我们需要在manifest.json文件中配置微信支付的API接口地址和相关参数：
{
"app-plus": {
"plugins": {
"uniapp-wechat": {
"version": "1.0.0",
"provider": "madao-wechat"
}
}
},
"mp-weixin": {
"plugins": {
"uniapp-wechat": {
"version": "1.0.0",
"provider": "madao-wechat"
}
},
"wechat": {
"appid": "应用ID",
"mchid": "商户号",
"apikey": "商户密钥",
"notify_url": "回调地址"
}
},
"mp-alipay": {
"plugins": {
"uniapp-wechat": {
"version": "1.0.0",
"provider": "madao-wechat"
}
}
}
}
3.4. 调用微信支付接口
类似支付宝支付接口，微信支付接口也需要传入一些必要的参数，包括应用ID、商户号、支付金额、订单标题、订单详情等等。我们可以将这些参数封装成一个对象，并调用微信插件中的requestPayment方法来发起支付申请。具体代码如下：
/**
* 获取订单信息
*/
function getOrder() {
// 设置订单金额
let money = 1;
// 构造订单数据
let order = {
appid: '应用ID',
mch_id: '商户号',
nonce_str: Math.random().toString(36).substr(2, 15), // 随机字符串
body: '订单标题',
out_trade_no: Date.now().toString(), // 生成订单号
total_fee: money * 100, // 订单金额（单位为分）
spbill_create_ip: '',
notify_url: '回调地址',
trade_type: 'APP' // 固定值
};
// 统一下单接口需要签名，因此我们要将订单信息进行签名
let sign = signOrder(order, '商户密钥');
// 将签名串添加到订单信息中
order.sign = sign;
// 将订单信息转化为XML格式
let xmlStr = objToXml(order);
// 发起POST请求
return new Promise((resolve, reject) => {
uni.request({
url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
method: 'POST',
dataType: 'text',
header: {
'content-type': 'application/xml'
},
data: xmlStr,
success: function(res) {
resolve(res);
},
fail: function(err) {
reject(err);
}
});
});
}
/**
* 调用微信支付接口
*/
function doPay() {
// 获取订单信息
getOrder().then(res => {
let xmlStr = res.data;
// 将XML格式的字符串转化为JSON格式
xml2js.parseString(xmlStr, (err, result) => {
let data = result.xml;
// 构造调起微信支付输入参数
let payArgs = {
provider: 'wxpay',
timeStamp: new Date().getTime().toString(),
nonceStr: data.nonce_str[0],
package: 'prepay_id=' + data.prepay_id[0],
signType: 'MD5',
paySign: signPayArgs({
appId: '应用ID',
timeStamp: new Date().getTime().toString(),
nonceStr: data.nonce_str[0],
package: 'prepay_id=' + data.prepay_id[0],
signType: 'MD5'
}, '商户密钥')
};
// 调起微信支付
uni.requestPayment({
...payArgs,
success: function(res) {
console.log('支付成功', res);
},
fail: function(err) {
console.log('支付失败', err);
}
});
});
}).catch(err => {
console.log('获取订单信息失败', err);
});
}
/**
* 对订单信息进行签名
*/
function signOrder(order, key) {
let signStr = '';
for (let item in order) {
if (order[item]) {
signStr += item + '=' + order[item] + '&';
}
}
signStr += 'key=' + key;
let md5 = CryptoJS.MD5(signStr).toString().toUpperCase();
return md5;
}
/**
* 对调起微信支付输入参数进行签名
*/
function signPayArgs(args, key) {
let signStr = '';
for (let item in args) {
if (args[item]) {
signStr += item + '=' + args[item] + '&';
}
}
signStr += 'key=' + key;
let md5 = CryptoJS.MD5(signStr).toString().toUpperCase();
return md5;
}
/**
* 将JSON格式的对象转化为XML格式的字符串
*/
function objToXml(obj) {
let xmlStr = '';
for (let item in obj) {
xmlStr += '<' + item + '>' + obj[item] + '';
}
xmlStr += '';
return xmlStr;
}
4. 总结
通过本文的介绍，我们可以了解到UniApp如何实现支付宝和微信支付的集成与使用。其中，支付宝支付的集成相对简单，只需要配置好应用信息后，调用支付宝插件提供的接口即可完成支付。而微信支付则需要更多的API操作，涉及到订单信息的签名、XML格式的转换等等。无论是哪种支付方式，都需要了解相关的API接口和参数设置才能正常实现。希望本文能够对大家有所帮助。