博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react-native-wechat
阅读量:4083 次
发布时间:2019-05-25

本文共 4450 字,大约阅读时间需要 14 分钟。

安装

  • 终端运行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;      @Overrideprotected List
    getPackages() {return Arrays.
    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添加声明
  • 在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字段,值分别为wechat和weixin,也可以直接编辑info.plist文件,添加源码
    LSApplicationQueriesSchemes
    weixin
    wechat
  • 在你项目的AppDelegate.m添加以下代码,启动[LinkingIOS]
    #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]; }

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()移除所有监听事件

转载地址:http://lkrni.baihongyu.com/

你可能感兴趣的文章
相机标定的目的:获取摄像机的内参和外参矩阵(同时也会得到每一幅标定图像的选择和平移矩阵),内参和外参系数可以对之后相机拍摄的图像就进行矫正,得到畸变相对很小的图像。
查看>>
现在来看,做个普罗米修斯的docker镜像对我而言并不难,对PX4仿真环境配置也熟悉了。
查看>>
删除docker容器和镜像的命令
查看>>
VINS-Fusion Intel® RealSense™ Depth Camera D435i
查看>>
使用Realsense D435i运行VINS-Fusion并建图
查看>>
gazebo似乎就是在装ROS的时候一起装了,装ROS的时候选择的是ros-melodic-desktop-full的话。
查看>>
React + TypeScript 实现泛型组件
查看>>
TypeScript 完全手册
查看>>
React Native之原理浅析
查看>>
Git操作清单
查看>>
基础算法
查看>>
前端面试
查看>>
React Hooks 异步操作踩坑记
查看>>
聊聊编码那些事,顺带实现base64
查看>>
TypeScript for React (Native) 进阶
查看>>
React 和 ReactNative 的渲染机制/ ReactNative 与原生之间的通信 / 如何自定义封装原生组件/RN中的多线程
查看>>
JavaScript实现DOM树的深度优先遍历和广度优先遍历
查看>>
webpack4 中的 React 全家桶配置指南,实战!
查看>>
react 设置代理(proxy) 实现跨域请求
查看>>
通过试题理解JavaScript
查看>>