react-native-wechat
来源:互联网 发布:阿里云 域名 cname 编辑:程序博客网 时间:2024/06/05 10:59
安装
- 终端运行
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; @Overrideprotected 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 {@Overrideprotected 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 {@Overrideprotected 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.frameworkCoreTelephony.frameworklibsqlite3.0libc++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 *)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]; }
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()
移除所有监听事件
阅读全文
0 0
- react-native-wechat
- 【转】react-native-wechat--微信登录
- 【转】react-native-wechat组件使用介绍
- react-native开源组件react-native-wechat学习
- (Android)react-native-wechat组件的使用总结(重点微信支付)
- react native
- React Native
- React Native
- React- Native
- react-native
- React Native
- React Native
- react native
- React Native
- react-native
- React Native
- react native
- React Native
- C++中如何定义不能被继承的类
- 文件名 目录名或卷标语法不正确
- Java开发中的23种设计模式概述
- 使用PHP制作文字水印
- 死磕《Effective Java中文版》-开篇
- react-native-wechat
- remove element
- 第二篇:变量类型转换和函数
- 1030: 判断直角三角形
- Django开发博客-(2)模板的使用
- 设置Tomcat的https访问
- VR系列——Oculus Rift 开发者指南:三、Oculus Rift的渲染(六)
- 使用DotNetty编写跨平台网络通信程序
- 使用PHP制作图片水印