背景
最近專案使用uni-app實作微信支付，把程序簡單記錄下，幫助那些剛付訓礎uni-app，苦于檔案的同學們，
整體來說實作程序和非uni-app的實作方式沒有太大不同，難點就在于uni-app對于orderInfo的格式沒有說明，
準備作業
- 申請了商戶號，拿到了API秘鑰，這個需要微信開發平臺，相關的作業大家百度，
- 后面代碼里用到的appid和秘鑰之類需要實作申請號，
- 在uni-app manifest.json 配置sdk支付權限
前端代碼
- onload階段獲取了可用支付串列，這里我們只用到了微信支付，
- requestPayment
a. getOrderInfo 獲取到訂單資訊，主要是prepayid，對應統一下單api的回傳值，
b. uni.requestPayment發起支付，效果就是彈出微信支付框輸入密碼支付，第一個引數是“wxpay”，第二個引數就是OrderInfo.
前端代碼很簡單，重點是如何讓后端回傳OrderInfo以及OrderInfo的格式，
前端代碼如下：
<template>
<view>
<page-head :title="title"></page-head>
<view >
<view style="background:#FFF; padding:50upx 0;">
<view >支付金額</text></view>
<view >
<text >￥</text>
<input type="digit" :value="https://www.cnblogs.com/smileZAZ/p/price" maxlength="4" @input="priceChange" />
</view>
</view>
<view >
<!-- #ifdef APP-PLUS -->
<template v-if="providerList.length > 0">
<button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)"
:loading="item.loading">{{item.name}}支付</button>
</template>
<!-- #endif -->
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'request-payment',
loading: false,
price: 1,
providerList: []
}
},
onl oad: function() {
// #ifdef APP-PLUS
uni.getProvider({
service: "payment",
success: (e) => {
console.log("payment success:" + JSON.stringify(e));
let providerList = [];
e.provider.map((value) => {
switch (value) {
case 'alipay':
providerList.push({
name: '支付寶',
id: value,
loading: false
});
break;
case 'wxpay':
providerList.push({
name: '微信',
id: value,
loading: false
});
break;
default:
break;
}
})
this.providerList = providerList;
},
fail: (e) => {
console.log("獲取支付通道失敗：", e);
}
});
// #endif
},
methods: {
async requestPayment(e, index) {
this.providerList[index].loading = true;
let orderInfo = await this.getOrderInfo(e.id);
console.log("得到訂單資訊", orderInfo);
if (orderInfo.statusCode !== 200) {
console.log("獲得訂單資訊失敗", orderInfo);
uni.showModal({
content: "獲得訂單資訊失敗",
showCancel: false
})
return;
}
uni.requestPayment({
provider: e.id,
orderInfo: orderInfo.data.data,
success: (e) => {
console.log("success", e);
uni.showToast({
title: "感謝您的贊助!"
})
},
fail: (e) => {
console.log("fail", e);
uni.showModal({
content: "支付失敗,原因為: " + e.errMsg,
showCancel: false
})
},
complete: () => {
this.providerList[index].loading = false;
}
})
},
getOrderInfo(e) {
let appid = "";
// #ifdef APP-PLUS
appid = plus.runtime.appid;
// #endif
let url = 'http://10.10.60.200:8070/sc-admin/sales/wx/prepay/?brokerId=shba01';
return new Promise((res) => {
uni.request({
url: url,
success: (result) => {
res(result);
},
fail: (e) => {
res(e);
}
})
})
},
priceChange(e) {
console.log(e.detail.value)
this.price = e.detail.value;
}
}
}
</script>
<style>
.rmbLogo {
font-size: 40upx;
}
button {
background-color: #007aff;
color: #ffffff;
}
.uni-h1.uni-center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
}
.price {
border-bottom: 1px solid #eee;
width: 200upx;
height: 80upx;
padding-bottom: 4upx;
}
.ipaPayBtn {
margin-top: 30upx;
}
</style>
后端代碼（springboot）
核心代碼
import com.alibaba.fastjson.JSONObject;
import com.bian.common.core.domain.AjaxResult;
import com.bian.common.utils.StringUtils;
import com.bian.framework.config.jwt.AuthService;
import com.bian.sales.entity.Constant;
import com.bian.sales.entity.PayInfo;
import com.bian.sales.service.IWxService;
import com.bian.sales.util.*;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
import com.thoughtworks.xstream.XStream;
import org.springframework.http.HttpEntity;
import org.slf4j.Logger;
import javax.servlet.http.HttpServletRequest;
import java.util.*;
@Service
public class WxServiceImpl implements IWxService
{
Logger logger = LoggerFactory.getLogger(WxServiceImpl.class);
@Override
public AjaxResult goWeChatPay(String brokerId, HttpServletRequest request) throws Exception {
String clientIP = CommonUtil.getClientIp(request);
logger.error("openId: " + brokerId + ", clientIP: " + clientIP);
String randomNonceStr = RandomUtils.generateMixString(32);
Map<String, String> result = unifiedOrder(brokerId, clientIP, randomNonceStr);
System.out.println(request.toString());
if(StringUtils.isBlank(result.get("prepay_id"))) {
return AjaxResult.error("支付錯誤");
} else {
logger.info("支付成功");
Map <String,Object>jsonObject = new LinkedHashMap();
String noncestr = RandomUtils.generateMixString(32);
String prepayid = result.get("prepay_id");
String timestamp = String.valueOf(new Date().getTime()/1000);
jsonObject.put("appid",Constant.APP_ID);
jsonObject.put("noncestr",noncestr);
jsonObject.put("package","Sign=WXPay");
jsonObject.put("partnerid",Constant.MCH_ID);
jsonObject.put("prepayid",result.get("prepay_id"));
jsonObject.put("timestamp",new Date().getTime()/1000);
jsonObject.put("sign",getSignforPayment(noncestr,prepayid,timestamp ));
return AjaxResult.success(jsonObject);
}
}
/**
* @Function: 去支付
* @author: YangXueFeng
* @Date: 2019/6/14 16:50
*/
/**
* 呼叫統一下單介面
* @param brokerId
*/
private Map<String, String>
(String brokerId, String clientIP, String randomNonceStr) {
try {
//生成預支付交易單，回傳正確的預支付交易會話標識后再在APP里面調起支付
String url = Constant.URL_UNIFIED_ORDER;
PayInfo payInfo = createPayInfo(brokerId, clientIP, randomNonceStr);
String md5 = getSign(payInfo);
payInfo.setSign(md5);
logger.error("md5 value: " + md5);
String xml = CommonUtil.payInfoToXML(payInfo);
xml = xml.replace("__", "_").replace("<![CDATA[1]]>", "1");
//xml = xml.replace("__", "_").replace("<![CDATA[", "").replace("]]>", "");
logger.error(xml);
StringBuffer buffer = HttpUtil.httpsRequest(url, "POST", xml);
logger.error("unifiedOrder request return body: \n" + buffer.toString());
Map<String, String> result = CommonUtil.parseXml(buffer.toString());
String return_code = result.get("return_code");
if(StringUtils.isNotBlank(return_code) && return_code.equals("SUCCESS")) {
String return_msg = result.get("return_msg");
if(StringUtils.isNotBlank(return_msg) && !return_msg.equals("OK")) {
logger.error("統一下單錯誤！");
return null;
}
String prepay_Id = result.get("prepay_id");
return result;
} else {
return null;
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 生成統一下單介面的請求引數
* https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_1
* @param brokerId
* @param clientIP
* @param randomNonceStr
* @return
*/
private PayInfo createPayInfo(String brokerId, String clientIP, String randomNonceStr) {
clientIP ="222.72.148.34";
Date date = new Date();
String timeStart = TimeUtils.getFormatTime(date, Constant.TIME_FORMAT);
String timeExpire = TimeUtils.getFormatTime(TimeUtils.addDay(date, Constant.TIME_EXPIRE), Constant.TIME_FORMAT);
String randomOrderId = CommonUtil.getRandomOrderId(); //生成隨機商品訂單號
PayInfo payInfo = new PayInfo();
payInfo.setAppid(Constant.APP_ID);
payInfo.setMch_id(Constant.MCH_ID);
payInfo.setDevice_info("WEB");
payInfo.setNonce_str(randomNonceStr);
payInfo.setSign_type("MD5"); //默認即為MD5
payInfo.setBody("必安glJSAPI支付測驗");
payInfo.setAttach("支付測驗4luluteam");
payInfo.setOut_trade_no(randomOrderId);
payInfo.setTotal_fee(1);
payInfo.setSpbill_create_ip(clientIP);
payInfo.setTime_start(timeStart);
payInfo.setTime_expire(timeExpire);
payInfo.setNotify_url(Constant.URL_NOTIFY);
payInfo.setTrade_type("APP");
payInfo.setLimit_pay("no_credit");
// payInfo.setOpenid(brokerId);
return payInfo;
}
private String getSign(PayInfo payInfo) throws Exception {
StringBuffer sb = new StringBuffer();
sb.append("appid=" + payInfo.getAppid())
.append("&attach=" + payInfo.getAttach())
.append("&body=" + payInfo.getBody())
.append("&device_info=" + payInfo.getDevice_info())
.append("&limit_pay=" + payInfo.getLimit_pay())
.append("&mch_id=" + payInfo.getMch_id())
.append("&nonce_str=" + payInfo.getNonce_str())
.append("¬ify_url=" + payInfo.getNotify_url())
// .append("&openid=" + payInfo.getOpenid())
.append("&out_trade_no=" + payInfo.getOut_trade_no())
.append("&sign_type=" + payInfo.getSign_type())
.append("&spbill_create_ip=" + payInfo.getSpbill_create_ip())
.append("&time_expire=" + payInfo.getTime_expire())
.append("&time_start=" + payInfo.getTime_start())
.append("&total_fee=" + payInfo.getTotal_fee())
.append("&trade_type=" + payInfo.getTrade_type())
.append("&key=" + Constant.API_KEY);
System.out.println("排序后的拼接引數：" + sb.toString());
return CommonUtil.getMD5(sb.toString().trim()).toUpperCase();
}
private String getSignforPayment(String noncestr,String prepayid,String timestamp) throws Exception {
StringBuffer sb = new StringBuffer();
sb.append("appid=" +Constant.APP_ID)
.append("&noncestr=" + noncestr)
.append("&package=" + "Sign=WXPay")
.append("&partnerid=" + Constant.MCH_ID)
.append("&prepayid=" + prepayid)
.append("×tamp=" + timestamp)
.append("&key=" + Constant.API_KEY);
System.out.println("排序后的拼接引數：" + sb.toString());
return CommonUtil.getMD5(sb.toString().trim()).toUpperCase();
}
}
代碼說明
以上代碼goWeChatPay從controller層跳轉并回傳結果給controller介面，所有程序參考微信官方檔案的2個介面
- 統一下單介面后端
- 調起支付介面前端已實作
unifiedOrder對應了統一下單介面，看起來很復雜，其實就做了一件事就是拼接引數，拼接引數時涉及到了簽名演算法，理解這個演算法是關鍵，建議花時間理解透徹這個演算法，
createPayInfo，創建一個PayInfo的類，對應了提交的各個引數，
getSign，簽名演算法的具體實作，獲得提交引數的sign，
以上完成了統一下單介面的程序，如果return_code回傳“SUCCESS”,result_code回傳OK，我們會獲得prepay_id（預支付交易會話標識），到這里已經完成了后端內容，但為了使用uni-app我們需要按照如下格式回傳給前端,
格式如下：
{"data": {
"appid": "wx0411fa6a39d61297",
"noncestr": "5JigiIJicbq8hQI2",
"package": "Sign=WXPay",
"partnerid": "1230636401",
"prepayid": "wx21204902147233e222e12d451613768000",
"timestamp": 1571662142,
"sign": "0E5C9B9B1C8D7497A234CCC3C721AB1F"
},
"statusCode": 200,
"header": {
"Content-Type": "text/plain;charset=UTF-8",
"X-Android-Response-Source": "NETWORK 200",
"Date": "Mon, 21 Oct 2019 12:49:02 GMT",
"EagleId": "74cf71a315716621419605339e",
"Vary": "[Accept-Encoding, Accept-Encoding]",
"X-Android-Received-Millis": "1571662145735",
"Timing-Allow-Origin": "*",
"_": "HTTP/1.1 200 OK",
"X-Android-Selected-Protocol": "http/1.1",
"Connection": "keep-alive",
"Via": "cache28.l2et15-1[208,0], kunlun5.cn1241[504,0]",
"X-Android-Sent-Millis": "1571662145071",
"Access-Control-Allow-Origin": "*",
"Server": "Tengine",
"Transfer-Encoding": "chunked"
},
"errMsg": "request:ok"
}
重點是data部分，就是uni-app要求的OrderInfo的格式，getSignforPayment就是該部分的簽名演算法，
以上如果實行正確，應該就可以正常發起微信支付，
參考檔案
https://blog.csdn.net/zhuoganliwanjin/article/details/81872215
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229735.html
標籤：HTML5