uniapp写支付的操作

最新推荐文章于 2024-05-07 17:35:23 发布
最新推荐文章于 2024-05-07 17:35:23 发布
阅读量523 收藏
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45432996/article/details/136683150
版权

支付的时候一般需要几个参数：

  1. ‘timeStamp’: 时间戳,
  2. ‘nonceStr’: 随机字符串，不超过32位
  3. ‘package’: 下单后接口返回的prepauid
  4. ‘signType’: 签名的算法
  5. ‘paySign’: 后端会给前端一个签名
  6. sign: data.sign // 根据签名算法生成签名
<template>
	<view>
		<scroll-view scroll-y>
			<view class="block__title">报修信息</view>
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">工单号</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{repairId}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">报修类型</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{repairTypeName}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">报修位置</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{repairObjName}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">报修人</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{repairName}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">报修内容</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{remark}}</text>
					</view>
				</view>
			</view>
			<view class="block__title">费用信息</view>
			<view class="cu-list menu fee-last">
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">费用编号</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{feeInfo.feeId }}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="text-grey">金额</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">{{feeInfo.amount + '元' }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class=" bg-white  border flex justify-end" style="position: fixed;width: 100%;bottom: 0;">

			<view class="action text-orange margin-right line-height">
				合计：{{feeInfo.amount}}元
			</view>
			<view class="btn-group">
				<!-- #ifdef H5 || MP-WEIXIN -->
				<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="onPayFee()">提交订单</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="_payWxApp()">提交订单</button>
				<!-- #endif -->
			</view>


		</view>
	</view>

	</view>
</template>

<script>
	import {date2String} from '../../lib/java110/utils/DateUtil.js'
	import context from '../../lib/java110/Java110Context.js';
	const constant = context.constant;
	const util = context.util;
	
	// #ifdef H5
	
	const WexinPayFactory = require('../../factory/WexinPayFactory.js');
	
	// #endif

	export default {
		data() {
			return {
				communityId: '',
				communityName: '',
				repairId:'',
				appId: '',
				repairInfo:{},
				feeInfo:{},
				userId:'',
				payerObjId: '',
				payerObjType: '3333',
				endTime: '',
				repairTypeName: '',
				repairObjName: '',
				repairName: '',
				remark: '',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			context.onLoad(options);
			// #ifdef MP-WEIXIN
			let accountInfo = uni.getAccountInfoSync();
			this.appId = accountInfo.miniProgram.appId;
			// #endif
			
			// #ifdef H5
				this.appId = uni.getStorageSync(constant.mapping.W_APP_ID)
			// #endif
			this.communityId = options.communityId;
			this.repairId = options.repairId;
			this.userId = options.userId;
			this.payerObjId = options.repairObjId;
			this.endTime = date2String(new Date(options.appointmentTime.replace(/-/g, "/")));
			this.repairTypeName = options.repairTypeName;
			this.repairObjName = options.repairObjName;
			this.repairName = options.repairName;
			this.remark = options.context
			
			this._loadRepair();
			this._listFee();
		},

		methods: {
			/**
			 * 加载我的报修
			 * 
			 */
			_listFee: function() {
				let that = this;
				let _url = '';
				_url = constant.url.listFeeByAttr;
				let _paramIn = {
					"communityId": that.communityId,
					"page": 1,
					"row": 1,
					"specCd": '390001',
					"value": that.repairId
				};
				context.request({
					url: _url,
					header: context.getHeaders(),
					method: "GET",
					data: _paramIn,
					success: function(res) {
						let _json = res.data;
						if (_json.code == 0) {
							that.feeInfo = _json.data[0];
							return;
						}
						wx.showToast({
							title: "查询费用失败",
							icon: 'none',
							duration: 2000
						});
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			_loadRepair: function() {
				let that = this;
				let _url = '';
				_url = constant.url.listStaffFinishRepairs;
				let _paramIn = {
					"communityId": that.communityId,
					"page": 1,
					"row": 1,
					"userId": that.userId,
					"repairId": that.repairId
				};
				context.request({
					url: _url,
					header: context.getHeaders(),
					method: "GET",
					data: _paramIn,
					success: function(res) {
						let _json = res.data;
						if (_json.code == 0) {
							that.repairInfo = _json.data[0];
							return;
						}
						wx.showToast({
							title: "查询报修单失败",
							icon: 'none',
							duration: 2000
						});
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			_payWxApp: function(_data) {
				wx.showLoading({
					title: '支付中'
				});
				let _tradeType = 'APP';
				let _objData = {
					cycles: 1,
					communityId: this.communityId,
					feeId: this.feeInfo.feeId,
					feeName: '报修费',
					receivedAmount: this.feeInfo.feePrice,
					tradeType: _tradeType,
					appId: this.appId
				};
				context.request({
					url: constant.url.preOrder,
					header: context.getHeaders(),
					method: "POST",
					data: _objData,
					//动态数据
					success: function(res) {
						if (res.statusCode == 200 && res.data.code == '0') {
							let data = res.data; //成功情况下跳转
							let obj = {
								appid: data.appId,
								noncestr: data.nonceStr,
								package: 'Sign=WXPay', // 固定值，以微信支付文档为主
								partnerid: data.partnerid,
								prepayid: data.prepayid,
								timestamp: data.timeStamp,
								sign: data.sign // 根据签名算法生成签名
							}
							// 第二种写法，传对象字符串
							let orderInfo = JSON.stringify(obj)
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: orderInfo, //微信、支付宝订单数据
								success: function(res) {
									uni.showToast({
										title: "支付成功",
										duration: 2000
									});
									uni.navigateBack({});
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
							wx.hideLoading();
							return;
						}

						wx.hideLoading();
						wx.showToast({
							title: "缴费失败",
							icon: 'none',
							duration: 2000
						});
					},
					fail: function(e) {
						wx.hideLoading();
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			onPayFee: function() {
				wx.showLoading({
					title: '支付中'
				});
				let _tradeType = 'JSAPI';
				let _objData = {
					cycles: '1',
					communityId: this.communityId,
					feeId: this.feeInfo.feeId,
					feeName: '报修费',
					receivedAmount: this.feeInfo.feePrice,
					tradeType: _tradeType,
					appId: this.appId,
					endTime: this.endTime,
					payerObjId: this.payerObjId,
					payerObjType: this.payerObjType
				};
				context.request({
					url: constant.url.preOrder,
					header: context.getHeaders(),
					method: "POST",
					data: _objData,
					//动态数据
					success: function(res) {

						if (res.statusCode == 200 && res.data.code == '0') {
							let data = res.data; //成功情况下跳转
							// #ifdef MP-WEIXIN
							uni.requestPayment({
								'timeStamp': data.timeStamp,
								'nonceStr': data.nonceStr,
								'package': data.package,
								'signType': data.signType,
								'paySign': data.sign,
								'success': function(res) {
									uni.showToast({
										title: "支付成功",
										duration: 2000
									});
									uni.navigateBack({});
								},
								'fail': function(res) {
									console.log('fail:' + JSON.stringify(res));
								}
							});
							// #endif
							// #ifdef H5
								WexinPayFactory.wexinPay(data,function(){
									uni.showToast({
										title: "支付成功",
										duration: 2000
									});
									uni.navigateBack({});
								});
							// #endif
							wx.hideLoading();
							return;
						}

						wx.hideLoading();
						wx.showToast({
							title: "缴费失败",
							icon: 'none',
							duration: 2000
						});
					},
					fail: function(e) {
						wx.hideLoading();
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	};
</script>
<style>
	
	.ppf_item{
	  padding: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.block__title {
	  margin: 0;
	  font-weight: 400;
	  font-size: 14px;
	  color: rgba(69,90,100,.6);
	  padding: 40rpx 30rpx 20rpx;
	}
	
	.button_up_blank{
	  height: 40rpx;
	}
	
	.block__bottom{
	  height: 180rpx;
	}

	.fee-last {
		margin-bottom: 200upx;
	}

	.cu-btn.lgplus {
		padding: 0 20px;
		font-size: 18px;
		height: 100upx;

	}

	.cu-btn.sharp {
		border-radius: 0upx;
	}

	.line-height {
		line-height: 100upx;
	}
</style>

import sheep from '@/sheep';
// #ifdef H5
import $wxsdk from '@/sheep/libs/sdk-h5-weixin';
// #endif
import { getRootUrl } from '@/sheep/helper';
import PayOrderApi from '@/sheep/api/pay/order';

/**
 * 支付
 *
 * @param {String} payment = ['wechat','alipay','wallet','mock']  	- 支付方式
 * @param {String} orderType = ['goods','recharge','groupon']  	- 订单类型
 * @param {String} id					- 订单号
 */

export default class SheepPay {
  constructor(payment, orderType, id) {
    this.payment = payment;
    this.id = id;
    this.orderType = orderType;
    this.payAction();
  }

  payAction() {
    const payAction = {
      WechatOfficialAccount: {
        wechat: () => {
          this.wechatOfficialAccountPay();
        },
        alipay: () => {
          this.redirectPay(); // 现在公众号可以直接跳转支付宝页面
        },
        wallet: () => {
          this.walletPay();
        },
        mock: () => {
          this.mockPay();
        }
      },
      WechatMiniProgram: {
        wechat: () => {
          this.wechatMiniProgramPay();
        },
        alipay: () => {
          this.copyPayLink();
        },
        wallet: () => {
          this.walletPay();
        },
        mock: () => {
          this.mockPay();
        }
      },
      App: {
        wechat: () => {
          this.wechatAppPay();
        },
        alipay: () => {
          this.alipay();
        },
        wallet: () => {
          this.walletPay();
        },
        mock: () => {
          this.mockPay();
        }
      },
      H5: {
        wechat: () => {
          this.wechatWapPay();
        },
        alipay: () => {
          this.redirectPay();
        },
        wallet: () => {
          this.walletPay();
        },
        mock: () => {
          this.mockPay();
        }
      },
    };
    return payAction[sheep.$platform.name][this.payment]();
  }

  // 预支付
  prepay(channel) {
    return new Promise(async (resolve, reject) => {
      let data = {
        id: this.id,
        channelCode: channel,
        channelExtras: {}
      };
      // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid
      if (['wx_pub', 'wx_lite'].includes(channel)) {
        const openid = await sheep.$platform.useProvider('wechat').getOpenid();
        // 如果获取不到 openid，微信无法发起支付，此时需要引导
        if (!openid) {
          this.bindWeixin();
          return;
        }
        data.channelExtras.openid = openid;
      }
      // 发起预支付 API 调用
      PayOrderApi.submitOrder(data).then((res) => {
        // 成功时
        res.code === 0 && resolve(res);
        // 失败时
        if (res.code !== 0 && res.msg.indexOf('无效的openid') >= 0) {
          // 特殊逻辑：微信公众号、小程序支付时，必须传入 openid 不正确的情况
          if (res.msg.indexOf('无效的openid') >= 0 // 获取的 openid 不正确时，或者随便输入了个 openid
            || res.msg.indexOf('下单账号与支付账号不一致') >= 0) { // https://developers.weixin.qq.com/community/develop/doc/00008c53c347804beec82aed051c00
            this.bindWeixin();
          }
        }
      });
    });
  }
  // #ifdef H5
  // 微信公众号 JSSDK 支付
  async wechatOfficialAccountPay() {
    let { code, data } = await this.prepay('wx_pub');
    if (code !== 0) {
      return;
    }
    const payConfig = JSON.parse(data.displayContent);
    $wxsdk.wxpay(payConfig, {
      success: () => {
        this.payResult('success');
      },
      cancel: () => {
        sheep.$helper.toast('支付已手动取消');
      },
      fail: (error) => {
        if (error.errMsg.indexOf('chooseWXPay:没有此SDK或暂不支持此SDK模拟') >= 0) {
          sheep.$helper.toast('发起微信支付失败，原因：可能是微信开发者工具不支持，建议使用微信打开网页后支付');
          return
        }
        this.payResult('fail');
      },
    });
  }

  // 浏览器微信 H5 支付 TODO 芋艿：待接入
  async wechatWapPay() {
    const { error, data } = await this.prepay();
    if (error === 0) {
      const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment}&orderType=${this.orderType}`;
      location.href = `${data.pay_data.h5_url}&redirect_url=${encodeURIComponent(redirect_url)}`;
    }
  }

  // 支付链接  TODO 芋艿：待接入
  async redirectPay() {
    let { error, data } = await this.prepay();
    if (error === 0) {
      const redirect_url = `${getRootUrl()}pages/pay/result?id=${this.id}&payment=${this.payment}&orderType=${this.orderType}`;
      location.href = data.pay_data + encodeURIComponent(redirect_url);
    }
  }

  // #endif

  // 微信小程序支付
  async wechatMiniProgramPay() {
    // let that = this;
    let { code, data } = await this.prepay('wx_lite');
    if (code !== 0) {
      return;
    }
    // 调用微信小程序支付
    const payConfig = JSON.parse(data.displayContent);
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: payConfig.timeStamp,
      nonceStr: payConfig.nonceStr,
      package: payConfig.packageValue,
      signType: payConfig.signType,
      paySign: payConfig.paySign,
      success: (res) => {
        this.payResult('success');
      },
      fail: (err) => {
        if (err.errMsg === 'requestPayment:fail cancel') {
          sheep.$helper.toast('支付已手动取消');
        } else {
          this.payResult('fail');
        }
      },
    });
  }

  // 余额支付
  async walletPay() {
    const { code } = await this.prepay('wallet');
    code === 0 && this.payResult('success');
  }

  // 模拟支付
  async mockPay() {
    const { code } = await this.prepay('mock');
    code === 0 && this.payResult('success');
  }

  // 支付宝复制链接支付  TODO 芋艿：待接入
  async copyPayLink() {
    let that = this;
    let { error, data } = await this.prepay();
    if (error === 0) {
      // 引入showModal 点击确认 复制链接；
      uni.showModal({
        title: '支付宝支付',
        content: '复制链接到外部浏览器',
        confirmText: '复制链接',
        success: (res) => {
          if (res.confirm) {
            sheep.$helper.copyText(data.pay_data);
          }
        },
      });
    }
  }

  // 支付宝支付  TODO 芋艿：待接入
  async alipay() {
    let that = this;
    const { error, data } = await this.prepay();
    if (error === 0) {
      uni.requestPayment({
        provider: 'alipay',
        orderInfo: data.pay_data, //支付宝订单数据
        success: (res) => {
          that.payResult('success');
        },
        fail: (err) => {
          if (err.errMsg === 'requestPayment:fail [paymentAlipay:62001]user cancel') {
            sheep.$helper.toast('支付已手动取消');
          } else {
            that.payResult('fail');
          }
        },
      });
    }
  }

  // 微信支付  TODO 芋艿：待接入
  async wechatAppPay() {
    let that = this;
    let { error, data } = await this.prepay();
    if (error === 0) {
      uni.requestPayment({
        provider: 'wxpay',
        orderInfo: data.pay_data, //微信订单数据(官方说是string。实测为object)
        success: (res) => {
          that.payResult('success');
        },
        fail: (err) => {
          err.errMsg !== 'requestPayment:fail cancel' && that.payResult('fail');
        },
      });
    }
  }

  // 支付结果跳转,success:成功，fail:失败
  payResult(resultType) {
    sheep.$router.redirect('/pages/pay/result', {
      id: this.id,
      orderType: this.orderType,
      payState: resultType
    });
  }

  // 引导绑定微信
  bindWeixin() {
    uni.showModal({
      title: '微信支付',
      content: '请先绑定微信再使用微信支付',
      success: function (res) {
        if (res.confirm) {
          sheep.$platform.useProvider('wechat').bind();
        }
      },
    });
  }

}

export function getPayMethods(channels) {
  const payMethods = [
    {
      icon: '/static/img/shop/pay/wechat.png',
      title: '微信支付',
      value: 'wechat',
      disabled: true,
    },
    {
      icon: '/static/img/shop/pay/alipay.png',
      title: '支付宝支付',
      value: 'alipay',
      disabled: true,
    },
    {
      icon: '/static/img/shop/pay/wallet.png',
      title: '余额支付',
      value: 'wallet',
      disabled: true,
    },
    {
      icon: '/static/img/shop/pay/apple.png',
      title: 'Apple Pay',
      value: 'apple',
      disabled: true,
    },
    {
      icon: '/static/img/shop/pay/wallet.png',
      title: '模拟支付',
      value: 'mock',
      disabled: true,
    }
  ];
  const platform = sheep.$platform.name

  // 1. 处理【微信支付】
  const wechatMethod = payMethods[0];
  if ((platform === 'WechatOfficialAccount' && channels.includes('wx_pub'))
    || (platform === 'WechatMiniProgram' && channels.includes('wx_lite'))
    || (platform === 'App' && channels.includes('wx_app'))) {
    wechatMethod.disabled = false;
  }
  wechatMethod.disabled = false; // TODO 芋艿：临时测试

  // 2. 处理【支付宝支付】
  const alipayMethod = payMethods[1];
  if ((platform === 'WechatOfficialAccount' && channels.includes('alipay_wap'))
    || platform === 'WechatMiniProgram' && channels.includes('alipay_wap')
    || platform === 'App' && channels.includes('alipay_app')) {
    alipayMethod.disabled = false;
  }
  // 3. 处理【余额支付】
  const walletMethod = payMethods[2];
  if (channels.includes('wallet')) {
    walletMethod.disabled = false;
  }
  // 4. 处理【苹果支付】TODO 芋艿：未来接入
  // 5. 处理【模拟支付】
  const mockMethod = payMethods[4];
  if (channels.includes('mock')) {
    mockMethod.disabled = false;
  }
  return payMethods;
}
喔烨鸭
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp全源可二开即时通讯APPIM聊天APP社交APP 安卓+苹果APP+PC端+H5四合一源码通讯软件.zip
11-09
技术路线 后端开发语言：PHP （原生架构） 前端开发语言：uniapp（混合开发，非纯原生） socket推送：GateWayWorker（支持分布式部署，高并发，抗压能力强，未采用第三方付费推送服务） 数据库：mysql 开发工具：hbuiderX，phpstorm 目前支持android、ios，pc网页，h5，不提供ios签名、软著申请、上架服务等。 服务器配置 ： 服务器操作系统： Linux Centos 7.x（不支持unbutun） 软件环境： php 5.6 +Apache2.4（或nginx）+MySQL5.6 （推荐使用宝塔） 第三方插件：FFmpeg 除以上配置，未用到任何第三方付费api,无需支付高昂的运营成本 性能参考： 同时在线人数受限于服务器内存，一般24G内存服务器可以支持大概120W并发连接。 用户活跃度受限于服务器cpu处理能力，一台24核服务器可以达到45W每秒的吞吐量
Bwsaas多端SAAS平台运营系统uniapp多终端公众号，H5，小程序，PC，APP
05-21
新增 1配置设置页面，允许单配置组提交 2增加bwmall应用门店功能（后端） 3服务商支付功能（服务商appid,服务商密钥等配置） 4设置安全密码删除多余接口，用h5发短信逻辑 5微信图文管理页面,异常页面修改为自定义页面 6微信认证插件表增加appid字段 修复 1框架API接口基类获取header信息错误catch 2修复订单表格table样式 3fix 应用配置Bug 4更改系统日志文件名错误 5fix 微信管理错误 6fix 微信操作错误psr包 7fix 小程序开放平台操作 8fix 继承基类文件代码 “Bwsaas多端SAAS平台运营系统”接入微信开放平台（第三方服务商）,微信公众号管理及微信小程序一键授权发布，具备多租户管理、多应用上架购买、多终端（公众号，H5，小程序，PC，APP）可接入、强大的权限节点控制（管理员权限，租户及租户应用权限）、 强大的一键CRUD生成代码（页面JS,控制器controller，模型及关联模型model）、基于ThinkPHP6及layui快速布局扩展等等特性、详细的二次开发及系统使用说明文档！让您不管是自己学习使用还是公司运营，轻松
基于uniapp重机械维修系统APP项目源码
12-20
本系统是作为用户与维修方交互的承载平台，并不直接负责完成设备的实际维修工作，系统的主要功能就是——报修. （1）设备绑定 用户自行将设备添加进系统信息中，在使用报修/保养功能时，选择已绑定的设备进行信息填充; （2）设备报修/保养 用户在主界面选择设备报修或保养服务，填写报修信息并且定位报修地点,确认报修信息之后，以工单形式提交至报修地点所属行政区的区域主管处，由区域主管通过后台管理系统进行维修任务的分派;任务分派至选中的维修员终端，维修员选择是否接单。若成功接单，则进入维修工作流程；若拒绝接单，则将该任务工单回滚至区域主管处，再次派单; （3）工作终端 该部分由维修员终端执行，是维修工作开始进行后的操作，目的是完善任务工单信息，用户通过客户终端查看维修进度 （4）关于用户 在维修员接单并开始维修工作流程后，用户需要执行两次支付操作： ①维修员根据检查情况选择维修中所使用到的配件后，用户需提前支付配件费用； ②维修员完成维修工作流程后，输入本次服务的人工服务费用（不含配件费），用户进行支付
tp5_uniapp.rar
06-30
使用uniapp+tp5 框架,用于选择区域，配送货品订单，有配送人和用户角色切换，不同角色不同的操作功能界面，线下支付功能
小程序微信支付功能配置方法示例详解【基于thinkPHP】
10-17
主要介绍了小程序微信支付功能配置方法,结合实例形式分析了基于thinkPHP的微信小程序支付功能相关操作技巧与注意事项,需要的朋友可以参考下
uniapp支付宝支付开发php,APP(UniAPP) 支付宝支付操作指导 + 遇到的坑(PHP实现)
weixin_36468605的博客
03-17 782
前言近期进行 Uniapp 的开发学习，最后阶段用到了 支付宝支付，相对移动应用的开发周期和专业复杂度，个人觉得这个前端框架还是很有可取之处的本人在此记录一下，初涉此框架遇到的极有可能入坑的地方，希前言近期进行 Uniapp 的开发学习，最后阶段用到了 支付宝支付，相对移动应用的开发周期和专业复杂度，个人觉得这个前端框架还是很有可取之处的本人在此记录一下，初涉此框架遇到的极有可能入坑的地方，希望道...
uniapp支付宝支付开发php,uniapp如何实现支付功能
weixin_28487725的博客
03-17 1103
uniapp实现支付功能的方法：首先获取可用的支付环境；然后判断用户是否有支付宝支付环境；接着再从后端接口获取相关数据配置到orderInfo里；最后拿到后端返回数据后调用相关支付函数。本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。推荐(免费)：uni-app开发教程uniapp实现支付功能的方法：//支付宝支付zfbPay(){uni.getPro...
uniapp 微信支付
qq_39882919的博客
04-22 782
payDocker(id, phone) { let that = this; if (uni.getStorageSync('userinfo')) { let payData = { userId: uni.getStorageSync('userinfo').id, doctorId: id, payType: 1, payEquipment: 'JSAPI' }; console.log(payData) uni..
uniapp实现微信支付、支付宝支付
热门推荐
Mitin_的博客
04-05 1万+
本文只介绍了代码片段，如果需要支付前准备的流程可以继续浏览查找（狗头）该方法是开发uniapp时使用的，未涉及5+APP前端部分并不复杂，只是有些流程步骤有些杂乱，正常都是后端去和微信交互。前端只需要将每个参数对应的填好，发送请求即可。
UniApp点餐小程序和后端的SpringBoot源码
03-21
简介 这个系统分为两个主要部分：前端的UniApp点餐小程序和后端的SpringBoot服务。UniApp负责用户界面和交互，...支付集成：集成微信支付API，支持在线支付功能。 餐厅信息：提供餐厅的详细信息，如地址、联系方式等。
uniapp + uniCloud+unipay 实现微信小程序支付功能
qq_44830060的博客
07-01 3166
uni-pay
uni微信小程序实现支付功能
qq_37570945的博客
12-02 190
startPay() { var _this = this; uni.login({ provider: 'weixin', success: function(ress) { var orders = { payClass: 'org.jeecg.modules.pay.service.MallPayService', orderId: _this.mallPayId,//支付之前，后台会返回的支付id payMe.
微信小程序支付（2）Uni-app支付页面前端代码
大强博客
08-31 1897
HelloUniApp\pages\API\request-payment\request-payment.vue <template> <view> <page-head :title="title"></page-head> <view class="uni-padding-wrap"> <view style="background:#FFF; padding:50rpx 0;"> <view class="
uniapp日期区间选择器
最新发布
羽筠的博客
05-07 70
uniapp日期区间选择器 在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器： - 限制有效日期范围开始日期为 2024-01-01，结束日期为当日； - 默认日期区间为当日向前计算的7日区间； - 选择开始时间后，判断不可大于结束时间，且重置开始时间为结束时间； - 选择结束时间后，判断不可小于开始时间，且重置结束时间为开始时间； 示例代码： html： CSS： data设置参数数据： created 或 onLoad 中，调用请求接口获取筛选项数据方法： methods 处理方法：
uniapp 微信开发工具上访问正常，真机调试一直跨域报错
weixin_44565776的博客
05-04 386
Accept-Ranges头部的作用就是告诉客户端，服务器是否支持这种“只请求部分资源”的操作。真机调试加上了这种限制。其主要作用：大文件的下载、流媒体的播放以及节省带宽和流量。
uniapp 桌面应用插件 Ba-Launcher
三杯五岳
05-01 625
Ba-Launcher 可以让你的应用成为简单的桌面应用。
uniapp视频播放器（h5+app）
farme_guan的博客
04-27 1488
这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。
uniapp支付宝支付
08-03
在uniapp中实现支付宝支付的功能，可以通过以下步骤进行操作。首先，需要在移动应用中引入支付宝支付的功能，而使用uniapp框架是一个很好的选择。具体的实现步骤如下： 1. 准备工作：在uniapp项目中，需要进行一些准备工作，包括引入支付宝支付的相关代码和配置。 2. 调用支付宝支付：在uniapp中，可以通过调用支付宝支付的函数来实现支付功能。可以使用以下代码来调起支付宝支付： ``` function callAlipay(orderInfo) { Alipay.pay({ orderStr: orderInfo //支付请求参数字符串 }, function(result) { //支付成功回调函数 uni.showToast({ title: '支付成功', icon: 'success' }); }, function(error) { //支付失败回调函数 uni.showToast({ title: '支付失败' }); }); } ``` 3. 配置支付宝支付：在uniapp的manifest.json文件中，需要进行一些配置来启用支付宝支付功能。具体的配置包括在App模块权限选择中勾选支付权限，在App SDK配置中勾选支付宝支付，并填写支付宝的相关信息。 4. 打包和测试：完成以上配置后，可以进行打包并在真机上进行测试。可以使用uni.getProvider函数来获取支付配置的结果列表。 需要注意的是，以上步骤是基于uniapp框架实现支付宝支付的一般流程，具体的实现细节还需要参考支付宝官方文档和uniapp的相关文档进行配置和开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值