Home

Awesome

react-native-wechat-ios npm version PRs Welcome

微信SDK集成示例，现已完成微信认证登录，分享链接，支付功能。(本模块仅支持iOS，点我获取Android支持）

如何安装

1. 下载包文件

$ npm i react-native-wechat-ios

2. 链接库文件到你的项目中

参考 https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content

a. 给RCTWeChat添加头文件搜索路径：$(SRCROOT)/../../react-native/React，并选择recursive。

b. 因为需要在 AppDelegate.m 文件中导入 RCTWeChat.h，所以需要在你的项目中添加一个头文件搜索路径： $(SRCROOT)/../node_modules/react-native-wechat-ios/RCTWeChat，并选择recursive。

3. 根据微信SDK文档需要做的一些设置

a. 根据微信SDK要求需要添加以下库文件

Xcode7 可能找不到*.dylib库，可以选择*.tbd库，也可以参考这里 http://www.jianshu.com/p/1f575e4d1033

b. 在Xcode中，选择你的工程设置项，选中“TARGETS”一栏，在“info”标签栏的“URL type“添加“URL scheme”为你所注册的应用程序id 示例

4. 将刚添加的 scheme weixin 添加到 Info.plist 的 LSApplicationQueriesSchemes 中

近期苹果公司iOS 9系统策略更新，限制了http协议的访问，此外应用需要在“Info.plist”中将要使用的URL Schemes列为白名单，才可正常检查其他应用是否安装。 参考：

如何使用

1. 重写AppDelegate的handleOpenURL和openURL方法：

需要导入RCTWeChat.h

#import "RCTWeChat.h"

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
  return [[RCTWeChat shareInstance] handleOpenURL: url];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  
  return [[RCTWeChat shareInstance] handleOpenURL: url];
  
}

2. 订阅didRecvAuthResponse事件获取认证处理结果

认证成功后由Native端触发该事件，通知React Native端。

import {NativeAppEventEmitter} from 'react-native';

NativeAppEventEmitter.addListener(
  'didRecvAuthResponse',
  (response) => AlertIOS.alert(JSON.stringify(response))
);
返回值(response):

3. 发起认证

import WeChat from 'react-native-wechat-ios';

let scope = 'snsapi_userinfo';
let state = 'wechat_sdk_test'; 
WeChat.sendAuthReq(scope, state, (res) => {
    alert(res); // true or false
});

4. 分享链接内容给微信

WeChat.sendLinkURL({
    link: 'https://www.qianlonglaile.com/web/activity/share?uid=d1NrTmtrdVNFNzVmelVCQitpaEZxZz09&date=1449818774&from=groupmessage&isappinstalled=0#!/',
    tagName: '钱隆',
    title: '哈哈哈哈哈哈',
    desc: '噢噢噢噢哦哦哦哦哦哦',
    thumbImage: 'https://dn-qianlonglaile.qbox.me/static/pcQianlong/images/buy_8e82463510d2c7988f6b16877c9a9e39.png',
    scene: 1
});

5. 分享本地图片给微信

WeChat.sendImage({
    path: '/var/xxxx/xxxx', //本地图片位置,可以用react-native-fs获取
    tagName: '钱隆',
    title: '哈哈哈哈哈哈',
    desc: '噢噢噢噢哦哦哦哦哦哦',
    scene: 1
});

6. 微信支付

1. 调用支付

//建议请先完成 isWXAppInstalled 和 isWXAppSupportAPI 验证调用微信及微信支付可行性
//请仔细核对调起支付参数
let payOptions = {
    appId: '********',
    nonceStr: '940ba5be3fd642a0bd935546b23e1b5d',
    partnerId: '**********',
    prepayId: 'wx201604252333295472c2d8a40853064388',
    packageValue: 'Sign=WXPay',
    timeStamp: '1461598433',
    sign: 'D055ABFA6B1030273FEDBE8ECEBE1FC0'
    };
WeChat.weChatPay(payOptions,(res) => {
   //console.log(res);
});

2. 订阅finishedPay事件获取调用支付结果

支付结束后由Native端触发该事件，通知React Native端。

let subscription = NativeAppEventEmitter.addListener(
    'finishedPay',
    (res) => {
      if(res.errCode == 0) { //充值成功
        console.log('充值成功');
      } else if(res.errCode == -1) { //很多情况下是证书问题
        console.log('支付失败,请稍后尝试'); 
      } else if(res.errCode == -2) { //充值取消
        console.log("充值取消");
      }
    }
  );

componentWillUnmount() {
    if (Platform.OS == 'ios') {
      if(subscription != undefined) {
        subscription.remove();
      }
    }
  }

已完成的方法，callback都是可选的

// 向微信注册应用ID
WeChat.registerApp('你的微信应用ID', (res) => {
    alert(res); // true or false
});

WeChat.isWXAppInstalled((res) => {
    alert('isWXAppInstalled: '+res); // true or false
});

let scope = 'snsapi_userinfo';
let state = 'wechat_sdk_test'; 
WeChat.sendAuthReq(scope, state, (res) => {
    alert(res); // true or false
});

事件，通过订阅事件获取操作结果

didRecvAuthResponse

授权成功后触发

didRecvMessageResponse

分享成功后触发

finishedPay

调起支付成功后触发

更新日志

2015.12.11
2016.4.25

Example

记得要将 AppDelegate.m 文件中的IP换成自己的:

jsCodeLocation = [NSURL URLWithString:@"http://172.16.5.70:8081/index.ios.bundle?platform=ios&dev=true"];

截图