react-native-wechat

安装

  • 终端运行npm install react-native-wechat --save 添加依赖 react-native link

安卓

  • 检查配置
  • 在android/settings.gradle文件中添加如下代码:
include ':react-native-wechat'
project(':react-native-wechat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
  • 特别说明一下,include ':react-native-wechat'这是新版本中link后的写法,官方文档中include ':RCTWeChat'这种是老版本写法,意思是一样的,对于我们这种安卓小白来说,千万不要傻到两种都写,这样会报重复引包的错误
  • 在android/app/build.gradle文件中的dependencies标签中添加模块依赖
//同样注意react-native-wechat和:RCTWeChat写一种就可以
dependencies {
   ···
    compile project(':react-native-wechat')
}
  • 在MainActivity.java或者MainApplication.java文件中添加以下代码:
import com.theweflex.react.WeChatPackage;      
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(), 
    new WeChatPackage()        // Add this line
  );
}
  • 在应用程序包中创建一个名为'wxapi'的包,并在其中创建一个名为'WXEntryActivity'的类。以便可以获得微信的授权和分享权限。
package your.package.wxapi;
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();
  }
}
  • 在应用程序包中创建一个名为“wxapi”的包,并在其中创建一个名为“WXPayEntryActivity”的类。 以便可以获得微信支付权限。
package your.package.wxapi;
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();
  }
}
  • 在AndroidManifest.xml添加声明
<manifest>
  <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>
</manifest>
  • 在proguard-rules.pro中添加:
-keep class com.tencent.mm.sdk.** {
   *;
}

iOS

  • 如果link不成功手动检查下一下配置(第三方库手动添加依赖的方法)
  • /node_modules/react-native-wechat/ios/RCTWeChat.xcodeproj拖入到xcode中的Libraries文件夹中
  • 然后点击筑工程项目文件(原项目的.xcodeproj文件的那个),然后选择Build Phases选项卡。然后将刚刚添加的库中的Products文件夹中的.a库拖动到Link Binary With Libraries
  • TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下如路径
$(SRCROOT)/../node_modules/react-native-wechat/ios
  • 添加依赖库
SystemConfiguration.framework
 CoreTelephony.framework
 libsqlite3.0
 libc++
 libz
  • 选中Targets/info配置中URL Schema中配置刚申请下来的appid
  • 为了iOS9.0的支持,添加 微信白名单,在Targets/info中的Custom iOS Traget Properties标签中添加LSApplicationQueriesSchemes字段,值分别为wechat和weixin,也可以直接编辑info.plist文件,添加源码
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>weixin</string>
    <string>wechat</string>
</array>
  • 在你项目的AppDelegate.m添加以下代码,启动[LinkingIOS]
#import <React/RCTLinkingManager.h>
-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  //支付宝
  if([[sourceApplication substringToIndex:10] isEqualToString:@"com.alipay"]){
    [AlipayModule handleCallback:url];
    return YES;
  }
  //微信
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation]; 
}

JS方法

  • registerApp(appid)注册微信SDK
    • appid微信后台注册的APPID
    • 建议在应用启动时初始化,初始化之前无法使用此模块的其他方法。WeChat模块只需要初始化一次
import * as WeChat from 'react-native-wechat';
componentDidMount (){
  wechat.registerApp('your appid')
}
  • isWXAppInstalled()检查是否安装微信
  • isWXAppSupportApi()检查是否支持微信开放接口
  • getApiVersion()获取微信SDK版本
  • openWXApp()打开微信
  • sendAuthRequest([scope[, state]])微信登录授权请求
    • scope 应用授权作用域,如获取用户个人信息则填写snsapi_userinfo
    • state用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),建议第三方带上该参数,可设置为简单的随机数加session进行校验
let scope = 'snsapi_userinfo';
let state = 'wechat_sdk_demo';
wechat.sendAuthRequest(scope,state)
    .then(res=>{

    )
  • shareToTimeline(data)分享朋友圈,shareToSession(data)分享好友
WeChat.shareToTimeline({
    type: 'news',
    title: '标题',
    description: '描述',
    thumbImage: '图片'
    webpageUrl:'链接'
  });
  • pay(data)微信支付
WeChat.pay({
       appId: '',  //应用id
       partnerId: '', // 商家向财付通申请的商家id
       prepayId: '', // 预支付订单
       nonceStr: '', // 随机串,防重发
      timeStamp: '', // 时间戳,防重发
       package: '', // 商家根据财付通文档填写的数据和签名
       sign: '',  // 商家根据微信开放平台文档对数据做的签名
}).then((requestJson)=>{
       //支付成功回调
       console.log(requestJson);
 }).catch((err)=>{
       console.log(err);
})
  • addListener(eventType, listener[, context])监听
//监听分享状态
      wechat.addListener(
          'SendMessageToWX.Resp',
          (response) => {
              if (parseInt(response.errCode) === 0) {
                  toastShort('分享成功');
              } else {
                  toastShort('分享失败');
              }
          }
      );
  • once(eventType, listener[, context])addListener类似,但是被调用一次后会被移除
  • removeAllListeners()移除所有监听事件

推荐阅读更多精彩内容