📃 uniapp第三方支付、登录

第三方支付

在使用第三方支付之前，需要先配置manifest.json：

{
    "app-plus" : {
        "distribute" : {
            "sdkConfigs" : {
                "payment" : {
                    "alipay" : {},
                    "weixin" : {
                        "appid" : "your appid",
                        "UniversalLinks" : ""
                    }
                }
            }
        }
    }
}

或者直接在HBuilder中可视化配置：

一个uni-app的支付示例如下：

<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）如下：

支付宝支付参数（orderInfo）如下：

其中provider取值如下：

• alipay 支付宝支付
• wxpay 微信支付
• baidu 百度收银台
• appleiap 苹果应用内支付

第三方登录

一个uni-app的第三方登录示例如下：

<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文件（下载地址点这里）放到工程的libs目录下

1. 在AndroidManifest.xml中配置

application节点前：

<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" />

1. 在dcloud_properties.xml中添加：

<feature name="Payment" value="io.dcloud.feature.payment.PaymentFeatureImpl">
    <module name="AliPay" value="io.dcloud.feature.payment.alipay.AliPay"/>
</feature>

微信支付

1. 申请appkey，详情查看微信appkey申请方法
2. 需要引入工程的jar/aar文件

需要将以下jar/aar文件（下载地址点这里）放到工程的libs目录下

1. 将WXPayEntryActivity.java添加到$你的包名.wxapi下，内容如下（注意将包名改为自己的）：

package com.xiaoyulive.test.wxapi;
import io.dcloud.feature.payment.weixin.AbsWXPayCallbackActivity;
public class WXPayEntryActivity extends AbsWXPayCallbackActivity{
}

1. 在AndroidManifest.xml中配置

application节点前：

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

application节点下：

<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" />

1. 在dcloud_properties.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)
• 支付 uni.requestPayment(OBJECT)
• 登录 uni.login(OBJECT)
• uniapp离线打包之支付模块的配置