uniapp支付宝微信支付功能实现

大纲:

uniapp支付宝微信支付功能实现_第1张图片

具体实现逻辑如下:

  1. 页面初始化时,通过onLoad方法获取传入的钱包(wallet)信息。

  2. 用户输入充值金额,使用watch监听输入值的变化,并更新选中的充值金额选项。判断金额是否大于0,若是小于0,则抛出金额异常信息;

  3. 用户选择充值金额,通过changeCheck方法更新选中的充值金额,并将选中状态进行更新。

  4. 用户点击支付宝或微信支付按钮,根据选择的支付方式调用不同的支付接口生成支付二维码。

  5. 支付二维码生成成功后,将二维码的值更新到qrArr.val中,并显示扫码支付弹窗。

  6. 启动定时器,定时查询支付状态,如果支付成功,则跳转至充值成功页面。

  7. 用户关闭扫码支付弹窗时,隐藏弹窗并清除定时器。

  8. 查询支付状态的方法分为getwxPayStatusgetAlipayStatus,分别用于查询微信支付和支付宝支付的支付状态。

  9. 支付成功后,弹出充值成功的提示,并且等待1秒后清空缓存并重新跳转至登录页面。





页面效果图展示:

uniapp支付宝微信支付功能实现_第2张图片

uniapp支付宝微信支付功能实现_第3张图片

uniapp支付宝微信支付功能实现_第4张图片 uniapp支付宝微信支付功能实现_第5张图片uniapp支付宝微信支付功能实现_第6张图片

你可能感兴趣的:(uniapp,uView,uni-app)