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、微信分享
