扫码查看原文

前言

近期一直在使用APP开发多端应用,IOS的APP、安卓的APP和H5网页,其中开发的APP使用到了微信和支付宝的支付,在此给大家分享出来,一起使用

前置条件:

  1. 开发环境:windows

  2. 开发框架:uni-app , H5+,nativeJS

  3. 编辑器: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支付功能的更多相关文章

  1. asp.net core 微信APP支付(扫码支付,H5支付,公众号支付,app支付)之4

    微信app支付需要以下参数,类封装如下 public class WxPayModel { /// <summary> /// 应用ID /// </summary> publ ...

  2. 使用PHP实现手机端APP支付宝的支付功能

    最近应业务需求,做了支付宝支付和微信支付,今天分享一下手机端app支付宝支付对接流程,实际开发过程是前后端分离,前端调用后端API接口,实现功能返回数据,我所用的跨挤啊为TP5,大致可以分为四步: 1 ...

  3. ThinkPHP5.0 实现 app微信支付功能

    相对于之前随笔写的<ThinkPHP5.0实现app支付宝支付功能>来说,php对接app微信支付功能就相对简单的多了,最近有加我的朋友问到app微信支付,所以我把app微信支付的demo ...

  4. 微信小程序支付功能前端流程

    只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...

  5. APP支付报错ALI40247处理方案!

    简直日狗!这里要吐槽支付宝: 1.支付宝文档太复杂,分类虽然详细,但是我找不到app支付 对应服务端的demo 2.提供下载的sdk都是全整合的 用下来都是一条龙服务,还有一些客户端(app)的请求也 ...

  6. iOS之开发支付功能概述

    前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...

  7. IOS开发之支付功能概述

    前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...

  8. 微信app支付android客户端以及.net服务端实现

    由于公司运营需要,需要在客户端(android/ios)增加微信以及支付宝支付,在调用微信app支付时遇到一些问题,也算是一些踩过的坑,记录下来 ,希望能对.net开发者服务端网站更快的集成微信app ...

  9. [5] 微信公众号开发 - 微信支付功能开发(网页JSAPI调用)

    1.微信支付的流程 如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...

  10. android支付宝app支付(原生态)-包括android前端与java后台

    本文讲解了 android开发的原生态app集成了支付宝支付, 还提供了java后台服务器处理支付宝支付的加密代码, app前端与java后台服务器使用json数据格式交互信息,java后台服务主要用 ...

随机推荐

  1. MySQL 索引结构

    谈到 MYSQL 索引服务端的同学应该是熟悉的不能再熟悉,新建表的时候怎么着都知道先来个主键索引,对于经常查询的列也会加个索引加快查询速度.那么 MYSQL 索引都有哪些类型呢?索引结构是什么样的呢? ...

  2. 招新裁老,两面派互联网大厂,培训三个月,就拿15K,凭什么?

    看到一位朋友在发帖子求问:亲身经历,(如有谎言我名字倒过来写)一个大学同学18年毕业的.在兰州一个二本学的兽医农牧,毕业难找工作,去深圳一个机构培训了三个月吧,然后就去做大数据 算法了,然后又去做ja ...

  3. 【小白学PyTorch】3 浅谈Dataset和Dataloader

    文章目录: 目录 1 Dataset基类 2 构建Dataset子类 2.1 Init 2.2 getitem 3 dataloader 1 Dataset基类 PyTorch 读取其他的数据,主要是 ...

  4. Fitness - 05.04

    倒计时241天 运动38分钟,共计9组.拉伸10分钟. 每组跑步2分钟(6.3KM/h),走路2分钟(6KM/h). 上午下了课,直奔健身房. 手机坏了,没有听音乐. 没有吃午饭,但是上午喝的咖啡还是 ...

  5. 游戏UI系统设计

    1.需要实现的功能 UI界面的管理(窗体加载.窗体显示.窗体隐藏.窗体销毁等) UI分层次(比如弹窗.广播信息需要在上层) UI界面的出场.入场动画 UI界面的显示效果(比如带透明背景.带高斯模糊背景 ...

  6. 深入了解Redis【一】源码下载与参考资料准备

    引言 一直在使用redis,但是却没有系统的了解过它的底层实现,准备边学习边记录,深入了解redis. 打算分析以下几个方面: redis的基本类型及底层原理与java对比,每种数据类型的使用场景 r ...

  7. Java垃圾回收略略观

    本文主要介绍Java垃圾回收(Garbage Collection),90%干货,文字颇多,需要耐心一点看. [对象判断状态算法] ------引用计数法 在创建对象时,为对象创建一个伴生的引用计数器 ...

  8. 一键部署k8s

    本人学习安装kubernetes时,顺便整理了安装脚本,可以通过执行一个脚本,自动二进制安装好1台master+2台node的k8环境.方便需要学习k8s的同学. 百度网盘:https://pan.b ...

  9. deepin20 安装英伟达闭源驱动

    第一步.安装深度的"显卡驱动器" 在deepin v20 中默认没有显卡驱动管理器,需要命令行安装,命令如下(刚开始一直出错,当我第一次打开应用商店,就可以安装了,好神奇): su ...

  10. 19_Python算法

    1.冒泡算法 list = [1, 5, 2, 6, 9, 3, 4, 0] print(len(list)) # conunt = 1 while conunt < len(list): fo ...