uniapp快速开发微信、支付宝app支付

 演示视频

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组件。