完整的小程序支付代码请查看letou在线根目录下的weiapp_demo目录

小程序提供了微信支付接口,但需要后端服务器先调用统一下单接口先下单,得到prepay_id才能支付。

因此首先我们需要先让后端服务统一下单,下单需要的参数如下

参数名类型必填说明
moneyFloat(10,2)单位:元,订单的金额
bodyString(128)商品描述,格式: 商家名称-销售商品类目
out_trade_noString(32)商户订单号,商户系统内部的订单号,32个字符内、可包含字母
openidString(128)用户标识

调用例子:

  order: function () {
    var url = app.url + 'weiapp/Api/payment&PHPSESSID=' + wx.getStorageSync('PHPSESSID')
    var that = this

    wx.request({ //让服务器端统一下单,并返回小程序支付的参数
      url: url,
      data: {
        money: 1, //支付1元
        openid: wx.getStorageSync('openid')
      },
      success: function (res) {
        if (res.data.status == 0) {//服务器参数返回不正常,显示错误信息
          wx.showToast({
            title: res.data.msg,
            icon: '../../images/icon_wrong.png',
            duration: 2000,
          })
        } else { //服务器参数返回正常,调用小程序支付接口
          that.payment(res.data)
        }
      }
    })
  },

后端服务器PHP的payment方法,在这方法里我们指定Home/Service/payok 为异步接收微信的支付结果

    function payment()
    {
        $info = get_pbid_appinfo();

        $money = I('money');
        $body = I('body');
        if (empty($body)) {
            // 商家名称-销售商品类目
            $body = $info ['public_name'] . '-服务购买';
        }
        $out_trade_no = I('out_trade_no');
        if (empty($out_trade_no)) {
            $out_trade_no = date('ymd') . NOW_TIME . rand(100, 999);
        }
        $openid = I('openid');
        if (empty($openid)) {
            $token = get_pbid();
            $openid = $GLOBALS ['myinfo'] [$token] ['openid'];
        }

        $appid = $info ['appid'];
        $param ['body'] = $body;
        $param ['out_trade_no'] = $out_trade_no;
        $param ['total_fee'] = $money * 100;
        $param ['openid'] = $openid;
        $param ['mch_id'] = $info ['mch_id'];
        $param ['partner_key'] = $info ['partner_key'];
        $param ['attach'] = I('username');

        $order = D('weixin/Payment')->weiapp_pay($appid, $param, 'Home/Service/payok');

        echo json_url($order);
    }

下完单后返回小程序支付需要的全部参数,直接使用即可

  payment: function (data) {
    wx.requestPayment({
      'timeStamp': data.timeStamp,
      'nonceStr': data.nonceStr,
      'package': data.package,
      'signType': data.signType,
      'paySign': data.paySign,
      success: function (res) { //支付成功,提示用户 
        wx.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 2000,
        })
      },
      fail: function (res) { //支付失败,提示失败原因
        wx.showToast({
          title: res.errMsg,
          icon: '../../images/icon_wrong.png',
          duration: 2000,
        })
      }
    })
  }

要查询微信支付结果,可参考下一章:异步接收支付结果 章节