UniApp框架实现微信支付功能

<template>
    <view class="content">
        <input v-model="val" />
        <button @click="clickPay">点我扣款</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: 'Hello',
            val: 0.1
        };
    },
    methods: {
        clickPay() {
            let _this = this;

            //1.调用登录 获取code
            uni.login({
                provider: 'weixin',
                success(res) {
                    //2.调用微信官方接口,拿code去换openid
                    uni.request({
                        url: 'https://api.weixin.qq.com/sns/jscode2session',
                        data: {
                            appid: 'wx4f27fd51b9a7bfda',
                            secret: '1a9bfee5a8155f0020c5857cd9038674',
                            js_code: res.code,
                            grant_type: 'authorization_code' //固定值
                        },
                        success(obj) {
                            console.log(obj.data.openid, '用户真实openid............');
                            console.log({
                                openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
                                name: '电吹风体验卷',
                                money: _this.val,
                                code: '851230012314156910598',
                                payType: 1,
                                clientIp: '127.0.0.1'
                            });

                            //3.调用后端接口 拿到所需要的数据
                            uni.request({
                                url: 'http://api.100qhl.com:5024/v1/order/createOrder',
                                method: 'POST',
                                data: {
                                    openId: obj.data.openid, //微信用户的openid!!!扣谁的钱
                                    name: '好洗的地毯',
                                    money: Number(_this.val),
                                    code: '8512300123149105999015',
                                    payType: 1,
                                    clientIp: '127.0.0.1'
                                },
                                success(res) {
                                    console.log(res, '后端返回参数完毕.....');

                                    //4.调用官方接口扣钱!!!!

                                    uni.requestPayment({
                                        timeStamp: res.data.data.timeStamp,
                                        nonceStr: res.data.data.nonceStr,
                                        package: res.data.data.packageValue,
                                        signType: res.data.data.signType,
                                        paySign: res.data.data.paySign,
                                        complete(res) {
                                            console.log(res, '扣款返回的结果.~~~~~~~~~~~~~~~~~');
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>