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后台服务主要用 ...
随机推荐
- jQuery源码分析系列(二)Sizzle选择器引擎-上
前言 我们继续从init()方法中的find()方法往下看, jQuery.find = Sizzle; ... find: function (selector) { /** ... */ ret ...
- Sql 注入----学习笔记2
转载自:http://blog.51cto.com/quiterr/1699964 sql注入 sql注入98年第一次出现在<phrack>54期上. 注入攻击有两个关键条件,第一是用户能 ...
- Codeforces 1321E World of Darkraft: Battle for Azathoth
题意 有\(n\)个武器,第\(i\)个武器攻击力为\(a_i\),价值\(ca_i\). 有\(m\)个防具,第\(i\)个防具防御力为\(b_i\),价值\(cb_i\). 有\(p\)个怪,第\ ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- 实际项目中遇到EF实体类的操作问题及操作方法
之前一直做ASP,都是直接写数据库操作语句,但是现在使用linq或者EF了,具体数据库操作不会了,遇到几个问题,然后经过查找资料解决了,记录一下. 一.遇到序列化问题 遇到循环引用问题,我的项目是一个 ...
- 1. Error running ...: No jdk for module ... 2.
一.错误 Error running ...: No jdk for module ... Error running ...: No jdk for module ... 二.解决方法 找到File ...
- 01 fs模块
1 fs.readFile 异步执行函数 /** fs 读取文件相对路径是相对终端命令行所在的路径 process.cwd()返回终端命令行的绝对路径 * */ fs = require('fs') ...
- 干货:用好这13款VSCode插件,工作效率提升10倍
文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 大家好我是lemon, 马上进入我们今天的主题吧. 又 ...
- python简介以及简单代码——python学习笔记(一)
学习来源:https://www.liaoxuefeng.com/wiki/1016959663602400 了解python 简单编写并实现python代码 命令行模式和python交互模式 了解p ...
- 知识点干货——CSS动画
CSS动画 (transition.animation) //2D动画 transform:translate(); /*偏移*/ transform:rotate(); /*旋转角度*/ trans ...