uniapp实现支付功能的方法：首先获取可用的支付环境；然后判断用户是否有支付宝支付环境；接着再从后端接口获取相关数据配置到orderInfo里；最后拿到后端返回数据后调用相关支付函数。
本教程操作环境：windows7系统、uni-app2.5.1版本、thinkpad t480电脑。
推荐（免费）：uni-app开发教程
uniapp实现支付功能的方法：
//支付宝支付zfbPay(){uni.getProvider({ //获取可用的支付环境service: 'payment',success: res=>{if (~res.provider.indexOf('alipay')) { //先判断用户是否有支付宝支付环境uni.showLoading({title: '正在调起支付宝支付'})let params={ //给后端传什么参数看你的后端需要什么money:this.moneyCount,ispc:3}uni.request({ //再从后端接口获取相关数据配置到orderInfo里，这个接口由后端配置好了，返回结果见下图1-支付宝url: `${this.$baseUrl}/api-order/amstc/userRechargeAccountByAliPay`,method: 'POST',header: {"Token":this.userToken,"Content-Type":"application/x-www-form-urlencoded"},data: params,success: res => {if(res.data.code==200){let payInfo=res.data.data //拿到后端返回数据后调用下面支付函数uni.requestPayment({provider: 'alipay',orderInfo: payInfo, //支付宝订单数据（string类型）success: res=>{uni.hideLoading();uni.showToast({title: '支付成功',icon:'none'})},fail:err=>{uni.hideLoading();uni.showToast({title: '支付失败，请稍后再试',icon:'none'})}});}},fail: () => {uni.hideLoading();uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})}});}else{uni.showToast({title: '获取支付宝通道失败，请检查您的支付宝是否正常启用',icon:'none'})}}});},//微信支付wxPay(){uni.getProvider({service: 'payment',success: res=>{if (~res.provider.indexOf('wxpay')) { //先判断用户是否有微信支付环境（是否安装了微信app）uni.showLoading({title: '正在调起微信支付'})let params={money:this.moneyCount,bs:4}uni.request({ //再从后端接口获取相关数据配置到orderInfo里，这个接口由后端配置好了，返回结果见下图2-微信url: `${this.$baseUrl}/api-order/amstc/userRechargeAccountByWx`,method: 'POST',header: {"Token":this.userToken,"Content-Type":"application/x-www-form-urlencoded"},data: params,success: res => {if(res.data.code==200){let resobj=JSON.parse(res.data.data)let payInfo={appid: resobj.appid,noncestr: resobj.nonce_str,package:"Sign=WXPay",partnerid: resobj.mch_id,prepayid: resobj.prepay_id,timestamp: resobj.time_stamp,sign: resobj.sign,}uni.requestPayment({provider: 'wxpay',orderInfo: payInfo, //微信订单数据（Object类型）success: res=>{uni.hideLoading(); uni.showToast({title: '支付成功',icon:'none'})},fail:err=>{uni.hideLoading(); uni.showToast({title: '支付失败，请稍后再试',icon:'none'})}});}},fail: () => {uni.hideLoading();uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})}});}else{uni.showToast({title: '获取微信通道失败，请检查您的微信是否正常启用',icon:'none'})}}});},
登录后复制
支付宝获取orderInfo的接口
微信获取orderInfo的接口
相关免费学习推荐：uni-app开发教程（视频）
以上就是uniapp如何实现支付功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3031881.html
