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)
         } 
    },
发布了16 篇原创文章 · 获赞 14 · 访问量 1779

猜你喜欢

转载自blog.csdn.net/TanHao8/article/details/104143188