当前位置:   article > 正文

uniapp多端支付,里面的H5调起支付宝支付,分为微信内置浏览器和普通浏览器_uniapp微信h5支付需要前后端代码

uniapp微信h5支付需要前后端代码

源代码和出现的问题:

  1. <template></template>
  2. <script>
  3. toPay(orderNumber) {
  4. let token = uni.getStorageSync('token');
  5. let query = `?orderNumber=${orderNumber}&token=${token}&payWay=${this.payWay}`;
  6. if (this.payPrice() == 0) {
  7. let url = `${this.jk.orderPay}${query}`;
  8. this.ajax.get(url).then(res => {
  9. uni.hideLoading();
  10. this.common.UreLaunch('/pages/other/succ');
  11. });
  12. } else {
  13. if (this.payWay == 1) { //支付宝
  14. //#ifdef APP-PLUS
  15. //console.log('plus app')
  16. let wv = plus.webview.create("", "custom-webview", {
  17. // plusrequire:"none",
  18. 'uni-app': 'none',
  19. });
  20. wv.loadURL(`${urlConfig}${this.jk.orderPay}${query}` +'&isApp=0');
  21. //#endif
  22. //#ifndef APP-PLUS
  23. let url = `${urlConfig}${this.jk.orderPay}${query}`;
  24. location.href = url;
  25. //#endif
  26. } else if (this.payWay == 2) { //微信
  27. //#ifdef APP-PLUS
  28. //#endif
  29. //#ifndef APP-PLUS
  30. //判断是否在微信内置浏览器中
  31. const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
  32. if (isWeChat) {
  33. } else {
  34. }
  35. //#endif
  36. }
  37. }
  38. uni.hideLoading();
  39. },
  40. </script>

问题描述:

想实现成这样:

问题原因:

中间出现的插曲:(附加明白的知识点)

解决方法:引导页加这个方法链接。

uniapp h5支付宝支付后端返回Form表单,前端如何处理_支付宝支付返回form表单-CSDN博客

order.vue订单页面的代码

补充:这里的支付宝支付还给后端传了字段,让后端判断一下,如果是app调起的支付,让后端返回url地址,如果是H5调起的支付,让后端返回from表单

  1. <template></template>
  2. <script>
  3. toPay(orderNumber) {
  4. let token = uni.getStorageSync('token');
  5. let query = `?orderNumber=${orderNumber}&token=${token}&payWay=${this.payWay}`;
  6. if (this.payPrice() == 0) {
  7. let url = `${this.jk.orderPay}${query}`;
  8. this.ajax.get(url).then(res => {
  9. uni.hideLoading();
  10. this.common.UreLaunch('/pages/other/succ');
  11. });
  12. } else {
  13. if (this.payWay == 1) { //支付宝
  14. //#ifdef APP-PLUS
  15. //console.log('plus app')
  16. let wv = plus.webview.create("", "custom-webview", {
  17. // plusrequire:"none",
  18. 'uni-app': 'none',
  19. });
  20. wv.loadURL(`${urlConfig}${this.jk.orderPay}${query}` +'&isApp=0');
  21. //#endif
  22. //#ifndef APP-PLUS
  23. let url = `${this.jk.orderPay}${query}`+'&isApp=1';
  24. let sign = Date.now();
  25. this.ajax.get(url).then(res => {
  26. let sub = res.data;
  27. let cleanedHtml = sub.replace(/<script.*?>[\s\S]*?<\/script>/gi, '');
  28. let data1 = {
  29. sign: sign,
  30. body : cleanedHtml
  31. }
  32. console.log(data1);
  33. this.ajax.post(this.jk.AlipayPost, data1).then(res => {
  34. uni.navigateTo({
  35. url: '/pages/product/paymentPage?sign=' +sign
  36. })
  37. })
  38. }).catch(err => {
  39. console.error('请求错误', err)
  40. })
  41. //#endif
  42. } else if (this.payWay == 2) { //微信
  43. //#ifdef APP-PLUS
  44. //#endif
  45. //#ifndef APP-PLUS
  46. //判断是否在微信内置浏览器中
  47. const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
  48. if (isWeChat) {
  49. } else {
  50. }
  51. //#endif
  52. }
  53. }
  54. uni.hideLoading();
  55. },
  56. </script>

跳转引导页面的代码

  1. <template>
  2. <view>
  3. <view :class="!show?'back back-common':'back-common'">
  4. <image src="../../static/jianjianjian.png"
  5. style="width: 20%; height: 12%; margin-left: 600rpx; margin-top: -100rpx;"></image>
  6. <view style="font-size: 35rpx;"> 请在菜单中选择在浏览器中打开,以完成支付</view>
  7. <image v-if="isWeixin && !isIOS" src="../../static/mapliulanqi.png" style="width: 23%; height: 10%; margin-top: 100rpx; margin-bottom: 20rpx; "></image>
  8. <image v-else-if="isWeixin && isIOS" src="../../static/lalalalalall.png" style="width: 30%; height: 14%; margin-top: 100rpx;"></image>
  9. <view v-if="isWeixin && !isIOS">在浏览器中打开</view>
  10. <view v-else-if="isWeixin && isIOS">在Safari中打开</view>
  11. </view>
  12. <div class="body">
  13. </div>
  14. </view>
  15. </template>
  16. <script>
  17. import common from '../../common/common.js';
  18. export default {
  19. data() {
  20. return {
  21. formUrl: '',
  22. show: false,
  23. isWeixin: false,
  24. isIOS: false,
  25. };
  26. },
  27. onLoad() {
  28. let sign = this.$route.query.sign
  29. if(sign){
  30. this.getForm(sign)
  31. }
  32. },
  33. mounted() {
  34. common.hidePageHeadInWechat();
  35. },
  36. methods: {
  37. getForm(sign) {
  38. this.ajax.get(this.jk.AlipayGet + '?sign=' + sign).then(res => {
  39. this.formUrl = res.data
  40. this.IsWeixin(); // 调用 IsWeixin 方法
  41. });
  42. },
  43. IsWeixin() {
  44. var ua = window.navigator.userAgent.toLowerCase();
  45. this.isWeixin = /micromessenger/i.test(ua);
  46. this.isIOS = /iphone|ipad|ipod/i.test(ua);
  47. if (!this.isWeixin) {
  48. if (this.formUrl) {
  49. document.querySelector('body').innerHTML = this.formUrl;
  50. } else {
  51. console.log("没有订单");
  52. }
  53. setTimeout(() => {
  54. this.$nextTick(() => {
  55. if (document.forms['0']) {
  56. document.forms['0'].submit();
  57. }
  58. });
  59. }, 500);
  60. } else {
  61. this.show = true;
  62. }
  63. }
  64. }
  65. };
  66. </script>
  67. <style lang="less">
  68. .back {
  69. display: none;
  70. }
  71. .back-common {
  72. position: fixed;
  73. top: 0;
  74. left: 0;
  75. right: 0;
  76. bottom: 0;
  77. background-color: rgba(0, 0, 0, 0.0.2);
  78. display: flex;
  79. flex-direction: column;
  80. align-items: center;
  81. /* 垂直居中 */
  82. justify-content: center;
  83. /* 水平居中 */
  84. width: 100%;
  85. margin-top: -400rpx;
  86. }
  87. </style>

引导页面的效果图:(安卓内置浏览器和苹果内置浏览器不一样的图标,做的有判断)

涉及到的知识点:涉及到很多东西,登录鉴权,调用支付拼接参数,还有支付完成的回调,以及支付参数的编码转换等等

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/700328
推荐阅读
相关标签
  

闽ICP备14008679号