uni-app中实现微信|支付宝支付_学学学无止境_uni-app 微信支付

网络投稿 02-07 3188

一、主要逻辑 1.支付可能需要哪些东西

支付的方式【微信】【支付宝】

支付的金额

订单的标题

订单号

订单的有效期

支付完成跳转的链接

2.支付 2.1.点击立即购买的时候，想后端发送ajax请求，请求中携带信息的完整流程 ajax({ url:'xxxx', =====》前端给后端传递的数据 data:{ 用户id, ****订单的金额 ****订单的商品系类 }, success:function(){ ===》后端给前端返回的数据 if(data.xxx){ data是一个对象，通常含有订单号然后跳转到确认订单页面 } } }) 2.2.确认订单页面===>点击提交订单===>选择支付方式（支付前也会发送请求）

2.2.1?再三确定用户选择的，和后端返回的方式是否一致

```` ajax({ data:{ ===>前端给后端传递数据 appid:'已经准备好的（通常是公司申请的id（用来收钱的）' 订单号选择了那种支付方式 }, success:function(){ 1.后端会返回true，代表可以支付了 2.还会返回一个标示（那种支付方式 if(后端给前端传递的哪种支付方式===用户点击的哪种支付方式){ //成立情况下，则开始发起支付的请求（这时候需要对接支付宝或微信支付官方了）发起支付 } } }) ````

2.2.2??对接官方支付

把得到的一些数据，传递给支付宝|微信支付官方

总结1：用户点击购买的时候不是立即调起支付的请求，而是向后端发送请求，然后后端返回订单号。返回订单号的意义就是当用户点击提交订单的时候，再将这个订单号传递给后端，可以知道该订单的状态，然后同时将用户选择的支付方式告知后端，最后后端进行返回验证。最后根据后端返回的数据发送支付请求（对接官方）----这个支付请求一般是封装好的，你只需要传递一些数据即可

前端拿到订单号之后再向后端发送请求，

三、在uni-app中的使用：

前端的所要做的就是：

请求后端接口，获取到orderinfo（订单信息）根据官方的新这个订单信息是后端直接拼接的字符串，前端不需要其他操作调用支付API:uni.requestPayMent处理回调

注意问题：

订单的格式是后端返回来的，前端不需要进行任何处理，不管是哪种支付，订单的信息都是strng类习惯的uni-app里的mainfest.json里面的微信支付id，要添加在微信开发平台申请移动应用支付的appid，，因为可能会遇到好几个appid，因为这个原因弄了很长时间在开放平台申请的移动用用支付时，应用包名可以自己起，应用签名需要按照微信的说明生成或者在线生成证书（证书可以是生成md5的签名），全部小写没有冒号----这一步类似于调用起高德地图中的配置商户订单号唯一是针对整个项目，可能有多个交易记录表，订单号不能重复 //微信orderinfo格式 ? "{\"appid\":\"xxxxxxxx\",\"partnerid\":\"xxxxxxx\",\"prepayid\":\"xxxxxxxxxxxxxxxx\",\"timestamp\":\"1579779903\",\"noncestr\":\"xxxxxxx\",\"package\":\"Sign": "WXPay\",\"sign\":\"xxxxxxxxxxxxxxxxxxxx\"}" ? //支付宝orderinfo格式 ? app_id=xxxxxxxxx&method=xxxxxxxxxx&format=JSON&charset=UTF-8&sign_type=RSA2&version=1.0&return_url=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&notify_url=xxxxx&timestamp=xxxxxx&sign=xxxxxxx&biz_content=xxxxxxxxxx 主要代码： <template> <view> <page-head :title="title"></page-head> <view class="uni-padding-wrap"> <view style="background:#FFF; padding:50upx 0;"> <view class="uni-hello-text uni-center">支付金额</text></view> <view class="uni-h1 uni-center uni-common-mt"> <text class="rmbLogo">￥</text> <input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" /> </view> </view> <view class="uni-btn-v uni-common-mt">  <template v-if="providerList.length > 0"> <button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)" :loading="item.loading">{{item.name}}支付</button> </template>  </view> </view> </view> </view> </template> <script> export default { data() { return { title: 'request-payment', loading: false, price: 1, providerList: [] } }, onLoad: function() { // #ifdef APP-PLUS uni.getProvider({ service: "payment", success: (e) => { console.log("payment success:" + JSON.stringify(e)); let providerList = []; e.provider.map((value) => { switch (value) { case 'alipay': providerList.push({ name: '支付宝', id: value, loading: false }); break; case 'wxpay': providerList.push({ name: '微信', id: value, loading: false }); break; default: break; } }) this.providerList = providerList; }, fail: (e) => { console.log("获取支付通道失败：", e); } }); // #endif }, methods: { async requestPayment(e, index) { this.providerList[index].loading = true; let orderInfo = await this.getOrderInfo(e.id); console.log("得到订单信息", orderInfo); if (orderInfo.statusCode !== 200) { console.log("获得订单信息失败", orderInfo); uni.showModal({ content: "获得订单信息失败", showCancel: false }) return; } uni.requestPayment({ provider: e.id, orderInfo: orderInfo.data.data, success: (e) => { console.log("success", e); uni.showToast({ title: "感谢您的赞助!" }) }, fail: (e) => { console.log("fail", e); uni.showModal({ content: "支付失败,原因为: " + e.errMsg, showCancel: false }) }, complete: () => { this.providerList[index].loading = false; } }) }, getOrderInfo(e) { let appid = ""; // #ifdef APP-PLUS appid = plus.runtime.appid; // #endif let url = 'http://10.10.60.200:8070/sc-admin/sales/wx/prepay/?brokerId=shba01'; return new Promise((res) => { uni.request({ url: url, success: (result) => { res(result); }, fail: (e) => { res(e); } }) }) }, priceChange(e) { console.log(e.detail.value) this.price = e.detail.value; } } } </script> <style> .rmbLogo { font-size: 40upx; } button { background-color: #007aff; color: #ffffff; } .uni-h1.uni-center { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; } .price { border-bottom: 1px solid #eee; width: 200upx; height: 80upx; padding-bottom: 4upx; } .ipaPayBtn { margin-top: 30upx; } </style>

简洁版的理解代码：

uni.requestPayment({ ? ? ?provider: 'alipay', ? ? ?orderInfo: '后端返回的orderinfo字符串', ? ? ?success: res => { ? ? ? ? ?// 进入此回调说明支付成功 ? ? }, ? ? ?fail: err => { ? ? ? ? ?const message = err.errMsg || ''; ? ? ? ? ?if (message.indexOf('[payment支付宝:62001]') !== -1) { ? ? ? ? ? ? ?uni.showModal({ ? ? ? ? ? ? ? ? ?content: '您已取消支付。如有需要，您可在我的订单里重新付款。30分钟内有效。', ? ? ? ? ? ? ? ? ?showCancel: false ? ? ? ? ? ? }); ? ? ? ? } else { ? ? ? ? ? ? ?uni.showModal({ ? ? ? ? ? ? ? ? ?content: '支付失败,原因为: ' + message, ? ? ? ? ? ? ? ? ?showCancel: false ? ? ? ? ? ? }); ? ? ? ? } ? ? }, ? ? ?complete: () => { ? ? ? ? ?this.submitting = false; ? ? ? ? } ? ? });