小程序内嵌webview触发小程序原生方法进行支付

小程序内嵌webview无法进行h5的支付 所以需要通过webview触发小程序的支付 具体操作如下

1.h5部分代码

首先引入jweixin

然后判断一下是否为小程序环境 代码如下

// 判断环境
function checkMiniProgram() {
  // 判断是否在微信小程序中打开
  var ua = window.navigator.userAgent.toLowerCase();
  let that = this;
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){      //判断是否是微信环境
    //微信环境下
    wx.miniProgram.getEnv(function(res) {
      if (res.miniprogram) {
        // 小程序环境下逻辑
        console.log('小程序环境下逻辑');
      }else {
        //非小程序环境下逻辑
        console.log('非小程序环境下逻辑');
      }
    })
  }else{
    //非微信环境逻辑
    console.log('非微信环境逻辑');
  }
}

然后在小程序环境中触发小程序行为

function miniProgramPay() {
  var pageParams = encodeURIComponent(JSON.stringify('参数'));
  var url = `../payMent/payMent?pageParams=${pageParams}`;//支付的路径
  wx.miniProgram.navigateTo({
    url: url
  });
}

encodeURIComponent 这里是防止参数中带有?或者= 导致小程序参数被截断

然后触发小程序的页面跳转后 在支付页接参数

2.小程序部分代码

let params = {};
if(options.pageParams) {
  params = JSON.parse(decodeURIComponent(options.pageParams));
}

因为h5中进行了encodeURIComponent 所以需要在小程序中decodeURIComponent

然后正常掉小程序方法支付即可

需要返回上一级webview页面的话 可以通过

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 获取上一页

在当前的请求接口中获取要替换webview的页面链接 然后进行

prevPage.setData({
  pageUrl : resultUrl //resultUrl为支付页返回的webview路径 pageUrl为webView页面的参数
})
wx.navigateBack({ //返回上一级页面
  delta: 0,
})

即可替换上一级页面链接并返回webview页面。