小程序插件里面怎么使用微信支付？？？

文章亮点

1、小程序插件从零开始怎么接入微信支付？？？

2、遇到的坑在哪，需要怎么补？？,怎么解决？

插件里面使用微信支付的方式有两种

1、宿主小程序暴露微信支付方法给微信插件使用。 2、微信插件调用下面具体方法，触发微信小程序支付页功能（建议使用这个），？？？为什么具体会说明

支付开通的前置条件就不在叙述了官网有

developers.weixin.qq.com/miniprogram…

方案一：

在微信里面，我们通常会暴露一个文件里面的方法给微信插件使用，比如拉起授权、定位等等 那微信里面的支付方法页可以暴露出去

1、宿主引入插件 app.js 文件里面

    'plugins': {
      '插件名': {
        'version':'版本号',
        'export': 'pi-common.js （宿主暴露出去的文件',
        'provider':'插件appid'
      }

2、暴露文件 pi-common.js 里面的方法

module.exports = {
    // 宿主暴露的微信小程序支付方法
    requestPayment(object) {
              wx.requestPayment(object)
            },
}

3、小程序插件里面使用 任意的插件 page.js里面

const miniProgramExports = requireMiniProgram()
            miniProgramExports.requestPayment({
                timeStamp: time_stamp,
                nonceStr: nonce_str,
                package: packages,
                signType: sign_type,
                paySign: pay_sign,
                success(res) {
                    wx.showLoading({title: '等待支付结果'})
                    self.payCount = 10
                    self.waitPayResult(function () {
                        setTimeout(() => {
                            wx.hideLoading()
                        }, 1000)
                    })
                },
                fail(res) {
                    // 支付失败
                    console.log(res, '支付失败')
                    self.payFail()
                }
            })

方案二（推荐）

1、 配置功能页函数

支付功能页需要插件开发者在插件所有者小程序中提供一个函数来响应插件中的支付调用。即，在插件中跳转到支付功能页或调用 wx.requestPluginPayment 时，这个函数就会在合适的时机被调用，来帮助完成支付。如果不提供功能页函数，功能页调用将通过 fail 事件返回失败。 支付功能页函数应以导出函数的形式在宿主提供的根目录下的 functional-pages/request-payment.js 文件中，名为 beforeRequestPayment。该函数应接收两个参数。如下：

exports.beforeRequestPayment = function (paymentArgs, callback) {
    var requestPaymentArgs = JSON.parse(paymentArgs.tn);
    requestPaymentArgs.package = requestPaymentArgs.packageVal;
    delete requestPaymentArgs.packageVal;
    callback(null, requestPaymentArgs);
}

2、插件里面使用插件调用小程序支付功能页的方法

<!-- plugin/components/pay.wxml -->
<button bindtap="handlePay">支付 0.01 元</button>

// plugin/components/pay.js
Component({
  data: {
    fee: 1,             // 支付金额，单位为分
    paymentArgs: 'A', // 将传递到功能页函数的自定义参数
    currencyType: 'USD' // 货币符号，页面显示货币简写 US$ 
    version: 'develop', // 上线时，version 应改为 "release"，并确保插件所有者小程序已经发布
  },
  methods: {
    handlePay() {
        const { fee, paymentArgs, currencyType, version } = this.data
        wx.requestPluginPayment({
            fee,
            paymentArgs,
            currencyType,
            version,
            success(r) {
                console.log(r)
            },
            fail(e) {
                console.error(e)
            }
        })
    }
  }
})

坑点：--------重要--------- 注意：功能页函数不应 require 其他非 functional-pages 目录中的文件，其他非 functional-pages 目录中的文件也不应 require 这个目录中的文件。这样的 require 调用在未来将不被支持。

这个目录和文件应当被放置在插件所有者小程序代码中（而非插件代码中），它是插件所有者小程序的一部分（而非插件的一部分）。  如果需要新增或更改这段代码，需要发布插件所有者小程序，才能在正式版中生效；需要重新预览插件所有者小程序，才能在开发版中生效。

总结： 方案一：违背了微信一开始的通用性，别的插件如果调用就需要宿主暴露支付方法 方案二（推荐）：别的插件只要使用wx.requestPluginPayment 就可以 即调即用，非常方便。

遇到问题可以进群提问----------- 下面------------------------