[TOC]
# uniapp第三方支付、登录
## 第三方支付
在使用第三方支付之前,需要先配置`manifest.json`:
```json
{
"app-plus" : {
"distribute" : {
"sdkConfigs" : {
"payment" : {
"alipay" : {},
"weixin" : {
"appid" : "your appid",
"UniversalLinks" : ""
}
}
}
}
}
}
```
或者直接在HBuilder中可视化配置:
![](https://kan.xiaoyulive.top/uniapp/024.png)
一个uni-app的支付示例如下:
```vue
<template>
<view>
<button @click="requestPayment('alipay')">支付宝支付</button>
<button @click="requestPayment('wxpay')">微信支付</button>
</view>
</template>
<script>
export default {
methods: {
requestPayment(provider) {
uni.getProvider({
service: 'payment',
success: function (res) {
console.log(res);
if (~res.provider.indexOf(provider)) {
uni.requestPayment({
provider: provider,
orderInfo: 'orderInfo', //微信、支付宝订单数据
success: function (res) {
console.log('success:' + JSON.stringify(res));
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});
}
}
});
}
}
}
</script>
```
通过`uni.requestPayment`唤起支付,需要在唤起支付前获取相应的支付参数(orderInfo),以及配置provider,需要先通过`uni.getProvider`检测是否支持对应的支付方式。
微信支付参数(orderInfo)如下:
![](https://kan.xiaoyulive.top/uniapp/022.png)
支付宝支付参数(orderInfo)如下:
![](https://kan.xiaoyulive.top/uniapp/023.png)
其中provider取值如下:
- **alipay** 支付宝支付
- **wxpay** 微信支付
- **baidu** 百度收银台
- **appleiap** 苹果应用内支付
## 第三方登录
一个uni-app的第三方登录示例如下:
```vue
<template>
<view>
<button @click="oauth('qq')">QQ登录</button>
<button @click="oauth('weixin')">微信登录</button>
<button @click="oauth('sinaweibo')">微博登录</button>
</view>
</template>
<script>
export default {
methods: {
oauth(provider) {
uni.getProvider({
service: 'oauth',
success: function (res) {
console.log(res);
if (~res.provider.indexOf(provider)) {
uni.login({
provider: provider,
success: function (loginRes) {
console.log(JSON.stringify(loginRes));
}
});
}
}
});
}
}
}
</script>
```
同样地,在调取登录之前,需要先通过`uni.getProvider`检测是否拥有对应的登录方式。
其中provider取值如下:
- **weixin** 微信登录
- **qq** QQ登录
- **sinaweibo** 新浪微博登录
- **xiaomi** 小米登录
- **apple** Apple登录
## 原生Android工程的配置
如果是离线打包,需要进行如下配置
### 支付宝支付
1. 需要引入工程的jar/aar文件
需要将以下jar/aar文件([下载地址点这里](https://nativesupport.dcloud.net.cn/AppDocs/download/android))放到工程的libs目录下
| 路径 | 文件 |
| :------: | :-------------------------------------------------: |
| SDK\libs | payment-alipay-release.aar, alipayutdid.jar, alipaySdk-15.6.5-20190718211159-noUtdid.aarr |
2. 在`AndroidManifest.xml`中配置
application节点前:
```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
```
3. 在`dcloud_properties.xml`中添加:
```xml
<feature name="Payment" value="io.dcloud.feature.payment.PaymentFeatureImpl">
<module name="AliPay" value="io.dcloud.feature.payment.alipay.AliPay"/>
</feature>
```
### 微信支付
1. 申请appkey,详情查看[微信appkey申请方法](http://ask.dcloud.net.cn/article/208)
2. 需要引入工程的jar/aar文件
需要将以下jar/aar文件([下载地址点这里](https://nativesupport.dcloud.net.cn/AppDocs/download/android))放到工程的libs目录下
| 路径 | 文件 |
| :------: | :-------------------------------------------------: |
| SDK\libs | payment-weixin-release.aar, wechat-sdk-android-with-mta-5.1.4.jar |
3. 将`WXPayEntryActivity.java`添加到`$你的包名.wxapi`下,内容如下(注意将包名改为自己的):
```java
package com.xiaoyulive.test.wxapi;
import io.dcloud.feature.payment.weixin.AbsWXPayCallbackActivity;
public class WXPayEntryActivity extends AbsWXPayCallbackActivity{
}
```
4. 在`AndroidManifest.xml`中配置
application节点前:
```xml
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
```
application节点下:
```xml
<meta-data android:name="WX_APPID" android:value="$微信APPID" />
<meta-data android:name="WX_SECRET" android:value="$微信SECRET"/>
<activity
android:name="$你的包名.wxapi.WXPayEntryActivity"
android:exported="true"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:launchMode="singleTop" />
```
5. 在`dcloud_properties.xml`中添加:
```xml
<feature name="Payment" value="io.dcloud.feature.payment.PaymentFeatureImpl">
<module name="Payment-Weixin" value="io.dcloud.feature.payment.weixin.WeiXinPay"/>
</feature>
```
## 参考资料
- [获取服务提供商 uni.getProvider(OBJECT)](https://uniapp.dcloud.io/api/plugins/provider)
- [支付 uni.requestPayment(OBJECT)](https://uniapp.dcloud.io/api/plugins/payment)
- [登录 uni.login(OBJECT)](https://uniapp.dcloud.io/api/plugins/login?id=login)
- [uniapp离线打包之支付模块的配置](https://nativesupport.dcloud.net.cn/AppDocs/usemodule/androidModuleConfig/pay)
- uniapp项目搭建
- 通过cli创建uniapp项目
- uniapp平台特性
- uniapp基础
- 在uniapp中使用字体图标
- uniapp全局变量的几种实现方式
- uniapp自定义页面返回逻辑
- uniapp进阶
- 在网页中打开uniapp应用
- uniapp状态栏与导航栏
- 在uniapp中优雅地使用WebView
- uniapp Android离线打包
- Android原生工程搭建
- 在uni-app项目中集成Android原生工程
- uniapp热更新和整包更新
- Android Q启动白屏的问题
- uniapp原生插件开发与使用
- Android 原生插件使用
- uniapp基础模块配置
- uniapp定位及地图
- uniapp第三方支付、登录
- 常见问题及解决方案
- Android端常见问题解决方案
- H5端常见问题解决方案
- 微信小程序常见问题解决方案