react-native-wx

React Native的微信插件, 包括登录、分享

注意: react-native版本需要0.17.0及以上

注意：iOS应用只要申请并获取到AppID就可进行调试。Android应用除了获取AppID外，应用还要通过审核，否则无法调起微信进行分享，并且需要在网站上填写包名和签名两个字段，签名需要使用签名生成工具获取。

如何安装

1.首先安装npm包

npm install react-native-wx --save

2.link

自动link方法

react-native link react-native-wx

手动link~（如果不能够自动link）

#####ios a.打开XCode's工程中, 右键点击Libraries文件夹 ➜ Add Files to <...> b.去node_modules ➜ react-native-wx ➜ ios ➜ 选择 RCTWeChat.xcodeproj c.在工程Build Phases ➜ Link Binary With Libraries中添加libRCTWeChat.a

#####Android

// file: android/settings.gradle
...
include ':react-native-wx'
project(':react-native-wx').projectDir = new File(settingsDir, '../node_modules/react-native-wx/android')

// file: android/app/build.gradle
...
dependencies {
...
compile project(':react-native-wx')
}

android/app/src/main/java/<你的包名>/MainApplication.java中添加如下两行：

...
importcn.reactnative.modules.wx.WeChatPackage; // 在public class MainApplication之前importpublicclassMainApplicationextendsApplicationimplementsReactApplication {
privatefinalReactNativeHostmReactNativeHost = newReactNativeHost(this) {
@OverrideprotectedbooleangetUseDeveloperSupport() {
returnBuildConfig.DEBUG;
}
@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newWeChatPackage(), // 然后添加这一行newMainReactPackage()
);
}
};
@OverridepublicReactNativeHostgetReactNativeHost() {
returnmReactNativeHost;
}
}

3.工程配置

iOS配置

在工程target的Build Phases->Link Binary with Libraries中加入、libsqlite3.tbd、libc++、libz.tbd、CoreTelephony.framework

在Info->URL Types 中增加微信的scheme： Identifier 设置为weixin（这个拼写不能错哦）, URL Schemes 设置为你注册的微信开发者账号中的APPID

如果react-native版本>=0.17.0, 在你工程的AppDelegate.m文件中添加如下代码：

#import "../Libraries/LinkingIOS/RCTLinkingManager.h"
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

如果升级有困难，react-native版本实在是<0.17.0, 在你工程的AppDelegate.m文件中添加如下代码：

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
[[NSNotificationCenter defaultCenter] postNotificationName:@"RCTOpenURLNotification" object:nil userInfo:@{@"url": url.absoluteString}];
return YES;
}

iOS9的适配问题

a.对传输安全的支持

在iOS9中，默认需要为每次网络传输建立SSL，解决方法是在应用plist文件中设置

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
</true>
</dict>

b.对应用跳转的支持

在iOS9中跳转第三方应用需要在应用的plist文件中添加白名单

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

Android配置

在android/app/build.gradle里，defaultConfig栏目下添加如下代码：

manifestPlaceholders = [
// 如果有多项，每一项之间需要用逗号分隔
WX_APPID: "微信的APPID" //在此修改微信APPID
]

如果react-native版本<0.18.0,确保你的MainActivity.java中有onActivityResult的实现：

privateReactInstanceManagermReactInstanceManager;
@OverridepublicvoidonActivityResult(intrequestCode, intresultCode, Intentdata){
super.onActivityResult(requestCode, resultCode, data);
mReactInstanceManager.onActivityResult(requestCode, resultCode, data);
}

在你的包名相应目录下新建一个wxapi目录，并在该wxapi目录下新增一个WXEntryActivity类，该类继承自Activity（例如应用程序的包名为net.sourceforge.simcpux，则新添加的类的包名为net.sourceforge.simcpux.wxapi）

packagenet.sourceforge.simcpux.wxapi; // net.sourceforge.simcpux处为你的包名importandroid.app.Activity;
importandroid.os.Bundle;
importcn.reactnative.modules.wx.WeChatModule;
publicclassWXEntryActivityextendsActivity{
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
WeChatModule.handleIntent(getIntent());
finish();
}
}

如何使用

引入包

import * as WechatAPI from 'react-native-wx';

API

WechatAPI.isWXAppInstalled()

返回一个Promise对象

WechatAPI.isWXAppSupportApi()

返回一个Promise对象

WechatAPI.login(config)

// 登录参数 
config : {scope: 权限设置,// 默认 'snsapi_userinfo'}

返回一个Promise对象。成功时的回调为一个类似这样的对象：

{"code": "","appid": "","lang": "","country": "",}

WechatAPI.shareToTimeline(data)

分享到朋友圈

WechatAPI.shareToSession(data)

分享到好友

// 分享文字{type: 'text',text: 文字内容,}

// 分享图片{type: 'image',imageUrl: 图片地址,title : 标题,description : 描述,}

// 分享网页{type: 'news',title : 标题,description : 描述,webpageUrl : 链接地址,imageUrl: 缩略图地址,}

WechatAPI.pay(data)

// 登录参数 
data : {partnerId: "",prepayId: "",nonceStr: "",timeStamp: "",package: "",sign: "",}

返回一个Promise对象。成功时的回调为一个类似这样的对象：

{errCode: "",errMsg: "",appid: "",returnKey: "",}