大家好，欢迎来到IT知识分享网。
声明：本文只作学习研究，禁止用于非法用途，否则后果自负，如有侵权，请告知删除，谢谢！
💓 博客主页：这个头像胖嘟嘟
⏩ 收录文章：微信支付（微信公众号）
🎉欢迎大家点赞👍评论📝收藏⭐文章
前言
目录
前段时间公司项目需要接入微信支付，因此研究了一下如何使用微信支付。和支付宝支付相比，微信支付相对复杂一些，需要配置的东西更多，限制也更多。经过两天的研究，终于搞定微信支付，在这里对于使用微信支付的经验进行一些总结。
微信公众号中微信支付
我们这是一个微信公众号内的支付调起，不同于 h5支付，这个支付只能出现在公众号，在别的地方不能生效。
接到这个需求整个人是懵的，因为之前根本没有接触过或者做过微信公众号的支付，好在之前做过支付宝支付页面的调起，类比推理一下，还是感觉比较简单的。
项目需求思路
找到原来项目，复制一份，因为之前项目里面已经有支付宝支付了，我们要做公众号的微信制度，复制了一份代码，然后开始修改里面的代码
遇到问题
修改完结构以后发现，支付调起的时候报错，这是就要问比较熟悉这块业务的同事，我选择了，人美心善的静怡，她也是我们这月周会的负责人，我们每月的周会，是有我们小组里面每个成员轮流来负责的。
解决方案
会后负责人特别的负责人，让我去找她解决这个问题，因为之前没弄过导致了一些问题出现了沟通上的障碍
沟通问题梳理
1 .这个微信支付，不是走原来的那一套支付，虽然代码可以用，也可以调起但是存在细微差别，我一直在尝试看原来的一套代码逻辑能不能沿用，确没有跟他明确这个问题，静怡跟他沟通后才知道这块 h5的支付是不支持的。我没问清楚。
2.他让我调的接口里面有两个接口，一个是他新写的接口，一个是原来的接口，我只把注意力放到了他新让我调的接口，没有注意另外一个接口，而另外一个接口里面返回的数据，是我需要的数据，这个数据是要拿来配置微信支付的配置返回。
3.关于新一套里面 code 码，换取 open_id.他给我一个链接，这个链接要放在微信开发者工具上面才能看到 code 码，正常的浏览器上面是看不到的，我在获取 code 时就在使用这个工具，但是这个工具只能看到 code 码，却在上面修改代码，实时看到效果，需要把代码发到测试环境才可以看到我们写的东西对不对。
这个 code 码用过一次，5 分钟之后就会失效，要不断的从新拿到新的code 码才能看到效果，后端当时给我说了有一个 code 码一直都能返回值，有效，我当时由于没做过这个东西根本不知道他说的啥意思，后来静怡经过沟通以后知道了，这个可以 code 可以写死一直有效，就一直能获取到这个 open_id 的值。
4.我不能实时的看到我代码的效果，和接口是否返回了我需要的数据，这是我们需要在我们的代码上面加上一个工具，我们就可以看到这个发送接口的数据。这个工具是 VConsole,这个工具在 ssr 项目里面就有很多直接搜索就可以看到这个工具是怎么用的。
工具使用
步骤如下：
在项目的 index.html 里面引入 js 文件，和使用启动的代码，我当时没看清楚，以为放在 script 标签的下面就行了，我写在了 vue 里面结果导致报错，后来经过排查发现我的书写位置出错了，我又从新修改了书写的位置
<script src='https://s4.ssl.qhres2.com/static/4f2a7ad8aabc57ac.js'></script> <script> if(window.location.search.indexOf('debug=1') > -1 || window.location.host == 'activity.test.huajiao.com') { var vConsole = new VConsole(); } </script> 这个是代码应该书写的位置，写上后就可以看到你的强求结果，返回值，就可以进行调试了。
结构书写
书写结构，调试相关代码逻辑
<div class="submit" :class="{'inZFB': isInZFB}"> <button v-if="!isInZFB" class="btn wechat" @click="handlerOpenModal('wechat', 0)" > <i class="icon wechat" /> <div class="btn-text"> <div class="btn-title"> 微信支付 </div> <div class="btn-note"> 最高10,000元，秒到 </div> </div> </button> <button class="btn alipay" @click="handlerOpenModal('alipay', 1)" > <i class="icon alipay" /> <div class="btn-text"> <div class="btn-title"> 支付宝 </div> <div class="btn-note"> 最高200,000元，秒到 </div> </div> </button> </div>这个是微信支付，支付宝支付的相关结构，里面的样式问题我就不再粘贴，可以根据自己的需求进行书写
// 控制充值确认模态框显示隐藏
结构样式中的点击事件，提示和弹出模态框之类的操作。
handlerOpenModal(payment, index) { if(!this.checked) { this.$hf.ui.showToast('请勾选用户充值协议', 1500); return; } if(!this.verifyRechargeForm(payment)) return; this.currIndex = index; this.modal.payment = payment; this.modal.isVisible = true; },// 表单验证
verifyRechargeForm(payment) { const result = []; // 校验元气用户ID输入是否正确 if(!this.userInfo.uid) { result.push('您的元气帐户有误'); } console.log('payment channel:', payment); if(result.length) { const [message] = result; this.$hf.ui.showToast(message, 1500); return false; } return true; },模态框里面的表单校验事件
<!-- 确认支付模态框 --> <Modal :is-visible="modal.isVisible"> <div class="modal-content"> <div class="modal-body"> <div class="description"> <p>您将为如下元气号充值{
{ selectedChargepack.coin }}币</p> <p>需支付{
{ selectedChargepack.amount }}元</p> </div> <div class="user-info"> <div class="user-avatar"> <img :src="userInfo.avatar || defaultAvatar" alt="" > </div> <div class="user-label"> <p class="user-nickname text-nowrap"> {
{ userInfo.nickname }} </p> <p class="user-uid text-nowrap"> <template v-if="userInfo.display_uid"> 元气靓号: {
{ userInfo.display_uid }} </template> <template v-else> 元气号: {
{ userInfo.uid }} </template> </p> </div> </div> </div> <div class="modal-action"> <button class="btn cancel" @click="handlerCloseModal" > 再想想 </button> <button class="btn submit" @click="submitRechargeForm(modal.payment)" > 确认支付 </button> </div> </div> </Modal>这个是弹出模态框里面的模态框
// 提交表单
async submitRechargeForm(payment) { const optionId = this.selectedChargepack.option_id || ''; const { uid } = this.userInfo; const [err, res] = await this.$hf.req.rechargeSubmit({ option_id: optionId, open_id: this.open_id || 'oNFsX6W9R09MBRYWoTzWKw6vC8kY', trade_channel: this.paymentChannel[payment], userid: uid, deal_confirm: 1, }); console.log(res.pay_info, 'payInfo'); if(!err) { console.log('res', res); if (this.open_id === '') { window.location.href = res.pay_info; } const { appid, noncestr, timestamp, sign, prepayid } = JSON.parse(res.pay_info); this.wxParams = { // eslint-disable-next-line max-len debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appid, // 必填，公众号的唯一标识 timestamp, // 必填，生成签名的时间戳 nonceStr: noncestr, // 必填，生成签名的随机串 signature: sign, // 必填，签名 package: `prepay_id=${prepayid}` }; window.wx.config(this.wxParams); debugger; window.wx.ready(() => { this.checkWXJsbridge(this.wxParams); }); this.getRechargeStatus(res.order_id); this.handlerCloseModal(); // 关闭支付二次确认弹窗 } /* eslint-enable camelcase */ // if(!this.isInZFB) { // Object.assign(params, { source, sourceType }); // await this.executeGeneralPay(params); // } else { // localStorage.setItem('lastRchargeUid', uid); // this.executeZFBPay(params); // } },这个是模态框里面的确认提交的事件，就是在这个接口里面要给他多加一个参数
open_id: this.open_id || ‘oNFsX6W9R09MBRYWoTzWKw6vC8kY’,
给这个参数的 open_id 取值需要新增加一个接口，在这个接口里面拿到我们需要的 open_id 的值
// 获取微信用户信息
async checkUserStatusWX() { if(this.isRequireLogin && this.userInfo.uid) { console.log(this.userInfo, 'this.userInfo'); const [err, data] = await this.$hf.req.getWeixinUserInfo({ weixin_code: this.$root.code }); console.log(data.open_id, 'code是什么'); this.open_id = data?.open_id; if(err) { console.log('获取用户信息失败'); return false; } console.log(data); // this.userType = data.user_type; // 不支持 } },在这个接口里面拿到 open_id
在提交表单的这个接口里面书写调起微信支付的逻辑，用 JSAPI 来调起，链接如下
文档
https://pay.weixin..com/wiki/doc/apiv3/apis/chapter3_1_4.shtml
在这个链接里面可以看到使用的方法，说明文档
https://developers.weixin..com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58
Js-sdk说明文档
加载了微信的sdk之后window上就挂载了wx和weixinjsbridge了，所以这些方法应该都可以用
接口返回了我们需要的数据，把返回的数据解构出来，拿到想要的数据，配置微信支付的配置，需要传递的数据在下面的链接里面
https://pay.weixin..com/wiki/doc/apiv3/apis/chapter3_1_4.shtml
wx.ready是微信JS-SDK提供的一个用于检测微信客户端是否准备就绪的回调函数，需要在微信配置文件中进行设置。
配置完成以后查看是否准备就绪，用 ready函数，在里面调用方法，把我们配置好的参数传递进去
checkWXJsbridge() { console.log(typeof window.WeixinJSBridge); if (typeof window.WeixinJSBridge === 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', this.readyWechatPay, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', this.readyWechatPay); document.attachEvent('onWeixinJSBridgeReady', this.readyWechatPay); } } else { console.log('WX PAY'); this.readyWechatPay(); } }, readyWechatPay() { console.log('WX pay start'); window.WeixinJSBridge.invoke('getBrandWCPayRequest', { ...this.wxParams, signType: 'RSA', // 微信签名方式： paySign: this.wxParams.signature // 微信签名 }, (res) => { if (res.err_msg === 'get_brand_wcpay_request:ok') { console.log(res.err_msg); } }); },这两个函数是官网里面配置的函数，直接在里面复制，然后拿过来使用即可。wx.ready 的使用博文参考文档这个地方在调用方法的时候要加上window，因为这个变量是绑定到window上的，直接写eslint可能会算他未定义。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/120018.html
