基于VUE、HTML5+ API Reference微信支付（APP）

最新推荐文章于 2024-08-01 09:51:44 发布

Ya。

最新推荐文章于 2024-08-01 09:51:44 发布

阅读量563

点赞数

分类专栏： VUE 文章标签： javascript html5 vue

本文链接：https://blog.csdn.net/weixin_45537155/article/details/107513789

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于VUE、HTML5+ API Reference微信支付（APP）

1.在src目录下创建pay.js，用作公共支付js

2.定义全局支付方法

全局定义支付方式Vue.prototype.plusReady，

import axios from 'axios'
import router from './router'
export function install(Vue, option) {
  // 支付
  Vue.prototype.plusReady = function (data) {
    if (window.plus) {
      wxpay(data)
    } else {
    // 扩展API加载完毕，现在可以正常调用扩展API
      document.addEventListener(
        'plusready',
        function () {
          wxpay(data)
        },
        false
      )
    }
  }
}

*使用window.plus判断是为了要兼容老版本的plusready事件
*判断当前环境中是否有plus对象，如果有，直接调用wxpay(),没有的话，扩展API加载完毕就可正常调用（plus是5+Runtime的内部对象）

3.获取支付通道并设置为‘微信支付’

function zhifu(data) {
    var channel = null
    try {
      plus.payment.getChannels(
        function (channels) {
          channel = channels.find(i => {
            return i.id == 'wxpay'
          })
          ......
        },
        function (e) {
          plus.nativeUI.alert('获取支付通道失败：' + e.message)
        }
      )
    } catch (e) {
    }
  }

plus.payment.getChannels(successCB, errorCB);支付成功回调函数中会返回支持的支付方式，遍历选择‘wxpay’，存为变量

4.调起微信支付

将金额，订单id，type传给后端（具体看后端需要什么|data），后端需要返回调起支付需要的appid、noncestr、package、partnerid、prepayid、sign、timestamp,拿到信息之后调起微信支付

plus.payment.request(channel, statement, successCB, errorCB);

		axios
            .get(`接口地址`, {params: data})
            .then(val => {
              plus.payment.request(
                channel,
                val.data.data,
                function (result) {
                  plus.nativeUI.alert('支付成功', function () {
                  	...
                    支付成功后的操作
                    ...
                  })
                },
                function (error) {
                  plus.nativeUI.alert('支付失败', function () {
                  ...
                  支付失败后的操作
                  ...
                  })
                }
              )
            })
            .catch(err => {
              plus.nativeUI.alert('网络不佳')
            })

调用指定的支付通道进行支付操作，其中statement包含支付操作的相关信息，支付模块将弹出支付界面供用户进行支付信息的输入确认操作。.
channel: ( PaymentChannel ) 必选支付通道
指定支付操作的通道，通过getChannels接口获取。
statement: ( String | JSON | OrderStatementIAP ) 必选支付订单信息
支付订单信息，由支付通道定义的数据格式，通常是由业务服务器生成或向支付服务器获取，是经过加密的字符串信息。