uni-app支付功能
扫码查看原文
前言
近期一直在使用APP开发多端应用,IOS的APP、安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用
前置条件:
开发环境:windows
开发框架:uni-app , H5+,nativeJS
编辑器:HbuilderX 2.8.13
4.兼容版本:安卓,IOS已作测试
此代码可以直接复制到uni-app项目中使用
正文开始:
1. 首先需要做一些相关配置
1.1 打开HbuilderX,配置manifest.json,选择App模块配置,勾选Payment支付;根据业务需要再勾选支付宝和微信支付;
1.2 微信支付需要配置appid、ios通用平台链接;支付宝在HbuilderX内无需任何配置;不过需要在支付宝付宝开放平台,创建应用时做一些配置。
2. 以下是具体代码页面部分
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>
3. 以下是样式部分
<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. 以下是具体的代码逻辑部分
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
6. 支付成功后,通过 updateOrder 方法改变订单状态
<script>
export default{
data(){
return{
imgs:[],
pay_type:0,
id:0,
info:[]
}
},
onLoad(response) {
this.id = response.id
this.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支付功能的更多相关文章
- asp.net core 微信APP支付(扫码支付,H5支付,公众号支付,app支付)之4
微信app支付需要以下参数,类封装如下 public class WxPayModel { /// <summary> /// 应用ID /// </summary> publ ...
- 使用PHP实现手机端APP支付宝的支付功能
最近应业务需求,做了支付宝支付和微信支付,今天分享一下手机端app支付宝支付对接流程,实际开发过程是前后端分离,前端调用后端API接口,实现功能返回数据,我所用的跨挤啊为TP5,大致可以分为四步: 1 ...
- ThinkPHP5.0 实现 app微信支付功能
相对于之前随笔写的<ThinkPHP5.0实现app支付宝支付功能>来说,php对接app微信支付功能就相对简单的多了,最近有加我的朋友问到app微信支付,所以我把app微信支付的demo ...
- 微信小程序支付功能前端流程
只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...
- APP支付报错ALI40247处理方案!
简直日狗!这里要吐槽支付宝: 1.支付宝文档太复杂,分类虽然详细,但是我找不到app支付 对应服务端的demo 2.提供下载的sdk都是全整合的 用下来都是一条龙服务,还有一些客户端(app)的请求也 ...
- iOS之开发支付功能概述
前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...
- IOS开发之支付功能概述
前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...
- 微信app支付android客户端以及.net服务端实现
由于公司运营需要,需要在客户端(android/ios)增加微信以及支付宝支付,在调用微信app支付时遇到一些问题,也算是一些踩过的坑,记录下来 ,希望能对.net开发者服务端网站更快的集成微信app ...
- [5] 微信公众号开发 - 微信支付功能开发(网页JSAPI调用)
1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...
- android支付宝app支付(原生态)-包括android前端与java后台
本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...
随机推荐
- MySQL 索引结构
谈到 MYSQL 索引服务端的同学应该是熟悉的不能再熟悉,新建表的时候怎么着都知道先来个主键索引,对于经常查询的列也会加个索引加快查询速度.那么 MYSQL 索引都有哪些类型呢?索引结构是什么样的呢? ...
- 招新裁老,两面派互联网大厂,培训三个月,就拿15K,凭什么?
看到一位朋友在发帖子求问:亲身经历,(如有谎言我名字倒过来写)一个大学同学18年毕业的.在兰州一个二本学的兽医农牧,毕业难找工作,去深圳一个机构培训了三个月吧,然后就去做大数据 算法了,然后又去做ja ...
- 【小白学PyTorch】3 浅谈Dataset和Dataloader
文章目录: 目录 1 Dataset基类 2 构建Dataset子类 2.1 Init 2.2 getitem 3 dataloader 1 Dataset基类 PyTorch 读取其他的数据,主要是 ...
- Fitness - 05.04
倒计时241天 运动38分钟,共计9组.拉伸10分钟. 每组跑步2分钟(6.3KM/h),走路2分钟(6KM/h). 上午下了课,直奔健身房. 手机坏了,没有听音乐. 没有吃午饭,但是上午喝的咖啡还是 ...
- 游戏UI系统设计
1.需要实现的功能 UI界面的管理(窗体加载.窗体显示.窗体隐藏.窗体销毁等) UI分层次(比如弹窗.广播信息需要在上层) UI界面的出场.入场动画 UI界面的显示效果(比如带透明背景.带高斯模糊背景 ...
- 深入了解Redis【一】源码下载与参考资料准备
引言 一直在使用redis,但是却没有系统的了解过它的底层实现,准备边学习边记录,深入了解redis. 打算分析以下几个方面: redis的基本类型及底层原理与java对比,每种数据类型的使用场景 r ...
- Java垃圾回收略略观
本文主要介绍Java垃圾回收(Garbage Collection),90%干货,文字颇多,需要耐心一点看. [对象判断状态算法] ------引用计数法 在创建对象时,为对象创建一个伴生的引用计数器 ...
- 一键部署k8s
本人学习安装kubernetes时,顺便整理了安装脚本,可以通过执行一个脚本,自动二进制安装好1台master+2台node的k8环境.方便需要学习k8s的同学. 百度网盘:https://pan.b ...
- deepin20 安装英伟达闭源驱动
第一步.安装深度的"显卡驱动器" 在deepin v20 中默认没有显卡驱动管理器,需要命令行安装,命令如下(刚开始一直出错,当我第一次打开应用商店,就可以安装了,好神奇): su ...
- 19_Python算法
1.冒泡算法 list = [1, 5, 2, 6, 9, 3, 4, 0] print(len(list)) # conunt = 1 while conunt < len(list): fo ...