小程序web-view调用小程序支付通道

最新推荐文章于 2025-10-15 15:15:56 发布

原创

最新推荐文章于 2025-10-15 15:15:56 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨如何通过在小程序内的web-view组件调用小程序自身的支付接口，实现利用小程序的支付功能。首先，需要在网页中引入最新的支付SDK，然后进行相应配置和调用，以完成交易支付过程。

web-view没法使用微信公众号的支付通道调起微信支付

但是可以借用小程序的支付通道

1.在网页中引入最新的SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2. 点击支付时判断是否在小程序框体内，带入参数跳转到小程序页面

if (window.__wxjs_environment === 'miniprogram') {
  wx.miniProgram.navigateTo({
    url: '/pages/wxpay/wxpay?orderid=' + id
  })
}

3. 小程序支付页面获取传入的参数,待支付完成后再调用回退指令返回web-view

Page({
  onLoad: function(options) {
    console.log(options)
    this.getData(options)
  },
  getData: function($data) {
    var that = this
    wx.request({
      url: 'getData_api',
      method: 'POST',
      data: $data,
      success: (res) => {
        console.log(res)
        that.pay(res.data.data)
      }
    })
  },
  pay: function($data) {
    console.log($data)
    var that = this
    wx.requestPayment({
      timeStamp: $data.timeStamp,