uniapp微信H5支付

### UniApp 中实现微信 H5 支付

#### 配置环境与准备工作
为了在 UniApp 应用程序中集成微信 H5 支付功能，开发者需先完成必要的配置工作。这包括但不限于获取应用的 AppID 和商户平台上的密钥等信息[^1]。

#### 创建订单并发起支付请求
当用户确认购买商品或服务时，在前端通过调用微信提供的 JSAPI 接口来创建预支付交易单，并获得此次交易所需的参数集合（prepay_id），这些操作通常由服务器端负责执行。之后再把这些参数传递给客户端用于唤起支付界面。

// 前台 JavaScript 代码片段
const payParams = {
    appId: 'wx8ed2d7f0b9c3a4e',// 小程序唯一标识符
    timeStamp: String(Math.floor(new Date().getTime() / 1000)), // 时间戳
    nonceStr: createNonceStr(), //随机字符串
    package: `prepay_id=${result.prepayId}`, // 统一下单接口返回的 prepay_id 参数值
    signType: "MD5", //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
};

function createNonceStr(){
    return Math.random().toString(36).substr(2, 15);
}

接着利用上述准备好的参数集合作为输入项去初始化 WeixinJSBridge 对象下的 invoke 方法中的 jsapi_ticket 字段以启动实际付款流程：

WeixinJSBridge.invoke(
        'getBrandWCPayRequest', 
         {...payParams}, 
          function(res){
              if (res.err_msg === 'get_brand_wcpay_request:ok') { 
                  console.log('支付成功');
              } else{
                 console.error(`支付失败:${JSON.stringify(res)}`);
               }
           });

需要注意的是，以上提到的部分逻辑应该放置于页面加载完成后立即运行的位置；另外对于某些特定场景下可能还需要额外考虑网络状态等因素的影响[^2]。

#### 后端处理
后端部分主要涉及接收来自 uni-app 的请求以及同微信官方服务器之间的通信过程。这里采用 Spring Boot 框架作为例子说明如何构建相应的业务逻辑和服务接口。具体来说就是编写控制器类用来解析从前端接收到的数据包、验证签名合法性、组装下单所需的信息并向微信提交申请从而拿到最终可以被使用的预支付 ID 返回给前端继续后续的操作。

@RestController
@RequestMapping("/wechat/pay")
public class PayController {

    @PostMapping("/createOrder")
    public ResponseEntity<String> createOrder(@RequestBody Map<String,Object> param){
        
        try {
            // 解析参数 & 校验签名
            
            // 调用微信统一下单 API 获取 prepay_id
            
            JSONObject jsonResult = new JSONObject();
            jsonResult.put("return_code","SUCCESS");
            jsonResult.put("prepay_id","your_prepair_id_here");

            return ResponseEntity.ok(jsonResult.toJSONString());
            
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            throw new RuntimeException("Create order failed.");
        }

    }
    
}