微信小程序支付功能的前端代码实例

varapp = getApp();

Page({

  data: {},

  onLoad:function(options) {

    // 页面初始化 options为页面跳转所带来的参数

    varthat =this

    //登陆获取code

    wx.login({

      success:function(res) {

        console.log(res.code)

        //获取openid

        that.getOpenId(res.code)

      }

    });

  },

  getOpenId:function(code) {

    varthat =this;

    wx.request({

      url:"https://api.weixin.qq.com/sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code="+ code +"&grant_type=authorization_code",

      data: {},

      method:'GET',

      success:function(res) {

        that.generateOrder(res.data.openid)

      },

      fail:function() {

        // fail

      },

      complete:function() {

        // complete

      }

    })

  },

  /**生成商户订单 */

  generateOrder:function(openid) {

    varthat =this

    //统一支付

    wx.request({

      url:'后台路径',

      method:'GET',

      data: {

        gfee:'商品价钱',

        gname:'商品名称',

        openId:openid

        （商品价钱和商品名称根据自身需要是否传值,openid为必传）

      },

      success:function(res) {

        varpay = res.data

        //发起支付

        vartimeStamp = pay[0].timeStamp;

        varpackages = pay[0].package;

        varpaySign = pay[0].paySign;

        varnonceStr = pay[0].nonceStr;

        varparam = {"timeStamp": timeStamp,"package": packages,"paySign": paySign,"signType":"MD5","nonceStr": nonceStr };

        that.pay(param)

      },

    })

  },

  /* 支付  */

  pay:function(param) {

    console.log("支付")

    console.log(param)

    wx.requestPayment({

      timeStamp: param.timeStamp,

      nonceStr: param.nonceStr,

      package: param.package,

      signType: param.signType,

      paySign: param.paySign,

      success:function(res) {

        // success

        wx.navigateBack({

          delta: 1,// 回退前 delta(默认为1) 页面

          success:function(res) {

            wx.showToast({

              title:'支付成功',

              icon:'success',

              duration: 2000

            })

          },

          fail:function() {

            // fail

          },

          complete:function() {

            // complete

          }

        })

      },

      fail:function(res) {

        // fail

      },

      complete:function() {

        // complete

      }

    })

  }

})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 支付功能（前端）的实现

只提供微信小程序端代码：

varapp = getApp();

Page({

  data: {},

  onLoad:function(options) {

    // 页面初始化 options为页面跳转所带来的参数

    varthat =this

    //登陆获取code

    wx.login({

      success:function(res) {

        console.log(res.code)

        //获取openid

        that.getOpenId(res.code)

      }

    });

  },

  getOpenId:function(code) {

    varthat =this;

    wx.request({

      url:"https://api.weixin.qq.com/sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code="+ code +"&grant_type=authorization_code",

      data: {},

      method:'GET',

      success:function(res) {

        that.generateOrder(res.data.openid)

      },

      fail:function() {

        // fail

      },

      complete:function() {

        // complete

      }

    })

  },

  /**生成商户订单 */

  generateOrder:function(openid) {

    varthat =this

    //统一支付

    wx.request({

      url:'后台路径',

      method:'GET',

      data: {

        gfee:'商品价钱',

        gname:'商品名称',

        openId:openid

        （商品价钱和商品名称根据自身需要是否传值,openid为必传）

      },

      success:function(res) {

        varpay = res.data

        //发起支付

        vartimeStamp = pay[0].timeStamp;

        varpackages = pay[0].package;

        varpaySign = pay[0].paySign;

        varnonceStr = pay[0].nonceStr;

        varparam = {"timeStamp": timeStamp,"package": packages,"paySign": paySign,"signType":"MD5","nonceStr": nonceStr };

        that.pay(param)

      },

    })

  },

  /* 支付  */

  pay:function(param) {

    console.log("支付")

    console.log(param)

    wx.requestPayment({

      timeStamp: param.timeStamp,

      nonceStr: param.nonceStr,

      package: param.package,

      signType: param.signType,

      paySign: param.paySign,

      success:function(res) {

        // success

        wx.navigateBack({

          delta: 1,// 回退前 delta(默认为1) 页面

          success:function(res) {

            wx.showToast({

              title:'支付成功',

              icon:'success',

              duration: 2000

            })

          },

          fail:function() {

            // fail

          },

          complete:function() {

            // complete

          }

        })

      },

      fail:function(res) {

        // fail

      },

      complete:function() {

        // complete

      }

    })

  }

})