本文共 4450 字,大约阅读时间需要 14 分钟。
npm install react-native-wechat --save
添加依赖 react-native link
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'
这种是老版本写法,意思是一样的,对于我们这种安卓小白来说,千万不要傻到两种都写,这样会报重复引包的错误//同样注意react-native-wechat和:RCTWeChat写一种就可以dependencies { ··· compile project(':react-native-wechat')}
import com.theweflex.react.WeChatPackage; @Overrideprotected ListgetPackages() {return Arrays. asList( new MainReactPackage(), new WeChatPackage() // Add this line);}
package your.package.wxapi;import android.app.Activity;import android.os.Bundle;import com.theweflex.react.WeChatModule;public class WXEntryActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WeChatModule.handleIntent(getIntent()); finish();}}
package your.package.wxapi;import android.app.Activity;import android.os.Bundle;import com.theweflex.react.WeChatModule;public class WXPayEntryActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); WeChatModule.handleIntent(getIntent()); finish();}}
-keep class com.tencent.mm.sdk.** { *;}
/node_modules/react-native-wechat/ios/RCTWeChat.xcodeproj
拖入到xcode中的Libraries文件夹中Build Phases
选项卡。然后将刚刚添加的库中的Products文件夹中的.a库拖动到Link Binary With Libraries
中TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths
添加如下如路径 $(SRCROOT)/../node_modules/react-native-wechat/ios
SystemConfiguration.frameworkCoreTelephony.frameworklibsqlite3.0libc++libz
Targets/info
配置中URL Schema
中配置刚申请下来的appid
iOS9.0
的支持,添加 微信白名单,在Targets/info
中的Custom iOS Traget Properties
标签中添加LSApplicationQueriesSchemes
字段,值分别为wecha
t和weixin
,也可以直接编辑info.plist
文件,添加源码 LSApplicationQueriesSchemes weixin
#import-(BOOL)application:(UIApplication *)application openURL:(NSURL *)urlsourceApplication:(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]; }
registerApp(appid)
注册微信SDK appid
微信后台注册的APPIDimport * 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()
移除所有监听事件转载地址:http://lkrni.baihongyu.com/