赞
踩
源代码和出现的问题:
- <template></template>
- <script>
- toPay(orderNumber) {
- let token = uni.getStorageSync('token');
- let query = `?orderNumber=${orderNumber}&token=${token}&payWay=${this.payWay}`;
- if (this.payPrice() == 0) {
- let url = `${this.jk.orderPay}${query}`;
- this.ajax.get(url).then(res => {
- uni.hideLoading();
- this.common.UreLaunch('/pages/other/succ');
- });
- } else {
- if (this.payWay == 1) { //支付宝
- //#ifdef APP-PLUS
- //console.log('plus app')
- let wv = plus.webview.create("", "custom-webview", {
- // plusrequire:"none",
- 'uni-app': 'none',
- });
- wv.loadURL(`${urlConfig}${this.jk.orderPay}${query}` +'&isApp=0');
- //#endif
- //#ifndef APP-PLUS
- let url = `${urlConfig}${this.jk.orderPay}${query}`;
- location.href = url;
- //#endif
- } else if (this.payWay == 2) { //微信
- //#ifdef APP-PLUS
-
- //#endif
- //#ifndef APP-PLUS
- //判断是否在微信内置浏览器中
- const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
- if (isWeChat) {
- } else {
- }
- //#endif
- }
- }
- uni.hideLoading();
- },
- </script>

问题描述:
想实现成这样:
问题原因:
中间出现的插曲:(附加明白的知识点)
解决方法:引导页加这个方法链接。
uniapp h5支付宝支付后端返回Form表单,前端如何处理_支付宝支付返回form表单-CSDN博客
order.vue订单页面的代码
补充:这里的支付宝支付还给后端传了字段,让后端判断一下,如果是app调起的支付,让后端返回url地址,如果是H5调起的支付,让后端返回from表单。
- <template></template>
- <script>
- toPay(orderNumber) {
- let token = uni.getStorageSync('token');
- let query = `?orderNumber=${orderNumber}&token=${token}&payWay=${this.payWay}`;
- if (this.payPrice() == 0) {
- let url = `${this.jk.orderPay}${query}`;
- this.ajax.get(url).then(res => {
- uni.hideLoading();
- this.common.UreLaunch('/pages/other/succ');
- });
- } else {
- if (this.payWay == 1) { //支付宝
- //#ifdef APP-PLUS
- //console.log('plus app')
- let wv = plus.webview.create("", "custom-webview", {
- // plusrequire:"none",
- 'uni-app': 'none',
- });
- wv.loadURL(`${urlConfig}${this.jk.orderPay}${query}` +'&isApp=0');
- //#endif
- //#ifndef APP-PLUS
- let url = `${this.jk.orderPay}${query}`+'&isApp=1';
- let sign = Date.now();
- this.ajax.get(url).then(res => {
- let sub = res.data;
- let cleanedHtml = sub.replace(/<script.*?>[\s\S]*?<\/script>/gi, '');
- let data1 = {
- sign: sign,
- body : cleanedHtml
- }
- console.log(data1);
- this.ajax.post(this.jk.AlipayPost, data1).then(res => {
- uni.navigateTo({
- url: '/pages/product/paymentPage?sign=' +sign
- })
- })
- }).catch(err => {
- console.error('请求错误', err)
- })
- //#endif
- } else if (this.payWay == 2) { //微信
- //#ifdef APP-PLUS
-
- //#endif
- //#ifndef APP-PLUS
- //判断是否在微信内置浏览器中
- const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
- if (isWeChat) {
- } else {
-
- }
- //#endif
- }
- }
- uni.hideLoading();
- },
- </script>

跳转引导页面的代码
- <template>
- <view>
- <view :class="!show?'back back-common':'back-common'">
- <image src="../../static/jianjianjian.png"
- style="width: 20%; height: 12%; margin-left: 600rpx; margin-top: -100rpx;"></image>
- <view style="font-size: 35rpx;"> 请在菜单中选择在浏览器中打开,以完成支付</view>
- <image v-if="isWeixin && !isIOS" src="../../static/mapliulanqi.png" style="width: 23%; height: 10%; margin-top: 100rpx; margin-bottom: 20rpx; "></image>
- <image v-else-if="isWeixin && isIOS" src="../../static/lalalalalall.png" style="width: 30%; height: 14%; margin-top: 100rpx;"></image>
- <view v-if="isWeixin && !isIOS">在浏览器中打开</view>
- <view v-else-if="isWeixin && isIOS">在Safari中打开</view>
- </view>
- <div class="body">
- </div>
- </view>
- </template>
-
- <script>
- import common from '../../common/common.js';
- export default {
- data() {
- return {
- formUrl: '',
- show: false,
- isWeixin: false,
- isIOS: false,
- };
- },
- onLoad() {
- let sign = this.$route.query.sign
- if(sign){
- this.getForm(sign)
- }
-
- },
- mounted() {
- common.hidePageHeadInWechat();
- },
- methods: {
- getForm(sign) {
- this.ajax.get(this.jk.AlipayGet + '?sign=' + sign).then(res => {
- this.formUrl = res.data
- this.IsWeixin(); // 调用 IsWeixin 方法
- });
- },
- IsWeixin() {
- var ua = window.navigator.userAgent.toLowerCase();
- this.isWeixin = /micromessenger/i.test(ua);
- this.isIOS = /iphone|ipad|ipod/i.test(ua);
-
- if (!this.isWeixin) {
- if (this.formUrl) {
- document.querySelector('body').innerHTML = this.formUrl;
- } else {
- console.log("没有订单");
- }
- setTimeout(() => {
- this.$nextTick(() => {
- if (document.forms['0']) {
- document.forms['0'].submit();
- }
- });
- }, 500);
- } else {
- this.show = true;
- }
- }
-
-
- }
- };
- </script>
-
- <style lang="less">
- .back {
- display: none;
- }
-
-
- .back-common {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.0.2);
- display: flex;
- flex-direction: column;
- align-items: center;
- /* 垂直居中 */
- justify-content: center;
- /* 水平居中 */
- width: 100%;
- margin-top: -400rpx;
- }
- </style>

引导页面的效果图:(安卓内置浏览器和苹果内置浏览器不一样的图标,做的有判断)
涉及到的知识点:涉及到很多东西,登录鉴权,调用支付拼接参数,还有支付完成的回调,以及支付参数的编码转换等等
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。