uni-app 打包H5外部浏览器唤起微信支付

### UNI-APP 开发微信公众号 (H5) 并集成微信支付 #### 一、准备工作 为了在 Uni-app 中开发微信公众号 H5 应用并集成微信支付功能，需先完成如下准备： 1. **注册微信公众平台账号** - 获取 AppID 和 AppSecret。 2. **配置服务器域名** - 在微信公众平台上设置合法的业务域名、JS接口安全域名等必要信息[^1]。 3. **安装必要的插件和库文件** 对于微信支付的支持，在项目中引入 `wx.js` 文件用于调用微信 JS SDK 接口。同时确保已安装最新版本的 Vue CLI 工具以便更好地管理项目资源。 #### 二、实现流程 ##### （一）初始化环境变量 创建 `.env.development` 或者其他适合当前环境下的配置文件来保存敏感数据如 appId, mchId(商户号), key(密钥)，这些参数将在后续请求过程中被使用到。 ```bash VUE_APP_WX_APP_ID=your_app_id_here VUE_APP_MCH_ID=your_merchant_id_here VUE_APP_API_KEY=your_api_key_here ``` ##### （二）获取预支付订单编号(prepay_id) 当用户确认付款金额后，前端应向自己的服务端发起 POST 请求传递商品详情给后台处理逻辑；此时后端负责生成交易单据并向 WeChat Pay API 发送 HTTPS 请求以获得 prepay_id 参数作为响应的一部分返回给客户端应用。 注意：此过程涉及敏感操作建议采用 HTTPS 协议传输数据，并且严格按照官方文档说明构建签名字符串防止篡改攻击风险。 ##### （三）调起微信内嵌浏览器中的支付控件 收到有效的 prepay_id 后即可按照下述方式组装所需参数并通过 wx.chooseWXPay 方法启动内置 Webview 支付界面供顾客输入密码验证身份从而完成整个购物流程: ```javascript // 假设已经获得了prepay_id和其他必需的信息 const payParams = { "appId": process.env.VUE_APP_WX_APP_ID, "timeStamp": new Date().getTime(), "nonceStr": Math.random().toString(36).substr(2), "package": 'prepay_id=' + prepay_id_from_server,// 注意这里的拼接规则可能依据实际情况有所变化 "signType": "MD5", }; // 计算 sign 字段的具体方法请参照 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 let stringA = Object.keys(payParams) .filter(key => payParams[key]) .map(key => `${key}=${encodeURIComponent(payParams[key])}`) .join('&'); stringA += '&key=' + encodeURIComponent(process.env.VUE_APP_API_KEY); payParams.sign = hex_md5(stringA.toUpperCase()); // 调用 chooseWXPay 进行支付 WeixinJSBridge.invoke( 'getBrandWCPayRequest', payParams, function(res){ if(res.err_msg === "get_brand_wcpay_request:ok"){ alert('支付成功！'); }else{ console.error(`支付失败:${res.err_code}`); } }); ``` 上述代码片段展示了如何利用 JavaScript 实现微信支付的核心部分——即通过 WeixinJSBridge 对象访问原生组件进而引导用户至最终结算环节。值得注意的是实际部署之前还需要针对不同场景做充分测试确保兼容性和稳定性。 #### 三、常见问题排查 如果遇到无法正常唤起支付窗口的情况，请检查以下几点： - 是否正确设置了 jsApiList 数组内的权限项； - 检查 URL 地址是否被列入了公众平台的安全白名单之中； - 确认所有参与计算 Sign 的字段都已被正确定义并且顺序无误； - 测试环境中使用的证书是否有效过期等问题也可能会引起异常行为。