vue支付项目-APP微信支付功能

置顶 已于 2023-07-24 14:26:06 修改
阅读量6.3k 收藏 63
点赞数 16
CC 4.0 BY-SA版权
分类专栏： vue项目非常实用的功能整理 Vue javascript 文章标签： 前端 javascript vue.js ios 微信
于 2022-10-21 13:02:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SmartJunTao/article/details/127442449
本文介绍了在Vue项目中实现APP安卓、iOS微信支付功能的详细步骤，包括会员支付页面、选择支付方式、唤起微信支付及处理支付结果。技术选型为Vue+Vant-ui，涉及与安卓、iOS原生方法的交互，并提供了支付流程的关键点和注意事项。

APP安卓、ios微信支付功能

目录

APP安卓、ios微信支付功能

功能介绍

会员支付功能页面

 会员开通或者续费页面

 商品选择和协议查看（可忽略此步骤）

选择支付方式弹窗

选择支付类型

 点击确认支付，唤起安卓微信支付

处理安卓、ios微信支付后返回的结果  

mounted页面加载完成 ，安卓、支付方法调用

功能介绍

技术选型：Vue+Vant-ui

功能介绍：

1.点击按钮开通或者续费，会验证是否选择会员商品以及对协议是否查看选中（这里根据项目需要自行验证，可忽略），验证通过打开选择支付方式弹窗页面，选择微信支付或者支付宝支付；

2.当选择微信支付需要唤起安卓Android，调用安卓、ios苹果原生方法，传递相应的参数；

3.注意需要考虑几种情况：手机上是否安装了微信

  • 未安装，提示支付失败，或者也可做其他引导功能操作；
  • 已安装，直接通过安卓、ios苹果原生方法唤起微信支付

4.可取消支付，放弃支付会返回会员页面，页面提示支付取消； 

AP

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue的H5页面唤起支付宝支付功能
10-17
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下
vue微信支付调起方法
02-26
vue微信支付调起方法，WeixinJSBridge是微信浏览器中的一个对象，是微信客户端自带，只能在微信中使用。
vue调起支付宝支付（打开一个新的页面）
qq_42740298的博客
05-28 906
vue调起支付宝支付（打开一个新的页面）
Vue实现二维码生成与PC支付完整功能实战
最新发布
weixin_29138345的博客
09-17 1080
扩展Props支持动态配置：});随后在生成函数中读取这些属性，提升组件通用性。创建独立组件});</script><template><template></div>父组件可通过具名插槽插入 Logo 图标，实现品牌化二维码设计。综上所述，结合 Vue 的响应式系统，构成了一个强大而灵活的二维码解决方案。从底层编码机制到高层组件封装，整个流程体现出良好的工程化思维与可维护性设计原则。属性说明URL方法POST认证方式内容类型。
Vue微信支付
06-22
VueJS微信支付，亲测可用，可用在微信公众号和微信小程序等
vue项目+hbuilder打包实现微信支付
09-30
vue项目+hbuilder打包实现微信支付
基于Vue框架的uni-app微信小程序租车网设计源码
09-26
本文将详细介绍基于Vue框架的uni-app微信小程序租车网设计源码，该项目是专门为租车服务量身打造的微信小程序应用。它包含丰富的文件类型，共计601个文件，这些文件涉及前端开发的方方面面，包括JavaScript、JSON...
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
通过本文介绍的知识点，开发者可以在Vue项目中实现微信H5页面打开App的功能，增强用户的使用体验，并提升应用的可访问性。在实现过程中，需要特别注意环境判断和版本兼容性问题，确保用户体验的一致性和流畅性。同时...
uni-app微信小程序登录授权的实现
10-15
在开发uni-app微信小程序时，实现用户登录授权是至关重要的一步，这有助于提供个性化的服务并确保用户数据的安全。本文将深入探讨如何在uni-app中实现微信小程序的登录授权，并提供详细的步骤和示例代码。 首先，...
基于Vue框架的Uni-app微信小程序自习室预约系统设计源码
09-29
基于Vue框架的Uni-app微信小程序自习室预约系统设计源码是一款以Vue框架为基础，利用Uni-app平台开发的微信小程序应用。它旨在提供一个线上预约自习室的解决方案，使用户能够通过微信小程序快速便捷地预约和管理自习...
uni-app微信公众号支付.vue
08-01
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填，公众号的唯一标识 timestamp: res.data.timestamp, // 必填，生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串 signature: res.data.signature, // 必填，签名 jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log("验证失败！") }); } }) }
vue 解决在微信内置浏览器中调用支付宝支付的情况
01-18
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数（因为在微信里是不能直接调用支付宝的需要调用外部浏览器） 3.在外部浏览器中完成支付跳转页面 第一步： payment: 是选择支付页面，pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码： let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == “micromessenger” 这两句代码就是判断用户是否是用微信内置浏览器打开的页面 如果
vue移动端使用appClound拉起支付宝支付的实现方法
10-15
主要介绍了vue移动端使用appClound拉起支付宝支付的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信支付-vue 实现微信支付-前端篇
王佳楠的专栏
12-18 7870
微信支付系列文章 微信支付-java后端实现 微信支付-vue 前端实现 vue demo: 下载地址文章底部 技术栈 vue vue-cli weixin-js-sdk (微信jsSdk) 微信支付术语 微信jsSdk需要提前初始化完成 初始化加密参数需要通过后端计算后返回给前端 初始化url为在微信支付配置的前端url. (产品中心 => 开发配置 => JSAPI支付...
vue功能之“支付宝支付“
空投在我怀里的博客
03-16 2828
一、代码 <template> <div class="order-pay"> <order-header title="订单支付"> <template v-slot:tip> <span>请谨防钓鱼链接或诈骗电话，了解更多</span> </template> </order-header> <div class="wrapper"
vue 微信支付 支付宝支付
qq_40630064的博客
01-17 9158
需求：vue页面嵌套在安卓或者苹果app里面 在vue页面完成支付宝 或者 微信的支付 说明:一开始在做这个需求的时候 以为只是请求后端的接口而已 后来才知道并不是 请求完接口之后还是要前端进行一些操作 代码： 微信支付 saveWechat(){//微信支付 let _this = this; _this.common.ajax({ method: 'post', ...
vue +h5 调用支付宝支付
weixin_47826037的博客
02-24 1204
let htmls = res.Msg//后台返回的from表单 const div = document.createElement('div'); div.innerHTML = htmls; document.body.appendChild(div); document.forms[0].acceptCharset = 'utf-8'; document.forms[0].submit()
vue 支付宝支付和微信支付
qq_36935391的博客
10-08 523
微信返回的是个链接 跳转链接打开就行了。
Vue app安卓端移动端实现微信支付和支付宝支付
总结前端开发中遇到的问题，分享前端知识
05-16 1457
当前项目借助调用安卓和ios方法跳转第三方支付平台实现微信支付和支付宝支付
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

船长在船上

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值