[TOC] # uniapp第三方支付、登錄 ## 第三方支付 在使用第三方支付之前，需要先配置`manifest.json`： ```json { "app-plus" : { "distribute" : { "sdkConfigs" : { "payment" : { "alipay" : {}, "weixin" : { "appid" : "your appid", "UniversalLinks" : "" } } } } } } ``` 或者直接在HBuilder中可視化配置：  一個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）如下：  支付寶支付參數（orderInfo）如下：  其中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)