微信小程序 “万利商城”实战之十四：生成订单后的支付编码实现

用户下订单后在数据库中生成一笔订单数据，同时跳转到订单支付页面，

用户点击支付时小程序需要去调用支付接口，完成支付后一笔订单的线上流程就结束了。

这里还需要考虑在支付的时候用户放弃支付或是支付失败后需要有相应的处理机制，

另外，用户支付成功后如果取消订单放弃购买商品还需要解决退款的问题，

针对这一点微信小程序给我们提供了丰富的API来处理，先看页面部分的展现：

 

<!--index.wxml-->
<view class="container">
 
 <view class="list1" wx:for="{{productList}}" wx:key="produceId">

   <view>
     <image class="image1" src="{{item.imageUrl}}"></image>
   </view>

   <view class="detail1">
    <text>{{index+1}}. {{item.productName}}</text>
    <text class="oriPrice1">￥{{item.originalPrice}}</text>

    <view class="priceInfo1">
      <text>￥</text>
      <text class="price1">{{item.price}}</text>
      <text decode="true">&emsp;&emsp;</text>
      <text decode="true">数量&nbsp;:&nbsp;</text>
      <text class="qty1">{{item.productQty}}</text>
    </view> 
    </view>

  </view>
 
 
  <view class="orderInfo1">
    <view>
      <text>总金额:</text>
      <text class="amount1">{{amount}}</text>
      <text>元</text>
    </view>
    <view>
      <button class="order1" bindtap="bindPay">付款</button>
    </view>
  </view>
 
 </view>
 

页面对订单商品做了展示，同时定义了付款按钮的点击事件对应的函数bindPay，

剩下的就是在该函数中调用微信支付接口，当用户付款成功后更新数据库订单状态，然后跳转到付款成功的页面，

这样支付流程就结束了。

注：上面的orderDetail.wxml页面中有 <text decode="true">&emsp;&emsp;</text> 这样一行代码，

decode="true"的作用是对标签中的字符做编码，&emsp; 表示一个空格，其宽度是一个汉字字符的宽度，

有时候我们需要文字对齐的时候用&emsp;非常方便，&nbsp;也表示一个空格，但宽度只有半个汉字字符宽度。

 

微信小程序支付接口的调用：

官方文档网址：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

支付代码如下：

  bindPay: function () {  
    let _this=this;
    wx.request({
      url: 'http://www.tm.com/webapi/prePayOrder',
      data:{'orderNo':'9deid9e98832jdy32kd'},
      method:'GET',
      success:function(res){
        _this.callToPay(res.data);
      }
    })

  },


  callToPay: function (payInfo) {
    wx.requestPayment({
      'timeStamp': '1490840662',
      'nonceStr': '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',
      'package': 'prepay_id=wx2017033010242291fcfe0db70013231072',
      'signType': 'MD5',
      'paySign': '22D9B4E54AB1950F51E0649E8810ACD6',
      'success':function(res){
        wx.redirectTo({ url: '../shoppingcart/payFinished.wxml', })
      },
      'fail':function(res){
        wx.showToast({ title: '支付失败.', })
      },
      'complete':function(res){}
      }) 
  },

先调用wx.request() 通过Web服务器在微信支付服务后台生成预支付交易单，

返回正确的预支付交易信息后再调用API函数 wx.requestPayment(OBJECT) ，参数payInfo包含了支付接口需要的参数信息，

在具体项目中应该用'timeStamp':payInfo.timeStamp来给参数赋值 。

预支付交易单的接口URL是https://api.mch.weixin.qq.com/pay/unifiedorder，

需要传递的相关参数见微信官方文档：

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1&index=1#

该文档还包括查询订单、关闭订单、申请退款、查询退款、支付结果通知，退款结果通知等接口，如下图所示：

用户看到页面效果如下：

支付完成后的页面如下，在页面底部还可以推送一些商品给用户形成二次购买：