H5封装的App是指通过WebView将网页打包成App的形式，同时实现了App原生的功能与交互体验。这种应用方式对于开发者而言，既能够使用Web技术开发，又可以借助App集成支付等原生功能，提升了App的灵活性与可用性。本文将详细介绍如何在H5封装的App中调用支付功能的原理以及步骤。
H5封装的App调用支付的原理
在H5封装的App中调用支付，需要借助App内置的WebView组件与H5页面之间的交互方式。一般来说，常见的交互方式有以下两种：
1. 通过WebView的JavaScript与Native相互调用
这种交互方式需要在WebView组件中注册JavaScriptInterface，为H5页面提供与App原生组件的连接。在H5页面中，使用JavaScript方法调用Java方法，实现与App的交互功能。
2. 通过WebView的回调函数实现交互
这种交互方式是通过WebView组件的loadUrl方法，向H5页面发送消息，同时在H5页面中定义回调函数来接收数据并处理。
在进行支付时，通常需要在App端同时完成客户端和服务端的支付操作。因此，在调用支付时需要进行如下步骤的处理：
1.生成订单信息
在App端生成包含订单号、商品名称、商品价格等信息的订单对象。
2.请求服务器获取支付参数
将订单信息发送到服务器，并接收到由支付平台返回的预支付参数。
3.调用支付接口
使用支付平台提供的SDK调用支付接口，将预支付参数作为参数发送至支付平台。
4.接收支付结果
支付平台通过异步回调的方式向服务器返回支付结果状态，服务器收到回调信息后对订单进行处理。
以上步骤需要在App端与服务器端共同完成，并通过WebView之间的交互实现。
H5封装的App调用支付的具体步骤
下面将详细介绍在H5封装的App中调用支付的具体步骤，以微信支付为例。
1.在App端生成订单信息并发送至服务器端
在App端使用Java代码生成包含订单号、商品名称、价格等信息的订单对象，并使用OJBKHttpClient发送POST请求将订单信息发送至服务器端。
```
//生成订单信息
private void generateOrderInfo() {
orderInfo = new OrderInfo(); //初始化订单对象
orderInfo.setOrderId(createOrderId()); //生成订单号
orderInfo.setGoodsName("iPhone XS Max 256G"); //设置商品名称
orderInfo.setPrice(9999); //设置商品价格
...
}
//发送订单至服务器端
private void sendOrderInfoToServer() {
OJBKHttpClient httpClient = new OJBKHttpClient(); //初始化网络请求库
httpClient.setData(orderInfo); //设置请求数据
httpClient.post(URL, new OJBKHttpResponseHandler() {
@Override
public void onSuccess(int statusCode, JSONObject response) {
//请求成功后，解析服务器返回的支付参数
parsePayParams(response);
}
@Override
public void onFailure(int statusCode, Throwable error) {
//请求失败后，显示错误信息
Toast.makeText(MainActivity.this, "请求支付信息失败，请稍后重试！", Toast.LENGTH_SHORT).show();
}
});
}
```
2.在H5页面中请求支付参数
在H5页面中，通过JavaScript方法请求服务器端获取支付参数。
```
//发送请求获取支付参数
function loadPayParams(orderId) {
var xhr = new XMLHttpRequest();
xhr.open('POST', URL, true); //设置请求方式、URL、是否异步
xhr.setRequestHeader('Content-Type', 'application/json'); //设置请求头
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) { //请求成功
var result = xhr.responseText;
if (result != null && result != '') {
var params = JSON.parse(result); //将获取的参数转化为json对象
var appId = params.appid;
var timeStamp = params.timestamp;
var nonceStr = params.noncestr;
var prepayId = params.prepayid;
var paySign = params.sign;
//调用微信支付接口
doWeChatPay(appId, timeStamp, nonceStr, prepayId, paySign);
}
}
}
xhr.send(JSON.stringify({orderId:orderId})); //发送请求
}
```
3.调用微信支付接口
在H5页面中使用调用微信支付JS API实现微信支付。
```
//调用微信支付接口
function doWeChatPay(appId, timeStamp, nonceStr, prepayId, paySign) {
WeixinJSBridge.invoke('getBrandWCPayRequest',{
"appId":appId, //公众号名称，由商户传入
"timeStamp":timeStamp, //时间戳，自1970年以来的秒数
"nonceStr":nonceStr, //随机串
"package":"prepay_id=" + prepayId,
"signType":"MD5", //微信签名方式
"paySign":paySign //微信签名
},function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) { //支付成功
alert("支付成功");
} else { //支付失败
alert("支付失败，错误代码：" + res.err_code + "，错误描述：" + res.err_desc);
}
});
}
```
4.处理支付结果
服务器端接收到支付结果后，根据结果状态进行处理，在H5页面中再次向App端发送支付结果状态，并在Java代码中对支付结果进行处理。
```
//接收支付结果状态
public void handlePayResult(String result) {
if(result.equals("success")) {
Toast.makeText(MainActivity.this, "支付成功！", Toast.LENGTH_SHORT).show();
} else if(result.equals("failed")) {
Toast.makeText(MainActivity.this, "支付失败！", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "未知错误！", Toast.LENGTH_SHORT).show();
}
}
```
通过以上步骤，就可以在H5封装的App中调用微信支付功能了。需要注意的是，以上代码仅为示例代码，实际开发中应根据具体需求进行修改和优化。同时，为了增强安全性，建议在生成订单信息和向服务器发送订单信息时，采用加密算法对信息进行加密，避免信息被窃取或篡改。
