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

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

APP安卓、ios微信支付功能

目录

APP安卓、ios微信支付功能

功能介绍

会员支付功能页面

 会员开通或者续费页面

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

选择支付方式弹窗

选择支付类型

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

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

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

功能介绍

技术选型：Vue+Vant-ui

功能介绍：

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

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

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

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

4.可取

了解本专栏 订阅专栏 解锁全文 超级会员免费看
船长在船上
关注
  • 16
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
专栏目录
订阅专栏
Vue3 - 最新详解实现网站接入微信支付功能，调起微信支付页面或微信扫码支付效果详细教程，手机移动端H5或电脑PC网页 “微信环境内支付“与“脱离微信环境外部浏览器支付“ 示例代码，支持微信公众号！
王佳斌
06-22 3530
vue3，nuxt3，微信支付，vue微信支付，微信公众号，h5支付，jssdk，JSAPI，公众号网页支付，pc网站，微信支付二维码，生成支付二维码，扫码支付，扫码支付，uni-app，详解微信支付，支付回调报错，微信支付报错，无法支付，无法唤起支付窗口，vue3如何使用微信支付，脱离浏览器怎么用微信支付，redirect_uri参数错误，回调地址错误，h5生成微信支付二维码，H5微信支付，PC端微信支付，前端支付，拉起微信支付，pc扫码支付，新手小白详细教程示例，SDK，vue对接微信支付，拉不起来微信
vue微信支付调起方法
02-26
vue微信支付调起方法，WeixinJSBridge是微信浏览器中的一个对象，是微信客户端自带，只能在微信中使用。
vue项目+hbuilder打包实现微信支付
09-30
vue项目+hbuilder打包实现微信支付
vue功能之“支付宝支付“
空投在我怀里的博客
03-16 2660
一、代码 <template> <div class="order-pay"> <order-header title="订单支付"> <template v-slot:tip> <span>请谨防钓鱼链接或诈骗电话，了解更多</span> </template> </order-header> <div class="wrapper"
Vue的H5页面唤起支付宝支付功能
10-17
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下
vue移动端使用appClound拉起支付宝支付的实现方法
10-15
主要介绍了vue移动端使用appClound拉起支付宝支付的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue调起支付宝支付（打开一个新的页面）
qq_42740298的博客
05-28 319
vue调起支付宝支付（打开一个新的页面）
微信支付-vue 实现微信支付-前端篇
王佳楠的专栏
12-18 7278
微信支付系列文章 微信支付-java后端实现 微信支付-vue 前端实现 vue demo: 下载地址文章底部 技术栈 vue vue-cli weixin-js-sdk (微信jsSdk) 微信支付术语 微信jsSdk需要提前初始化完成 初始化加密参数需要通过后端计算后返回给前端 初始化url为在微信支付配置的前端url. (产品中心 => 开发配置 => JSAPI支付...
vue 微信支付 支付宝支付
qq_40630064的博客
01-17 9024
需求：vue页面嵌套在安卓或者苹果app里面 在vue页面完成支付宝 或者 微信的支付 说明:一开始在做这个需求的时候 以为只是请求后端的接口而已 后来才知道并不是 请求完接口之后还是要前端进行一些操作 代码： 微信支付 saveWechat(){//微信支付 let _this = this; _this.common.ajax({ method: 'post', ...
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
通过本文介绍的知识点，开发者可以在Vue项目中实现微信H5页面打开App的功能，增强用户的使用体验，并提升应用的可访问性。在实现过程中，需要特别注意环境判断和版本兼容性问题，确保用户体验的一致性和流畅性。同时...
uni-app微信支付.zip
08-23
【uni-app微信支付】是基于uni-app框架实现的微信支付功能。uni-app是一个多端开发框架，它允许开发者使用一套代码来开发iOS、Android、Web等不同平台的应用。本压缩包文件提供了uni-app与微信支付集成的具体实现...
Vue微信支付
06-22
VueJS微信支付，亲测可用，可用在微信公众号和微信小程序等
vue 解决在微信内置浏览器中调用支付宝支付的情况
01-18
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数（因为在微信里是不能直接调用支付宝的需要调用外部浏览器） 3.在外部浏览器中完成支付跳转页面 第一步： payment: 是选择支付页面，pay-mask是用于在微信内置浏览器中调用支付宝的中间页 payment主要代码： let ua = window.navigator.userAgent.toLowerCase() ua.match(/MicroMessenger/i) == “micromessenger” 这两句代码就是判断用户是否是用微信内置浏览器打开的页面 如果
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("验证失败！") }); } }) }
支付宝支付SDK方法唤起支付
02-06
Android支付宝支付的集成SDK ，连接手机，运行即可，加密订单最好从后台服务器生成~
uni-app微信小程序生成海报.rar
02-07
【uni-app微信小程序生成海报】 在移动应用开发领域，uni-app是一个备受瞩目的框架，它由ECharts团队推出，旨在实现跨平台开发，支持包括微信小程序、H5、App等在内的多个平台。本教程将详细讲解如何使用uni-app来...
uni-app微信小程序登录授权的实现
10-15
在开发uni-app微信小程序时，实现用户登录授权是至关重要的一步，这有助于提供个性化的服务并确保用户数据的安全。本文将深入探讨如何在uni-app中实现微信小程序的登录授权，并提供详细的步骤和示例代码。 首先，...
vue移动端h5调用支付宝支付接口
热门推荐
帅帅狗的博客
10-19 2万+
介绍一种比较简单的h5调用支付宝支付接口的方法 首先，肯定是后台写好接口，将订单信息传给后台，后台根据文档，向支付宝请求h5的支付数据，返回一个form表单到前端上，格式如下: 得到这个form之后怎么用呢，我们需要在ajax请求的异步回调上，将返回的form输出到html界面上，代码如下： payMoney() { this.$http.get('/api/w...
vue支付宝html,Vue的H5页面唤起支付宝支付功能
weixin_42614269的博客
06-18 2258
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。其实很简单的，只不过是调自己后台的一个接口而已(后台根据支付宝文档，写好支付接口)。触发支付宝支付调用后台接口，后台会返回支付宝提供的form表单，我们只要在vue里面创建新节点，将返回的form表单append进去，并提交就可以唤起支付宝支付。另在此说一下这个 returnUrl , 它是...
springboot集成app端的微信支付
最新发布
07-10
Spring Boot 集成微信支付通常涉及到以下几个步骤： 1. **注册并配置微信支付**：首先，你需要在微信公众平台注册并获得商户号、AppID、AppSecret以及密钥证书等信息。然后，在Spring Boot应用中创建微信支付服务的配置文件，如application.properties或application.yml，设置相关的API Key和URL。 2. **依赖引入**：添加微信支付的SDK依赖到你的项目中，比如Alipay的mch-sdk或Wechat Pay for Java库。 3. **创建支付工具类**：通过SDK初始化微信支付实例，编写用于生成统一下单二维码、预订单、同步异步通知处理等功能的方法。 4. **请求授权和获取用户支付信息**：在前端页面，引导用户点击按钮授权，并将返回的code传递给后台处理授权码换取session_key和prepay_id。 5. **生成预付交易**：利用获取到的prepay_id，通过微信支付的API生成订单，并提供给用户进行支付。 6. **处理支付回调**：监听微信服务器发送的支付状态变更通知，验证签名并更新数据库中的订单状态。 7. **结果展示与业务逻辑处理**：支付成功后，通知用户并更新订单状态，同时处理支付失败的情况。
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

船长在船上

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

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

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

打赏作者

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

抵扣说明：

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

余额充值