我们先看测试页面

如下是代码

<!--index.wxml-->
<view class="container">
  <view class="container">
    <button bindtap='dianji' type="primary">测试支付0.01元</button>
  </view>
</view>
// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    openId:'',
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  onl oad() {
    // 微信登录获取openID
    wx.login({
       success:(re)=>{
                 console.log(re);
                 // 必须是在用户已经授权的情况下调用
                  wx.getUserInfo({
                    success: (res)=>{
                      var data_arr = {
                        code:re.code,
                        appid:'  ', //你的APPID
                        iv:res.iv,
                        encryptedData:res.encryptedData,
                      };
                      // 请求接口
                      wx.request({
                        url: 'https://www.xxx.cn/yzxx_openid',
                        header: {
                          'Content-Type': 'application/x-www-form-urlencoded'
                         },
                        data:data_arr,
                         method: 'POST',
                         success:(res1)=>{
                            this.openId = JSON.parse(res1.data.data).openId;
                         }
                      })
                    }
                  });
       }
    })
  },
  dianji(){
    wx.request({
      url: 'https://www.xxx.cn/yzxx_wxpayfee',//请求地址
      data:{
       id: this.openId,//获取用户openid
       fee:0.01 //金额
      },
      header: {
       'Content-Type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      success: function (res) {
       console.log('调起支付');
       wx.requestPayment({
        'timeStamp': res.data.timeStamp,
        'nonceStr': res.data.nonceStr,
        'package': res.data.package,
        'signType': 'MD5',
        'paySign': res.data.paySign,
        'success': function (res) {
         console.log('success');
         wx.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 3000
         });
        },
        'fail': function (res) {
         wx.showToast({
           title: '支付失败',
           icon:'none'
         })
        },
        'complete': function (res) {
         console.log('complete');
        }
       });
      },
      fail: function (res) {
       console.log(res.data)
      }
     });
  },
})

接下来是我们后台的代码

// 获取openid
    public function yzxx_openid(){
        include_once VENDOR_PATH.'wxBizDataCrypt.php';
        $appid=$_POST['appid'];        
        $code=$_POST['code']; 
        $encryptedData=$_POST['encryptedData'];
        $iv = $_POST['iv'];
        // 使用code获得session_key    
        if(!empty($code) && !empty($appid) && empty($this->yzxx_sessionKey)){
            $url = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret=SECRET&js_code='.$code.'&grant_type=authorization_code';
            $content = json_decode(file_get_contents($url),true);
            // 保存到类属性中
            $this->yzxx_sessionKey = $content['session_key'];
        }
        if(empty($appid) || empty($code) || empty($encryptedData) || empty($iv)){
            $this->_jsonError('-1','参数错误');exit;
        }
        $pc = new \WXBizDataCrypt($appid,$this->yzxx_sessionKey);
        $errCode = $pc->decryptData($encryptedData, $iv, $data );

        if ($errCode == 0) {
            // 成功
            $this->_jsonResult($data);exit;
        } else {
            // 失败
            $this->_jsonError('-1','获取失败'.$errCode);exit;
        }
        
    }

	// 支付回调
    public function yzxx_notify(){
        $postXml = $GLOBALS["HTTP_RAW_POST_DATA"]; //接收微信参数 
	// 接受不到参数可以使用file_get_contents("php://input"); PHP高版本中$GLOBALS好像已经被废弃了
	if (empty($postXml)) {
	  return false;
	}

	$attr = $this->xmlToArray($postXml);
	$total_fee = $attr['total_fee'];
	$open_id = $attr['openid'];
	$out_trade_no = $attr['out_trade_no'];
	$time = $attr['time_end'];
    }
    //将xml格式转换成数组
    public function xmlToArray($xml) {
	//禁止引用外部xml实体 
	libxml_disable_entity_loader(true);
	$xmlstring = simplexml_load_string($xml, 'SimpleXMLElement', LIBXML_NOCDATA);
	$val = json_decode(json_encode($xmlstring), true);
	return $val;
    }

  // 获取微信订单号
    public function yzxx_wxpayfee(){
        include_once VENDOR_PATH. 'Wxpay/WeixinPay.php';
	     $appid=''; //小程序appid
	     $openid= $_POST['id'];
	     $mch_id=''; //微信支付商户支付号
	     $key=''; //Api密钥
	     $out_trade_no = $mch_id.time();
	     $total_fee = $_POST['fee'];  // 金额
	     if (empty($total_fee)) { 
             //押金
	         $this->_jsonError('-1','参数错误');exit;
	    } else {
	        $body = "支付金额";
	        $total_fee = floatval($total_fee*100); // 由于微信中的金额是以分为单位所以要乘100
	    }
	   $weixinpay = new \WeixinPay($appid,$openid,$mch_id,$key,$out_trade_no,$body,$total_fee);
	   $return=$weixinpay->pay();
	   echo json_encode($return);
    }

我把那个支付类也给大家准备好了，如下代码

<?php 
/*
 * 小程序微信支付
 */
class WeixinPay {
  protected $appid;
  protected $mch_id;
  protected $key;
  protected $openid;
  protected $out_trade_no;
  protected $body;
  protected $total_fee;
  function __construct($appid, $openid, $mch_id, $key,$out_trade_no,$body,$total_fee) {
    $this->appid = $appid;
    $this->openid = $openid;
    $this->mch_id = $mch_id;
    $this->key = $key;
    $this->out_trade_no = $out_trade_no;
    $this->body = $body;
    $this->total_fee = $total_fee;
  }
  public function pay() {
    //统一下单接口
    $return = $this->weixinapp();
    return $return;
  }
  //统一下单接口
  private function unifiedorder() {
    $url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
    $parameters = array(
      'appid' => $this->appid, //小程序ID
      'mch_id' => $this->mch_id, //商户号
      'nonce_str' => $this->createNoncestr(), //随机字符串
//      'body' => 'test', //商品描述
      'body' => $this->body,
//      'out_trade_no' => '2018013106125348', //商户订单号
      'out_trade_no'=> $this->out_trade_no,
//      'total_fee' => floatval(0.01 * 100), //总金额 单位 分
      'total_fee' => $this->total_fee,
      'spbill_create_ip' => $_SERVER['REMOTE_ADDR'], //终端IP
      // 'spbill_create_ip' => '192.168.0.161', //终端IP
      'notify_url' => 'https://www.xxx.cn/yzxx_notify', //通知地址 确保外网能正常访问
      'openid' => $this->openid, //用户id
      'trade_type' => 'JSAPI'//交易类型
    );
    //统一下单签名
    $parameters['sign'] = $this->getSign($parameters);
    $xmlData = $this->arrayToXml($parameters);
    $return = $this->xmlToArray($this->postXmlCurl($xmlData, $url, 60));
    return $return;
  }
  private static function postXmlCurl($xml, $url, $second = 30) 
  {
    $ch = curl_init();
    //设置超时
    curl_setopt($ch, CURLOPT_TIMEOUT, $second);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); //严格校验
    //设置header
    curl_setopt($ch, CURLOPT_HEADER, FALSE);
    //要求结果为字符串且输出到屏幕上
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    //post提交方式
    curl_setopt($ch, CURLOPT_POST, TRUE);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 20);
    curl_setopt($ch, CURLOPT_TIMEOUT, 40);
    set_time_limit(0);
    //运行curl
    $data = curl_exec($ch);
    //返回结果
    if ($data) {
      curl_close($ch);
      return $data;
    } else {
      $error = curl_errno($ch);
      curl_close($ch);
      throw new WxPayException("curl出错，错误码:$error");
    }
  }
  //数组转换成xml
  private function arrayToXml($arr) {
    $xml = "<xml>";
    foreach ($arr as $key => $val) {
      if (is_array($val)) {
        $xml .= "<" . $key . ">" . arrayToXml($val) . "</" . $key . ">";
      } else {
        $xml .= "<" . $key . ">" . $val . "</" . $key . ">";
      }
    }
    $xml .= "</xml>";
    return $xml;
  }
  //xml转换成数组
  private function xmlToArray($xml) {
    //禁止引用外部xml实体 
    libxml_disable_entity_loader(true);
    $xmlstring = simplexml_load_string($xml, 'SimpleXMLElement', LIBXML_NOCDATA);
    $val = json_decode(json_encode($xmlstring), true);
    return $val;
  }
  //微信小程序接口
  private function weixinapp() {
    //统一下单接口
    $unifiedorder = $this->unifiedorder();
//    print_r($unifiedorder);
    $parameters = array(
      'appId' => $this->appid, //小程序ID
      'timeStamp' => '' . time() . '', //时间戳
      'nonceStr' => $this->createNoncestr(), //随机串
      'package' => 'prepay_id=' . $unifiedorder['prepay_id'], //数据包
      'signType' => 'MD5'//签名方式
    );
    //签名
    $parameters['paySign'] = $this->getSign($parameters);
    return $parameters;
  }
  //作用：产生随机字符串，不长于32位
  private function createNoncestr($length = 32) {
    $chars = "abcdefghijklmnopqrstuvwxyz0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) { 
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); 
    } 
    return $str; 
  } 
   //作用：生成签名 
  private function getSign($Obj) { 
      foreach ($Obj as $k => $v) {
        $Parameters[$k] = $v;
      }
      //签名步骤一：按字典序排序参数
      ksort($Parameters);
      $String = $this->formatBizQueryParaMap($Parameters, false);
      //签名步骤二：在string后加入KEY
      $String = $String . "&key=" . $this->key;
      //签名步骤三：MD5加密
      $String = md5($String);
      //签名步骤四：所有字符转为大写
      $result_ = strtoupper($String);
      return $result_;
  }
  ///作用：格式化参数，签名过程需要使用
  private function formatBizQueryParaMap($paraMap, $urlencode) {
    $buff = "";
    ksort($paraMap);
    foreach ($paraMap as $k => $v) {
      if ($urlencode) {
        $v = urlencode($v);
      }
      $buff .= $k . "=" . $v . "&";
    }
    $reqPar = '';
    if (strlen($buff) > 0) {
      $reqPar = substr($buff, 0, strlen($buff) - 1);
    }
    return $reqPar;
  }
}
?>

支付成功之后回调地址需要在微信商户平台配置，这一点要注意（我们需要在回调里面将订单状态改变）
感谢大家观看，我们下次见。