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


});


}


}


})


}

相关文章
|
27天前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
34 0
在线课堂+工具组件小程序uniapp移动端源码
|
1月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
116 0
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
340 3
|
2月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
72 5
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
57 0
微信小程序更新提醒uniapp
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
33 0
|
2月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
90 0
|
2月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
54 0
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
682 7
下一篇
DataWorks