uniapp做的H5端发布在公众号里吊起微信支付原创

原创
小哥 3年前 (2022-10-22) 阅读数 45 #大杂烩
  • NPM安装方法(不会使用)NPM不要这样使用)

    npm install jweixin-module --save

或下载使用情况
下载地址:https://unpkg.com/jweixin-module@1.6.0/lib/index.js


**

你做好准备了吗?

第一步 ,介绍我们只想使用的文件。
const wx = require(‘jweixin-module’);


**

第二步 ,然后你需要连接一个接口,请求回一些签名或你需要的东西来放下微信付款(带后端)
几乎就像这个返回结果

记得parse就这么做吧!!把数据拿回来!那就告诉微信你想做什么 ,所以要config

 jweixin.config({
        debug: true, // 打开调试模式,所有的电话api的返回值将在客户端。alertOut,要查看传入参数,您可以。pc终端打开,参数信息通过log命中,仅限于在pc只有在最后才会打印出来。
        appId: w_pay.appId, // 必需的公共号码的唯一标识
        timestamp: w_pay.timestamp, // 必填项,生成签名时间戳
        nonceStr: w_pay.nonceStr, // 生成随机签名字符串所需
        signature: w_pay.signature, // 必填项,签名
        jsApiList: w_pay.jsApiList // 必填,必填JS接口列表
 });

第三步 , 开始取消付款
与后端签名等信息

          wx.$api.index.wpayH5Info(location.href.split(#)[0], chooseWXPay).then(res1 => {
                let w_pay = JSON.parse(res1.data)
                console.log(w_pay, w_pay)
                // jweixin.config({
                //   debug: true, // 打开调试模式,所有的电话api的返回值将在客户端。alertOut,要查看传入参数,您可以。pc终端打开,参数信息通过log命中,仅限于在pc只有在最后才会打印出来。
                //   appId: w_pay.appId, // 必需的公共号码的唯一标识
                //   timestamp: w_pay.timestamp, // 必填项,生成签名时间戳
                //   nonceStr: w_pay.nonceStr, // 生成随机签名字符串所需
                //   signature: w_pay.signature, // 必填项,签名
                //   jsApiList: w_pay.jsApiList // 必填,必填JS接口列表q
                // });
                jweixin.config(w_pay);
                jweixin.ready(() => {
                  wx.$api.index.wechatH5(res.data.trade_no).then(res2 => {
                    let payInfo = JSON.parse(res2.data);
                    console.log(payInfo, payInfo)
                    jweixin.chooseWXPay({
                      timestamp: payInfo
                        .timeStamp, // 交签时间戳,关注微信jssdk所有用途在timestamp字段都是小写的。但是,最新版本的支付后台会生成签名timeStamp字段名称需要大写S字符
                      nonceStr: payInfo.nonceStr, // 付款签名随机字符串,不能更长 32 位
                      package: payInfo.package, // 统一支付接口退货prepay_id参数值,以如下格式提交:prepay_id=***)
                      signType: payInfo.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式V2统一订单的签名格式一致。
                      paySign: payInfo.paySign, // 支付签名
                      success: function(res) {
                        console.log(res, 付款退货结果)
                        // 支付成功后的回调函数
                        if (res.errMsg == "requestPayment:ok") {
                          wx.showToast({
                            title: 支付成功,
                            icon: success
                          });
                          setTimeout(() => {
                            if (this.isdeliver == 1) {
                              wx.reLaunch({
                                url: /pages/order/order?orderType=rightsCoupons
                              });
                            } else {
                              wx.reLaunch({
                                url: /pages/order/order?orderType=rights
                              });
                            }
                          }, 3000)
                        }
                      },
                      fail: res => {
                        if (this.isdeliver == 1) {
                          wx.reLaunch({
                            url: /pages/order/order?orderType=rightsCoupons&stateType=unpay
                          });
                        } else {
                          wx.reLaunch({
                            url: /pages/order/order?orderType=rights&stateType=unpay
                          })
                        }
                      }
                    })
                  })
                })
              }).catch(err => {
                wx.showToast({
                  title: err.message,
                  icon: none
                })
              })

**

总结:Uni-app - H5-电话微信付款步骤

1.引入jssdk

2.与服务端合作config数据

3.config成功后直接在与服务端合作签名数据!

4.解除签字付款

对应对应的代码,敲打自己
**

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门