本文主要介绍uni-app项目中如何实现支付功能(支付宝支付、微信支付),及项目如何打包上传。
一、实现支付
前置工作,项目要实现支付功能,首先要在根目录manifest.json文件内App模块配置中进行设置。
其中,appid需要登录微信开放平台加移动应用,审核通过后可获取应用ID
(AppID,支付订单中需要使用)。
1.1 支付宝支付
登录 支付宝开放平台 ,进入控制台页面创建移动应用,填写应用信息并提交审核,在应用详情页面的能力列表中添加APP支付功能,进入开发设置完成加密方式、IP白名单等开发信息,设置添加功能和配置密钥后(获取公钥、私钥,用于服务器生成订单),将应用提交审核,详情参考上线应用应用上线后,完成签约才能在生产环境使用支付功能。
主要步骤如下:
1.获取支付厂商 uni.getProvider({service:"payment"});
2.用户发起支付 requestPayment(item,index){};
3.获取订单信息 getOrderInfo(item.id);
4.发起支付api。
详细代码如下:
<template>
<view>
<view class="title">支付</view>
<view>
支付金额:
<input :value="price" maxlength="4" @input="priceChange" placeholder="请输入支付金额" />
<view>
<!-- #ifdef APP-PLUS -->
<button size="mini" type="primary" v-for="(item,index) in providerList" :key="item.id" :loading="item.loading" @click="requestPayment(item,index)">{
{item.name}}支付</button>
<!-- #endif -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
price: 1,
providerList: [], //支付厂商,微信、支付宝
openid: '', //用户id
}
},
onLoad() {
var that = this;
//获取支付厂商
uni.getProvider({
service: 'payment',
success: (e) => {
console.log(JSON.string