小程序内联h5页面，小程序webview内网页等等方法实现微信支付

1. 前言

在微信生态中，小程序已经成为了非常重要的一环，本文将介绍在小程序中如何实现微信支付。

2. 小程序内联h5页面

小程序内联h5页面是一种比较简单的实现微信支付的方式，实现流程如下：

2.1 创建账号与认证

在使用微信支付前，需要先去开通微信支付并在小程序中进行认证，具体操作参见微信支付官方文档。

2.2 引入JSAPI

下面的代码是引入JSAPI的示例：

wx.requestPayment({
  'timeStamp': '',
  'nonceStr': '',
  'package': '',
  'signType': 'MD5',
  'paySign': '',
  'success':function(res){
    console.log(res);
  },
  'fail':function(res){
    console.log(res);
  }
});

2.3 编写h5页面

下面的代码演示了如何在小程序中引入h5页面：

<web-view src="https://www.example.com/pay"></web-view>

支付流程如下：

商户后台向微信申请支付单，获取prepay_id参数后，将参数传递给h5页面。

用户在h5页面中完成支付后，h5页面调用微信支付完成支付。

微信支付完成后，微信将支付结果传回h5页面。

3. 小程序web-view内网页支付

小程序web-view内网页支付是一种比较常用的实现微信支付的方式，实现流程如下：

3.1 创建账号与认证

与内联h5页面相同，需要先去开通微信支付并在小程序中进行认证。

3.2 使用web-view组件

下面的代码演示了如何在小程序中使用web-view组件：

<web-viewsrc="https://www.example.com/pay"></web-view>

3.3 向内嵌网页传递参数

下面的代码演示了如何向内嵌网页传递参数：

<web-viewsrc="https://www.example.com/pay?param1=value1¶m2=value2"></web-view>

3.4 内嵌网页中的JSAPI

下面的代码演示了内嵌网页中使用JSAPI的示例：

// 内嵌网页中的JSAPI
wx.miniProgram.postMessage({
  data: {
    'param1': '',
    'param2': ''
  }
});

支付流程与内联h5页面相同。

4. 小程序支付能力封装

除了以上两种方式之外，还有一种比较常用的方式就是封装小程序支付能力。

封装小程序支付能力的好处是能够减少代码的重复率，降低代码的耦合度，提高代码的可重用性，使得代码更易于维护。

4.1 支付能力的封装

下面的代码演示了支付能力的封装过程：

function wxpay(param){
  // 调用微信支付
  wx.requestPayment({
    'timeStamp': new Date().getTime().toString(),
    'nonceStr': Math.random().toString(36).substr(2),
    'package': 'prepay_id=' + param.prepay_id,
    'signType': 'MD5',
    'paySign': '',
    'success': function(res){
      if (res.errMsg == 'requestPayment:ok') {
        // 支付成功
      }
    },
    'fail': function(res){
      // 支付失败
    },
    'complete': function(res){
      // 支付完成
    }
  });
}

4.2 小程序中调用封装函数

下面的代码演示了在小程序中调用封装函数的过程：

// 调用支付能力封装函数
wxpay({
  'prepay_id': ''
});

以上就是小程序中实现微信支付的三种方式，选择哪种方式主要取决于开发者的实际需求与使用场景。