技术笔记: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


});


}


}


})


}

相关文章
|
4月前
|
移动开发 小程序 开发工具
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
799 0
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
|
8月前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
2346 11
技术小白如何利用DeepSeek半小时开发微信小程序?
|
10月前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
346 1
|
11月前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
439 3
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
474 1
 H5微信外支付(移动端浏览器)
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
2224 3
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
247 5
|
移动开发 安全 API
微信H5支付--微信JS-SDK支付--点金计划
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程,涵盖了H5支付在移动端浏览器外唤起微信支付的细节,以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题,提供了解决方案和代码示例。最后,文章深入解析了微信支付点金计划,包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑,为开发者提供了完整的开发参考。
829 0
微信H5支付--微信JS-SDK支付--点金计划
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
389 0
微信小程序更新提醒uniapp
|
12月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
620 0

热门文章

最新文章