技术笔记:uniapp微信小程序支付

简介: 技术笔记:uniapp微信小程序支付

完全依赖后台接口实现


      submit(){


var self = this;


// console.log(this.price,this.payType)


var money = 100000;


var amount = this.price;


var payType = this.payType;


if (amount == "" || amount == null ) {


uni.showToast({


title: "请填写充值金额",//代码效果参考:http://www.jhylw.com.cn/571930553.html


icon:"none",


duration: 2000


});


this.priFocus = true


return


}


if (amount <= 0) {


uni.showToast({


title: "请填写正确的金额",


icon:"none",


duration: 2000


});


this.price = '';


this.priFocus = true


return


}


if (amount > money) {


uni.showToast({


title: "充值金额过大",


icon:"none",


duration: 2000


});


this.priFocus = true


return


}


if (payType == "" || payType == null || !payType) {


uni.showToast({


title: "请选择支付方式",


icon:"none",


duration: 2000


});


return


}


let obj = {}


obj.Amount = amount //充值金额


obj.Pay_Type = payType //类型


//因为是充值所以先请求接口生成一个订单号,存到this.invest_money_inpourno,再发支付接口,【如果是购物车或者直接购买支付,已经有订单号了,就不要需要这步,直接到invest_money_paymode()判断openid】


uni.request({


url: this.$httpUrl.OnlineInpourAdd,


method: 'POST',


data: JSON.stringify(obj),


header:{


'token':this.$utils.getToken(),


},


success: (res) => {


if(res.data.s.co === -100){


this.$utils.logBackIn(res.data.s.co,this)


}else if (res.data.s.co === 1) {


// let info = res.data.d.rd


this.invest_money_inpourno = res.data.o //得到后台返回的订单号


this.invest_money_paymode();


// this.$nextTick(() => {


// })


} else {


uni.showToast({


title: res.data.s.mg,


icon: "none",


duration: 2000


});


}


}


})


},


invest_money_paymode(){


var self = this;


let obj = {}


var payType = this.payType;


if (payType == 2) {


//小程序支付


//JSON


// {


// "mchid": "1900006XXX",直连商户号


// "out_trade_no": "1217752501201407033233368318",商户订单号


// "appid": "wxdace645e0bc2cXXX",应用ID


// "notify_url": "",通知地址


// "amount": {订单金额


// "total": 1,总金额


// "currency": "CNY"货币类型


// },


// "payer": {支付者


// "openid": "o4GgauInH_RCEdvrrNGrntXDuXXX"用户标识


// }


// }


// console.log(this.openid,this.invest_money_inpourno)


if(this.openid == ''){


wx.login({


success (res) {


// console.log(res)


//这里this需要self


if (res.code) {


//发起网络请求,拿到code去请求接口


uni.request({


url: self.$httpUrl.GetOpenIDByCode,


method: 'POST',


data: {


'': res.code


},


header:{


'Content-Type': 'application/x-www-form-urlencoded',


'token':self.$utils.getToken(),


},


success: (res) => {


// console.log(res)


if (res.data.s.co === 1) {


// let info = res.data.d.rd


self.openid = res.data.s.smg //这里后台返回openid


//并放入缓存中


                        uni.setStorage({


key: 'Myopenid',


data: self.openid


})


//拿4个值发支付请求


self.weixinzhifu()


// self.$nextTick(() => {


// })


} else {


uni.showToast({


title: res.data.s.mg,


icon: "none",


duration: 2000


});


}


}


})


} else {


uni.showToast({


title: '登录失败!' + res.errMsg,


icon: "none",


duration: 2000


});


}


}


})


}else{


//有openid


self.weixinzhifu()


}


}


},


weixinzhifu(){


var self = this


var obj = {}


obj.Tid = this.invest_money_inpourno//订单号


obj.payWhere = 1//充值支付


obj.openid = this.openid//openid


obj.total = this.price//金额


uni.request({


url: this.$httpUrl.UnifiedOrder,


method: 'POST',


data: JSON.stringify(obj),


header:{


'token':this.$utils.getToken(),


},


success: (res) => {


// console.log(res)


if (res.data.s.co === 1) {


let info = res.data.o


wx.requestPayment


(


{


"timeStamp": info.timeStamp,


"nonceStr": info.nonceStr,


"package": info.package,


"signType": "MD5",


"paySign": info.paySign,


"success":function(res){


//支付成功跳转页面


// self.$Router.push


self.$Router.replace({


name:'accountBalance'


})


},


"fail":function(res){


                        //支付失败弹提示


uni.showToast({


title: res.errMsg,


icon: "none",


duration: 2000


});


},


"complete":function(res){}


}


)


} else {


uni.showToast({


title: res.data.s.mg,


icon: "none",


duration: 2000


});


}


}


})


}

相关文章
|
移动开发 小程序 JavaScript
小程序与快应用:中国移动互联网的渐进式革命——卓伊凡的技术演进观
小程序与快应用:中国移动互联网的渐进式革命——卓伊凡的技术演进观
613 12
小程序与快应用:中国移动互联网的渐进式革命——卓伊凡的技术演进观
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
1391 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
4233 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
809 1
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
554 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
1046 0
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
5581 3
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
1082 0
微信小程序更新提醒uniapp