reactNative集成微信支付、分享

安裝react-native-wechat

一、android配置

1、在proguard-rules.pro中添加(代碼爲混淆設置)：

-keep class com.tencent.mm.sdk.** {
   *;
}

2、在android/app/src/main/java/com下面創建文件夾wxapi，並在文件夾內創建WXEntryActivity.java，用於獲得微信的授權和分享權限。代碼如下：

package com.test.wxapi;       //test爲你的包名

import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;

public class WXEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatModule.handleIntent(getIntent());
    finish();
  }
}

3、在wxapi文件夾內創建WXPayEntryActivity.java，用於獲得微信的授權和支付權限。代碼如下：

package com.test.wxapi;			//test爲你的包名

import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;

public class WXPayEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatModule.handleIntent(getIntent());
    finish();
  }
}

4、在AndroidManifest.xml添加聲明

<!-- 微信聲明 -->
 <application>
      <activity
      android:name=".wxapi.WXEntryActivity"
      android:label="@string/app_name"
      android:exported="true"
      />
      <activity
        android:name=".wxapi.WXPayEntryActivity"
        android:label="@string/app_name"
        android:exported="true"
      />
 </application>

二、ios配置

1、點擊Libraries右側的ADD Files to

選擇如下內容：

2、在工程Build Phases ➜ Link Binary With Libraries中添加libRCTWeChat.a

3、在工程target的Build Phases->Link Binary with Libraries中加入下面庫文件：

庫文件：

SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz

4、在TARGETS 下項目名 -> info ,添加我們申請得到的微信 AppId填寫在 "URL type"的"URL Schema"處，ldentifier填寫爲：weixin

5、iOS9 以上，添加 微信白名單，在info.plist文件中添加如下：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>wechat</string>
</array>

6、在項目的AppDelegate.m添加以下代碼，啓動[LinkingIOS]

#import <React/RCTLinkingManager.h>
//       <<這塊可加可不加
// ios 8.x or older
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}
//           >>

// ios 9.0+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
            options:(NSDictionary<NSString*, id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

7、微信支付使用

import * as WeChat from 'react-native-wechat'
//並且在構造函數內添加你的appid：
mounted(){
	WeChat.registerApp('你的appid');
}
async wechatPay(payData,callback){                //微信支付
     let appOr = await WeChat.isWXAppInstalled();
     if(!appOr){
     return alert("沒有安裝微信軟件，請您安裝微信之後再試")
     }
     WeChat.pay(payData).then((er)=>{
         if (er.errCode=="0"){
             callback(er)
         }
     }).catch((err)=>{
         Toast.info("支付失敗",1,'',false)
     })
},

8、微信分享使用

 async shareWechat(type,datas){                 //分享微信  type值：shareToSession爲好友分享     shareToTimeline爲朋友圈分享
        try {
            let appOr = await WeChat.isWXAppInstalled();
            if(!appOr){
                alert("沒有安裝微信軟件，請您安裝微信之後再試");
                 return false;
            }
            let data = await WeChat[type](datas);
         } catch (error) {
            setTimeout(()=>{
                alert("分享失敗")
            },100)
         } 
    },