uni-app支付功能

扫码查看原文

前言
近期一直在使用APP开发多端应用，IOS的APP、安卓的APP和H5网页，其中开发的APP使用到了微信和支付宝的支付，在此给大家分享出来，一起使用
前置条件：
开发环境：windows
开发框架：uni-app , H5+，nativeJS
编辑器：HbuilderX 2.8.13
兼容版本：安卓，IOS已作测试
此代码可以直接复制到uni-app项目中使用
正文开始：

首先需要做一些相关配置
1.1 打开HbuilderX，配置manifest.json，选择App模块配置，勾选Payment支付；根据业务需要再勾选支付宝和微信支付；
1.2 微信支付需要配置appid、ios通用平台链接；支付宝在HbuilderX内无需任何配置；不过需要在支付宝付宝开放平台，创建应用时做一些配置。
以下是具体代码页面部分
2.1 radio的值等于1，是微信支付，等于2是支付宝支付；通过@change事件获取到radio的值


<view class="pay_list_box"><radio-group @change="radioChange"><label class="pay_list"><view class="l_box"><view class="top"><image class="t_img" src="/static/images/pay_icon2.png" mode=""></image><view>微信</view></view></view><view class="r_radio"><radio value="1" color="#44bb53" style="transform:scale(0.8)"/></view></label><label class="pay_list"><view class="l_box"><view class="top"><image class="t_img1" src="/static/images/pay_icon1.png" mode=""></image><view>支付宝</view></view></view><view class="r_radio"><radio value="2" color="#44bb53" style="transform:scale(0.8)"/></view></label></radio-group>
</view>
<view class="zf_btn" @click="pay">提交</view>

以下是样式部分


<style scoped lang="scss">.zaixian{padding-bottom: 100rpx;border-top: 1px solid #ebebeb;.content{.money{padding-top: 50rpx;text-align: center;height: 200rpx;color: #F05D31;line-height: 200rpx;font-size: 100rpx;}.time{text-align: center;color: #a5a5a5;font-size: 28rpx;}}.code{padding: 0 20rpx;display: flex;.shoukuanma{text-align: center;width: 50%;height: 200rpx;.type{font-size: 30rpx;color: #3b3b3b;}.ty_img{width: 200rpx;height: 200rpx;}}}.pay_list_box{margin-top: 100rpx;.yinhangka{font-size: 30rpx;color: #3b3b3b;padding: 0 20rpx;display: flex;height: 100rpx;align-items: center;justify-content: space-between;border-bottom: 1px solid #ebebeb;.y_left{display: flex;.name{padding-right: 20rpx;}}}.pay_list{border-bottom: 1px solid #ebebeb;padding: 0 20rpx;height: 100rpx;align-items: center;display: flex;justify-content: space-between;.l_box{height: 100rpx;.top{height: 100rpx;display: flex;height: 100rpx;align-items: center;font-size: 30rpx;color: #3b3b3b;.t_img{padding-right: 20rpx;width: 46rpx;height: 38rpx;}.t_img1{padding-right: 32rpx;width: 34rpx;height: 33rpx;}.t_img2{padding-right: 28rpx;width: 38rpx;height: 33rpx;}}}}}.pingzheng{margin-top: 30rpx;.content{display: flex;align-items: center;padding: 0 20rpx;height: 200rpx;.shangchuan{color: #454545;font-size: 30rpx;}.sc_img{padding-left: 20rpx;width: 200rpx;height: 200rpx;border-radius: 5px;}}.pz_pic{margin-top: 30rpx;padding: 0 20rpx;.pz_img{width: 100%;height: 300rpx;}}}.zf_btn{margin: 100rpx auto 0;background-color: #44bb57;width: 650rpx;height: 90rpx;font-size: 36rpx;color: #FFFFFF;line-height: 90rpx;text-align: center;border-radius: 45rpx;}}
</style>

以下是具体的代码逻辑部分
4.1 通过后端获取到订单信息；再通过订单信息获取到服务商信息和支付配置信息
4.2 最后通过 uni.requestPayment 支付；
5.通过servicesInfo方法获取订单信息，取到订单的基本信息
5.1 向 pay 方法传递订单基本信息，获取到服务商信息和支付配置信息
5.2 通过 appPay 方法调用uni.requestPayment函数发起支付；
5.3 uni.requestPayment发起支付时，传递两个重要参数provider、orderInfo
5.3.1 provider：支付类型，支付宝（alipay）或者微信 (wxpay)
5.3.2 orderInfo: 通过 pay 方法请求接口获取到 order_info
支付成功后，通过 updateOrder 方法改变订单状态

<script>export default{data(){return{imgs:[],pay_type:0,id:0,info:[]}},onLoad(response) {this.id = response.idthis.servicesInfo()},methods:{radioChange(e){// 获取用选择的支付方式this.pay_type = e.detail.value},//一、获取订单信息servicesInfo:function(){var that = this;// 请求订单信息接口that.$http.post("User/servicesInfo",{'id':that.id}).then(function (response) {that.info = response.data;console.log(response);});},//二、获取服务信息和支付配置信息pay:function(){var that = this;if(that.pay_type == 0){uni.showToast({title:"请选择支付方式",icon:"none"})return;}var url;// 1 微信支付；2 支付宝支付if(that.pay_type == 1){url = 'Order/wxpay';}else if(that.pay_type == 2){url = 'Order/alipay';}// 请求服务信息和支付配置信息that.$http.post(url,{'id':that.id,type:that.pay_type,'price':that.info.pay_price,'order_sn':that.info.order_sn}).then(function(response){console.log(response);// 调用支付that.appPay(response.data,that.pay_type);});},// 三、支付appPay:function(data, type){var that =this;let pay_type = type == 1 ? 'wxpay' : 'alipay'// 发起支付uni.requestPayment({provider: pay_type,orderInfo: data.order_info, //微信、支付宝订单数据success: (res) => {// 支付成功，改变订单状态that.updateOrder(data.out_trade_no,type)},fail: (err) => {uni.showToast({title:'支付失败','icon':'none'})}})},//四、修改务订单状态updateOrder:function(order_no,type){var that = this;that.$http.post('Order/updateOrder',{order_no:order_no}).then(function(response) {uni.showToast({title:"支付成功",icon:'none',duration:2000})})},}}
</script>

uni-app支付功能相关推荐

php tp 微信支付,PHP实现的微信APP支付功能示例【基于TP5框架】
本文实例讲述了PHP实现的微信APP支付功能.分享给大家供大家参考,具体如下: 1.进行支付请求他给的DEMO 用的时候有时候会报错 1)我遇到的情况把 WxPay.Api.php这个文件的 p ...
微信app支付功能-服务端的实现-python3版
微信app支付功能-服务端的实现-python3版一:需求说明二:微信app支付处理流程三:所需依赖 3.1 支付配置四:接口开发 4.1 创建订单接口 4.2 微信异步回调接口 4.3 订单 ...
支付宝app支付功能-服务端的实现-python3版
支付宝app支付功能-服务端的实现-python3版一:需求说明二:支付宝app支付处理流程三:所需依赖 3.1 依赖库 3.2 支付配置 3.2.1 沙箱环境配置 3.2.2 正式环境配置四 ...
android微信支付都需要什么意思,Android开发微信APP支付功能的要点小结
基本概念包名值得是你APP的包,在创建工程时候设置的,需要在微信支付平台上面设置. 签名指的是你生成APK时候所用的签名文件的md5,去掉:全部小写,需要在微信支付平台上面设置. 调试阶段,签名文件 ...
基于spring-boot+uni-app实现app支付功能（微信/支付宝）服务端
基于spring-boot+uni-app实现app支付功能(微信/支付宝)服务端支付宝支付 1 准备工作申请支付能力接口加签方式 2代码依赖支付宝支付配置类支付宝控制层异步通知微信支 ...
php 支付宝订单查询_php实现支付宝APP支付功能与源码
原标题:php实现支付宝APP支付功能与源码码农程序自学与交流微信群微信群有,就怕你进群发一些乱七八糟的,群有群规,既然规定是技术学习交流,那就不要发广告信息,推广信息,小程序分享,刷屏刷图等!一 ...
微信APP支付功能开发
前期准备工作 1. 微信各平台功能认识 1.1 微信开放平台: 支持移动应用,公众号的开发,创建应用并得到APPID,使你的应用支持微信支付. 1.2 微信公众平台: 微信小程序,服务号,订阅号的开发 ...
Android开发之App支付功能实现及踩坑
支付宝支付实现 1.正规支付实现前提条件: 1. 企业或个体工商户可申请,且账号通过支付宝实名认证审核 2. 需提供真实有效的营业执照,且支付宝账户名称需与营业执照主体一致: 3. 提供APP名称或 ...
Android App接入支付功能
微信支付,请参考我另一篇:Android App接入支付功能--微信篇因为项目中用到支付功能,而且支付宝文档和微信文档写的很简洁,不仔细研究,真的无法集成成功老样子,上效果图由于涉及到输入密码,我 ...
App接入阿里支付宝支付，app如何开通接入支付宝支付功能，APP如何申请阿里支付宝支付
注意时间,现在是 2021年8月12日首先,需要注册一个支付宝企业身份的账号. 然后开始. 1.进入蚂蚁金服开放平台https://open.alipay.com/platform/home.htm ...

uni-app支付功能

uni-app支付功能

uni-app支付功能相关推荐

最新文章

热门文章