uniappの決済機能の実装方法

Uniapp の支払い機能の実装方法: 最初に利用可能な支払い環境を取得し、次にユーザーが Alipay 支払い環境を持っているかどうかを判断し、次にバックエンド インターフェイスから関連データを取得して orderInfo に設定し、最後に取得します。バックエンドの戻りデータ 次に、関連する支払い関数を呼び出します。

#このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

おすすめ（無料）: uni-app開発チュートリアル

uniappに決済機能を実装する方法:

//支付宝支付
zfbPay(){
uni.getProvider({  //获取可用的支付环境
service: 'payment',
success: res=>{
if (~res.provider.indexOf('alipay')) { //先判断用户是否有支付宝支付环境
uni.showLoading({title: '正在调起支付宝支付'})
let params={  //给后端传什么参数看你的后端需要什么
money:this.moneyCount,
ispc:3
}
uni.request({  //再从后端接口获取相关数据配置到orderInfo里，这个接口由后端配置好了，返回结果见下图1-支付宝
url: `${this.$baseUrl}/api-order/amstc/userRechargeAccountByAliPay`,
method: 'POST',
header: {
"Token":this.userToken,
"Content-Type":"application/x-www-form-urlencoded"
},
data: params,
success: res => {
if(res.data.code==200){
let payInfo=res.data.data  //拿到后端返回数据后调用下面支付函数
uni.requestPayment({
provider: 'alipay',
orderInfo: payInfo, //支付宝订单数据（string类型）
success: res=>{
uni.hideLoading();
uni.showToast({title: '支付成功',icon:'none'})
},
fail:err=>{
uni.hideLoading();
uni.showToast({title: '支付失败，请稍后再试',icon:'none'})
}
});
}
},
fail: () => {
uni.hideLoading();
uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})
}
});
}else{
uni.showToast({title: '获取支付宝通道失败，请检查您的支付宝是否正常启用',icon:'none'})
}
}
});
},
//微信支付
wxPay(){
uni.getProvider({
service: 'payment',
success: res=>{
if (~res.provider.indexOf('wxpay')) { //先判断用户是否有微信支付环境（是否安装了微信app）
uni.showLoading({title: '正在调起微信支付'})
let params={
money:this.moneyCount,
bs:4
}
uni.request({  //再从后端接口获取相关数据配置到orderInfo里，这个接口由后端配置好了，返回结果见下图2-微信
url: `${this.$baseUrl}/api-order/amstc/userRechargeAccountByWx`,
method: 'POST',
header: {
"Token":this.userToken,
"Content-Type":"application/x-www-form-urlencoded"
},
data: params,
success: res => {
if(res.data.code==200){
let resobj=JSON.parse(res.data.data)
let payInfo={
appid: resobj.appid,
noncestr: resobj.nonce_str,
package:"Sign=WXPay",
partnerid: resobj.mch_id,
prepayid: resobj.prepay_id,
timestamp: resobj.time_stamp,
sign: resobj.sign,
}
uni.requestPayment({
provider: 'wxpay',
orderInfo: payInfo, //微信订单数据（Object类型）
success: res=>{
uni.hideLoading();
        uni.showToast({title: '支付成功',icon:'none'})
},
fail:err=>{
uni.hideLoading();
        uni.showToast({title: '支付失败，请稍后再试',icon:'none'})
}
});
}
},
fail: () => {
uni.hideLoading();
uni.showToast({title: '服务器开小差了呢，请您稍后再试',icon:'none'})
}
});
}else{
uni.showToast({title: '获取微信通道失败，请检查您的微信是否正常启用',icon:'none'})
}
}
});
},

Alipay の orderInfo 取得用インターフェース

WeChat の orderInfo 取得用インターフェース

# 関連する無料学習の推奨事項:

php プログラミング (ビデオ)

以上がuniappの決済機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。