?演示視頻

uniapp快速實現支付寶和微信app支付功能

uniapp快速開發app支付功能，其中支付寶能提供沙箱環境和正式環境。

總共四個頁面

• 環境選擇頁面
• 下單頁面
• 支付渠道選擇頁面
• 支付成功跳轉頁面

工程采用的是前后端分離，后端實現支付預下單功能，uniapp實現前端展示并拉起app支付。

后端接口一共三個。

• 登錄token獲取
• 支付渠道查詢
• 下單

其中測試環境使用支付寶沙箱賬號，qa環境使用支付寶正式賬號。

因此在下單的代碼中加上如下邏輯即可。

// 沙箱環境加入如下代碼 if(env=="test"){ var EnvUtils = plus.android.importClass('com.alipay.sdk.app.EnvUtils'); EnvUtils.setEnv(EnvUtils.EnvEnum.SANDBOX); }

環境選擇頁面代碼

<template><u--form ref="form" :model="form" labelWidth="90px"><u-form-item label="環境選擇"><u-radio-group v-model="form.env"><u-radio label="測試環境" name="test"></u-radio><u-radio label="qa環境" name="qa"></u-radio></u-radio-group></u-form-item><u-button class="custom-style" type="primary" @tap="getToken" style="width:100%; " text="token獲取"></u-button></u--form> </template>

下單頁面代碼

<template><view class="u-page"><view class="u-demo-block"><text class="u-demo-block__title">APP下單</text><view class="u-demo-block__content"><!-- 注意，如果需要兼容微信小程序，最好通過setRules方法設置rules規則 --><u--form labelPosition="left" :model="model1" ref="form1"><u-form-item label="金額" prop="order.totalFee" borderBottom ref="item1"><u--input v-model="model1.order.totalFee" border="none" placeholder="單位：元"></u--input></u-form-item><u-form-item label="交易單號" prop="order.thirdTradeNo" borderBottom ref="item1"><u--input v-model="model1.order.thirdTradeNo" border="none"></u--input></u-form-item><u-form-item label="商品標題" prop="order.productDesc" borderBottom ref="item1"><u--input v-model="model1.order.productDesc" border="none" placeholder="默認：app測試下單商品"></u--input></u-form-item><u-form-item label="支付人" prop="order.payUserName" borderBottom ref="item1"><u--input v-model="model1.order.payUserName" border="none" placeholder="默認:測試支付人"></u--input></u-form-item><u-form-item label="回調地址" prop="order.payNotifyUrl" borderBottom ref="item1"><u--input v-model="model1.order.payNotifyUrl" border="none" placeholder="支付通知回調接口地址"></u--input></u-form-item></u--form><u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button><u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button></view></view></view> </template>

支付渠道選擇頁面代碼

<template><view class="u-page"><u-navbar title="選擇支付渠道" @leftClick="navigateBack" safeAreaInsetTop fixed placeholder></u-navbar><view class="u-demo-block" style="display: flex;margin-top: 85rpx;align-items: center;justify-content: center;font-size: 26rpx"><text class="u-demo-block__title">支付剩余時間</text><view class="u-demo-block__content"><u-count-down :time="time" format="HH:mm:ss" autoStart millisecond @change="onChange"><view class="time"><view class="time__custom"><text class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text></view><text class="time__doc">:</text><view class="time__custom"><text class="time__custom__item">{{ timeData.minutes }}</text></view><text class="time__doc">:</text><view class="time__custom"><text class="time__custom__item">{{ timeData.seconds }}</text></view></view></u-count-down></view></view><view class="yellow bold mt-15 text-center"><u--text class="size-40" mode="price" align="center" size="40rpx" type="success" :bold="true" :text="orderParam.totalFee"></u--text></view><view class="bg-white pt-30 mt-80"><view class="size-34 bold plr-36 mb-20" style="margin-top: 20rpx;margin-bottom: 40rpx;">支付方式</view><u-radio-group class="plr-36" active-color="#ff9900" v-model="channelId"><u-radio:customStyle="{ marginBottom: '8px' }"v-for="(item, index) in channelData":key="item.id":label="item.payChannelName":name="item.id"@change="radioChange"></u-radio></u-radio-group></view><view class="fixed-bottom pb-100"><u-button type="warning" text="確認支付" customStyle="margin-top: 50px" @click="pay"></u-button></view></view> </template>

支付成功頁面代碼

<template><view><view class="u-page"><u--image :showLoading="true" src="/static/image/success.png" width="240px" height="89px" style="align-items: center;margin-top: 50rpx;"></u--image></view><view class="yellow bold mt-15 text-center"><u--text class="size-40" mode="price" align="center" size="40rpx" type="success" :bold="true" :text="totalFee"></u--text></view></view> </template>

使用了uview組件。

總結

以上是生活随笔為你收集整理的uniapp快速开发微信、支付宝app支付的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。