安装
- 终端运行
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/settings.gradle文件中添加如下代码:
- 在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
字段,值分别为wecha
t和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)
注册微信SDKappid
微信后台注册的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()
移除所有监听事件