前言

刚好前段时间参与的hybird app项目里涉及的支付方面是我负责的，其中包括安卓的微信支付和支付宝支付，ios支付，h5页面支付，所以今天在这里跟大家分享下我所实现的方式跟部分源码。

ios

ios中的支付主要就是通过像appStore充值来兑现相关的虚拟币。这里只需要在支付的时候判断虚拟币是否足够支付，可以购买就直接调用支付接口，成功后然后跳到成功页面。如果不够则调用与app端提供的api跳到购买页面。（我们的购买页面是原生写的。所以到这就不用管了）

安卓

1 支付宝：直接使用form表单即可。

// 阿里支付
  let div = document.createElement("div");
  if (res.data.form) {
    div.innerHTML = res.data.form;
    document.body.appendChild(div);
    //兼容低端安卓
    this.$nextTick(() => {
      document.forms[0].submit();
    });
    this.sendPaying = false;
  } else {
	//跳转页面
  };

2 微信支付：在安卓使用微信支付需要主要一点，就是当我们调用微信支付完成后不能直接跳转到支付成功的页面，因为在安卓里获取微信支付接口会有延迟，所以我们必须跳到一个中转页面，通过返回的订单号手动点击确认支付完成来判断支付成功。

 window.location.replace(
  res.data.payUrl +
    "&redirect_url=" +
    encodeURIComponent(
      window.location.origin +
        `跳转页面`
    )
);

h5

1 微信内支付：微信内支付的话需要先微信授权登录（具体登陆流程代码就不介绍来）

 // 微信内使用微信支付
  onBridgeReady(data) {
      let id = this.payData.orderIds.join(",");
      id = "wx_" + id;
      let _this = this;
      id = encodeURIComponent(id);
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: data.params.appId, //公众号名称，由商户传入
          timeStamp: data.params.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: data.params.nonceStr, //随机串
          package: data.params.package,
          signType: data.params.signType, //微信签名方式：
          paySign: data.params.paySign, //微信签名
        },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            //跳转
            );
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            _this.$message.error("支付被取消");
          } else {
            _this.$message.error("支付失败");
          }
        }
      );
    },
 this.onBridgeReady(res.data);

2 微信外支付：微信外的就要先注册WeixinJSBridge

if (typeof WeixinJSBridge == "undefined") {
  if (document.addEventListener) {
    document.addEventListener(
      "WeixinJSBridgeReady",
      this.onBridgeReady,
      false
    );
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
    document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
  }
}

最后

以上就是所有的支付方式跟代码，使用微信跟支付宝支付都是需要配置白名单才可以支付，如果有啥不清楚或者不对的欢迎前来交流。。。