uniapp前端实现微信支付(小程序、公众号H5、app)

06-01 389阅读

这段时间通过uniapp开发一个三端合一的项目,涉及到不同平台的支付方式,这里为大家简单介绍一下,希望能有所帮助;
阅读: 微信支付文档

一、微信小程序支付

  1. 通过wx.login()获取code、调用后端接口获取openid;
wx.login({
   
  success (res) {
   
    if (res.code) {
   
      //发起网络请求获取openid,一般是访问后端封装好的接口,也可以通过访问微信官方接口获取
      uni.request({
   
         url: '后端接口地址,获取openid',
         method: 'GET',
         success(res) {
   
           //获取openid:用户真实唯一id进行保存
           console.log(res.data.openid)
        }
      })
    } else {
   
      console.log('登录失败!' + res.errMsg)
    }
  }
})
  1. 调用后端接口创建订单,获取orderId;
uni.request({
   
  url: '后端接口地址,获取订单id',
  method: 'POST',
  data: {
    传入接口需要的参数,如商品金额,商品个数等 },
  success(res) {
   
    console.log(res.data.orderId)
  }
})
  1. 调用后端接口获取支付核心参数,预支付;
uni.request({
   
  url: '后端接口地址,获取支付核心数据',
  method: 'POST',
  data: {
    传入接口需要的参数,如订单ID,openId等 },
  success(res) {
   
    console.log(res.data)
    //接口会返回以下核心参数
    //timeStamp 时间戳
    //nonceStr  随机字符串
    //package   统一下单接口返回的 prepay_id 参数值
    //signType  签名算法
    //paySign   签名
  }
})
  1. 通过支付核心参数调用wx.requestPayment()发起支付;
  //调用微信官方支付接口弹出付款界面,输入密码扣款
  wx.requestPayment({
   
     timeStamp,  //时间戳
     nonceStr,   //随机字符串
     package,    //prepay_id
     signType,   //签名算法MD5
     paySign,    //签名
     success (res) {
   
       if (res.errMsg == "requestPayment:ok")
uniapp前端实现微信支付(小程序、公众号H5、app)
(图片来源网络,侵删)
uniapp前端实现微信支付(小程序、公众号H5、app)
(图片来源网络,侵删)
uniapp前端实现微信支付(小程序、公众号H5、app)
(图片来源网络,侵删)
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们。

目录[+]

取消
微信二维码
微信二维码
支付宝二维码