微信小程序webview中,拉起小程序的微信支付

  • A+
所属分类:JS PHP

由于最近公司业务调整,需要在小程序的webview中拉起小程序的微信支付,经过各种爬坑和搜索,找到如下结果方法,供大家参考:

一、判断小程序浏览器

使用 USER_AGENT判断小程序还是公众号浏览器还是APP:

if(strstr($_SERVER['HTTP_USER_AGENT'],'mini')){
                $isminiapp= 1;
}

$payParam = array(); //支付参数

然后生成支付的参数,支付的签名和统一下单不在此细说,可自行百度或者使用各种开源代码

二、将支付的参数返回给小程序

首先使用php引入一个小程序的js包:

echo '<script type="text/javascript" src='https://res.wx.qq.com/open/js/jweixin-1.3.2.js'></script>';

然后跳转给小程序的某个页面:

echo '<script> wx.miniProgram.navigateTo({
            url: '/pages/login/login?json='.json_encode($payParam);
        })';

url 的地址由小程序提供

三、在小程序里接收此json参数,拉起微信支付

onLoad: function (obj) {
    console.log(obj)
    //获取options的订单Id  
    var orderId = obj.orderId;
 
    //调起微信支付  
    wx.requestPayment({
          'appId': '',
      'timeStamp': obj.timestamp,
      'nonceStr': obj.nonceStr,
      'package': 'prepay_id=' + obj.prepay_id,
      'signType': obj.signType,
      'paySign': obj.paySign,
      //小程序微信支付成功的回调通知  
      'success': function (res) {
        //定义小程序页面集合  
        var pages = getCurrentPages();
        //当前页面 (wxpay page)  
        var currPage = pages[pages.length - 1];
        //上一个页面 (index page)   
        var prevPage = pages[pages.length - 2];
        //通过page.setData方法使index的webview 重新加载url  有点类似于后台刷新页面  
        //此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。  
        prevPage.setData({
          url: '',
 
        }),
          //小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了  
          //微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作  
          wx.navigateBack();
      },
      //小程序支付失败的回调通知  
      'fail': function (res) {
        console.log("支付失败"),
          console.log(res)
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];
        var prevPage = pages[pages.length - 2];
        console.log("准备修改数据")
        prevPage.setData({
          url: "https://xxxxxxxxxx/wx_isPayment.jhtml?orderId=" + orderId + '&ispay=0',
        }),
          console.log("准备结束页面")
        wx.navigateBack();
      }
    })  
  },

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: