uniapp APP微信登录、支付、分享以及支付宝支付 实战踩坑记录

1、微信支付和支付宝支付

  先上代码、封装好了的组件

   html部分

    

<template>
	<view class="rows">
		<!------------------------------充值的弹框开始------------------------------>
		<uni-popup class="common-popup" ref="popupChongZhi" :is-mask-click="false" type="bottom">
			<uni-icons class="close" type="closeempty" @click="$refs.popupChongZhi.close()"></uni-icons>
			<text class="popup-title">充值</text>
			<view class="czlist">
				<view v-for="(item,index) in balan" :class="{ 'activeCss': active == index }"
					@click="activeHandler(index)">
					<text class="em-price">{{ item.tmdNumber }}</text>
					<text>¥{{systemStyle?item.goodsPriceAndroid:item.goodsPriceIos }}</text>
				</view>
			</view>
			<view class="yue">余额：<text class="em-price">{{ userInfo.accountBalance + userInfo.giftBalance }}</text>
			</view>
			<view class="xieyi">充值即同意<navigator url="/pages/other/agreement?agremType=3">《充值协议》</navigator>
			</view>
			<button @click="iosAndAndroid" :disabled="btnloading">充值</button>
		</uni-popup>
		<!------------------------------充值的弹框结束------------------------------>
		<!-- 选择充值方式 -->
		<uni-popup class="common-popup" ref="modeOfPayment" :is-mask-click="false" type="bottom">
			<uni-icons class="close" type="closeempty" @click="$refs.modeOfPayment.close()"></uni-icons>
			<text class="popup-title">选择充值方式</text>
			<view class="wxZfb">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd">
						<view class="radioBox">
							<image src="@/static/img/common/wx.png" mode="aspectFill" />
							<view>微信支付</view>
							<radio value="WXPAY" :checked="true" color="#B48732" />
						</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd zfb">
						<view class="radioBox">
							<image src="@/static/img/common/zfb.png" mode="aspectFill" />
							<view>支付宝支付</view>
							<radio value="ALIPAY" color="#B48732" />
						</view>
					</label>
				</radio-group>
				<button @click="ontopThat">立即支付</button>
			</view>
		</uni-popup>
		<!-- 主动查询订单状态 -->
		<uni-popup class="common-popup" ref="inquire" :is-mask-click="false" type="center">
			<text class="popup-title">是否支付完成</text>
			<button :disabled="btnloading" @click='inquireHandler'>已支付</button>
			<button :disabled="btnloading" class="wzf" @click="$refs.inquire.close()">未支付</button>
		</uni-popup>
	</view>
</template>

css部分：　　

  

<style scoped>
	.wxZfb image {
		width: 56rpx;
		height: 56rpx;
	}

	.wxZfb .radioBox {
		display: flex;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.8);
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.wxZfb .radioBox view {
		margin-left: 24rpx;
	}

	.wxZfb .radioBox radio {
		flex: 1;
		text-align: right;
	}

	.wxZfb .radioBox:nth-last-child(1) {
		padding-bottom: 78rpx;
	}

	.common-popup .wzf {
		background: transparent;
		color: #000;
		border: 1px solid #ccc;
	}
</style>
/*-------下面这段有多余其它代码需要筛除--------*/
/*------------------------------充值的弹框开始------------------------------*/
.common-popup {
	background: #fff!important;
}
.czlist .activeCss {
    border-color: #B48732
}
/deep/.uni-popup__wrapper.bottom{
    background-color: #fff!important;
}
.common-popup/deep/ .uni-popup__wrapper{
    width: auto;
    padding: 32rpx 40rpx 40rpx;
}
.popup-title{
    margin-bottom: 0;
    line-height: 56rpx;
    font-size: 40rpx;
    font-weight: 500;
}
.czlist{
    display: flex;
    flex-wrap: wrap;
    margin-top: 32rpx;
}
.czlist>view{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 210rpx;
    height: 150rpx;
    border: 2rpx solid rgba(180, 135, 50, .06);
    margin-left: 20rpx;
    border-radius: 16rpx;
    background-color: rgba(180, 135, 50, .06);
}
.czlist>view:nth-child(3n-2){margin-left: 0}
.czlist>view:nth-child(3n)~view{margin-top: 20rpx}
.czlist>view.active{border-color: #B48732}
.czlist>view .em-price{
    display: flex;
    font-size: 36rpx;
}
.czlist>view .em-price:before{
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
    line-height: 32rpx;
}
.czlist>view text:nth-child(2){
    margin-top: 22rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    color: rgba(0,0,0,0.2);
}
.yue{
    display: flex;
    align-items: center;
    margin-top: 56rpx;
    line-height: 40rpx;
    font-size: 28rpx;
}
.yue .em-price{
    display: flex;
    font-size: 32rpx;
}
.yue .em-price:before{
    width: 28rpx;
    height: 28rpx;
}
.xieyi{
    display: flex;
    margin-top: 32rpx;
    font-size: 24rpx;
    color: rgba(0,0,0,0.2);
    align-items: center;
    justify-content: center;
}
.xieyi navigator{color: #5A4614;}
.uni-popup__wrapper uni-button{
    width: 650rpx;
    height: 88rpx;
    margin-top: 20rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 88rpx;
}
.quanmatip{
    margin-top: 80rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
}
.common-popup input{
    height: 84rpx;
    padding: 0 32rpx;
    margin: 32rpx 0 80rpx;
    background-color: #F9F9F9;
    border-radius: 42rpx;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
}

　js逻辑代码

<script>
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				btnloading: false,
				active: 0,
				balan: [], //充值数据配置
				agreementData: [], //用户协议数据
				radioVal: "WXPAY", //默认选中1微信2支付宝
				show: false, //弹出层显隐
				queryData: {
					paymentPlatform: 'APP',
					paymentChannel: 'WXPAY',
				},
				orderForm: undefined, //订单ID
				systemStyle: 1 //0ios,1安卓
			}
		},
		onLoad(option) {
			this.balanCeconfiguration()
			this.agreementHandler()

		},
		methods: {
			// 判断是ios还是安卓
			iosAndAndroid() {
				if (this.systemStyle) {
					this.$refs.modeOfPayment.open();
					return
				}
				uni.showToast({
					title: "IOS支付暂未开放，请耐心等待！",
					icon: 'none',
					mask: true,
					duration: 2500,
				});
				// IOS支付
			},
			open() {
				this.$refs.popupChongZhi.open();
			},
			/*------------------------充值开始-----------------------*/
			activeHandler(index) {
				this.active = index;
				this.queryData.configId = this.balan[index].configId;
			},
			// 充值配置
			balanCeconfiguration() {
				let ua = uni.getSystemInfoSync().platform;
				if (/ios/i.test(ua)) {
					this.systemStyle = 0
				} else {
					this.systemStyle = 1
				}
				this.$request.get('/app/order/tmdConfig').then(res => {
					this.balan = res.data;
					this.queryData.configId = res.data[0].configId
				})
			},
			// 充值协议
			agreementHandler() {
				// 1用户协议 2隐私协议 3购买须知
				this.$request.get(`/app/user/getAgreement/3`).then(res => {
					this.agreementData = res.data;
				})
			},
			// 点击充值
			ontopThat() {
				this.queryData.paymentChannel = this.radioVal;
				this.$request.post(`/pay/placeOrder`, this.queryData).then(response => {
					this.orderForm = response.data.orderId;
					uni.hideLoading();
					if (this.radioVal == 'ALIPAY') {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: response.data.url, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: (res) => {
								this.$refs.modeOfPayment.close();
								this.$refs.inquire.open();
							},
							fail: (err) => {}
						});
						return
					}
					// 微信支付
					let orderInfo = {
						appid: response.data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						noncestr: response.data.nonceStr, // 随机字符串
						package: response.data.package, // 固定值
						partnerid: response.data.partnerid, // 微信支付商户号
						prepayid: response.data.url, // 统一下单订单号
						timestamp: response.data.timeStamp, // 时间戳（单位：秒）
						sign: response.data.paySign // 签名，这里用的 MD5/RSA 签名
					}
					console.log(11111,orderInfo.appid);
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: orderInfo,
						success: (res) => {
							this.$refs.modeOfPayment.close();
							this.$refs.inquire.open();
						},
						fail(e) {
							if (e && e.code == -8) {
								uni.showToast({
									title: "支付失败,未安装微信客户端",
									icon: 'none',
									mask: true,
									duration: 2500,
								});
								return
							}
							uni.showToast({
								title: `支付失败`,
								icon: 'none',
								mask: true,
								duration: 2500,
							});

						}
					})

				})
			},
			radioChange(val) {
				this.radioVal = val.target.value; //默认选中1微信2支付宝
			},
			inquireHandler() {
				console.log("参数1", this.orderForm)
				console.log("参数2", this.queryData.paymentChannel)
				this.$request.get(`/pay/queryPay/${this.orderForm}/${this.queryData.paymentChannel}`).then(res => {
					this.$refs.inquire.close()
					this.$emit('getTableTmd')
					if (res.data) {
						uni.showToast({
							title: "支付成功",
							icon: 'none',
							mask: true,
							duration: 2500,
						});
					} else {
						uni.showToast({
							title: "支付失败",
							icon: 'none',
							mask: true,
							duration: 2500,
						});
					}
				})
			}
		}
	}
</script>

需要应用界面调用组件

<Recharge ref='play' v-on:getTableTmd='inquire' />	

import Recharge from '@/components/recharge/recharge.vue'; //支付弹窗
// 刷新数据 支付成功后刷新充值数据
			inquire() {
				this.getTableTmd();
				this.$store.dispatch('GetInfo').then((res) => {}).catch(err => {})
			},

2、微信登录

3、微信分享