微信小程序调起微信支付

微信支付开发文档：wx.requestPayment(Object object) | 微信开放文档

一、先有一个提交订单页面

（1）wxml

<view class="btn" bindtap="addOrder">{{btnText}}</view>

二、接入支付流程

（1）在点击提交订单的时候向后端传递商品信息、通过调取的接口返回 拿到wx.requestPayment接口所需要的参数 

 addOrder(){
    let that=this
	 request.request('POST','接口地址',this.data.form).then(function(result){
      if(result.data){
        that.setData({
          orderNumber:result.data.orderNumber
        })
        //appid存在为付费订单，免费订单仅返回orderNumber
        if(result.data.appId){
          result.data.paySign=result.data.sign
          that.jsapiPay({
            ...result.data,
          });
        }else{
          //免费订单直接跳转到支付详情
          that.submitSuccess()
        }
      }
		},function(res){
			wx.showToast({
				title: res.msg,
				icon: 'none'
			})
		});
  },

（2）wx.requestPayment 接收参数 调起支付

// jsapi方式支付
  jsapiPay: function(param) {
    const that = this;
    console.log(param);
    wx.requestPayment({
      ...param,
      success (res) { 
        console.log(res,'--success');
        // 支付成功
        that.submitSuccess()
      },
      fail (res) { 
        console.log(res,'fail-----------');
        if (res.errMsg == 'requestPayment:fail cancel') {
          // 用户取消支付
          that.submitCancel()
          return;
        }
        that.submitFail()
      }
    })
  },

 （3）用户取消支付

  // 用户取消支付,返回进入的页面
  submitCancel: function() {
    try {
      wx.hideLoading()
    } catch(e){}
    setTimeout(() => {
      wx.showToast({
        title: "购买失败",
        // icon: 'success',
        icon: 'none',
        duration: 1000
      });
    }, 500)
    // setTimeout(() => {
    //   // 返回确认订单页面
    //   wx.navigateBack()
    // }, 1500);
  },

（4）用户支付失败 

 // 支付失败
    submitFail: function(err) {
      const that = this;
      try {
        wx.hideLoading()
      } catch(e){}
      setTimeout(() => {
        wx.showToast({
          title: err || "订单支付失败，请重新支付",
          // icon: 'success',
          icon: 'none',
          duration: 1000
        });
      }, 500)
      that.setData({btnText : "重新支付"})
    },

（5）支付成功 

  // 购买成功之后跳转到详情页
  submitSuccess: function() {
    const that = this;
    wx.redirectTo({
      url: `/pages/orderCenter/orderSuccess/orderSuccess?orderNumber=${that.data.orderNumber}`,
    })
  },

三、js完整代码

var request = require('../../../utils/request');
import { detail} from "../../../utils/api/index";
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    headerOpt:{
      showGoHome:false,
      title:"确认订单",
    },
    btnText:'提交订单',
    form:{},
    detailInfo:{},
    orderNumber:''//订单编号
  },
  addOrder(){
    let that=this
	 request.request('POST','接口地址',this.data.form).then(function(result){
      if(result.data){
        that.setData({
          orderNumber:result.data.orderNumber
        })
        //appid存在为付费订单，免费订单仅返回orderNumber
        if(result.data.appId){
          that.jsapiPay({
            ...result.data,
          });
        }else{
          //免费订单直接跳转到支付详情
          that.submitSuccess()
        }
      }
		},function(res){
			wx.showToast({
				title: res.msg,
				icon: 'none'
			})
		});
  },
  // jsapi方式支付
  jsapiPay: function(param) {
    const that = this;
    console.log(param);
    wx.requestPayment({
      ...param,
      success (res) { 
        // 支付成功
        that.submitSuccess()
      },
      fail (res) { 
        if (res.errMsg == 'requestPayment:fail cancel') {
          // 用户取消支付
          that.submitCancel()
          return;
        }
        that.submitFail()
      }
    })
  },
  
  // 购买成功之后跳转到详情页
  submitSuccess: function() {
    const that = this;
    wx.redirectTo({
      url: '',
    })
  },
    // 用户取消支付,返回进入的页面
  submitCancel: function() {
    try {
      wx.hideLoading()
    } catch(e){}
    setTimeout(() => {
      wx.showToast({
        title: "购买失败",
        // icon: 'success',
        icon: 'none',
        duration: 1000
      });
    }, 500)
    // setTimeout(() => {
    //   // 返回确认订单页面
    //   wx.navigateBack()
    // }, 1500);
  },
    // 支付失败
    submitFail: function(err) {
      const that = this;
      try {
        wx.hideLoading()
      } catch(e){}
      setTimeout(() => {
        wx.showToast({
          title: err || "订单支付失败，请重新支付",
          // icon: 'success',
          icon: 'none',
          duration: 1000
        });
      }, 500)
      that.setData({btnText : "重新支付"})
    },
  //获取对应的支付信息
  getDetail(id){
    detail(id).then((res)=>{
      // console.log(res);
      if(res.data){
        this.setData({
          detailInfo:res.data
        })
        let price=this.data.form.type==1?res.data.twPrice:res.data.spPrice
        // 处理小数点
        this.dealNum(price);
      }
    })
  },
  dealNum: function(price) {
    let arr = (price + "").split(".");
    this.setData({
      'detailInfo.current': arr[0],
    })
    if (arr[1]) {
      this.setData({
        'detailInfo.point': arr[1],
      })
    }
    this.setData({
      'detailInfo.current': arr[0],
      'detailInfo.point': arr[1],
    })
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if(options.form){
      let form=JSON.parse(decodeURIComponent(options.form))
      this.setData({
        form:form
      })
      this.getDetail(form.id)
    }
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})