Home

Welcome to the react-native-wechat-android wiki!

添加步骤：

• 安装npm包
• 添加link
• 添加微信回调类
• 开始使用

安装npm包

$ npm install --save react-native-wechat-android

添加link

$ react-native link react-native-wechat-android

添加微信回调类

在你的包名相应目录下创建回调类的目录，例如应用程序的包名为com.heng,在该目录应该为com.heng.wxapi(微信指定的回调路径，不能更改,否则无法获取回调结果),并在该wxapi目录下创建WXEntryActivity.java（微信登录和微信分享的回调类）和WXPayEntryActivity.java（微信支付的回调类，如果没有微信支付功能不需要此类）,均需要继承自Activity（extends Activity），并在AndroidManifest.xml文件中添加如下代码：

 ...
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 
  <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 ...

 ...
 <activity
  android:name=".wxapi.WXEntryActivity"
  android:exported="true"
  android:theme="@android:style/Theme.Translucent.NoTitleBar" />
 <activity
  android:name=".wxapi.WXPayEntryActivity"
  android:exported="true"
  android:theme="@android:style/Theme.Translucent.NoTitleBar" />
 ...

WXEntryActivity.java

package com.xx.wxapi;    // 这里改为你的包名

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.heng.wechat.WeChatModule;
import com.tencent.mm.sdk.modelbase.BaseReq;
import com.tencent.mm.sdk.modelbase.BaseResp;
import com.tencent.mm.sdk.modelmsg.SendAuth;
import com.tencent.mm.sdk.modelmsg.SendMessageToWX;
import com.tencent.mm.sdk.openapi.IWXAPIEventHandler;

public class WXEntryActivity extends Activity implements IWXAPIEventHandler {

    Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;
        WeChatModule.wxApi.handleIntent(getIntent(), this);
    }

    @Override
    protected void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);
        WeChatModule.wxApi.handleIntent(intent, this);
    }

    @Override
    public void onReq(BaseReq baseReq) {

    }

    @Override
    public void onResp(BaseResp baseResp) {
        // 下面@所标记的地方key值可以根据需要自行更改,对应你js文件中的key即可
        int errCode = baseResp.errCode;
        WritableMap params = Arguments.createMap();
        params.putInt("errCode", errCode);
        String eventName = null;
        switch (errCode) {
            case BaseResp.ErrCode.ERR_OK:
                params.putBoolean("success", true);                 // @
                if (baseResp instanceof SendAuth.Resp) {
                    String code = ((SendAuth.Resp) baseResp).code;
                    String state = ((SendAuth.Resp) baseResp).state;
                    params.putString("code", code);                 // @
                    params.putString("state", state);               // @
                    eventName = "finishedAuth";                     // @
                } else if (baseResp instanceof SendMessageToWX.Resp){
                    eventName = "finishedShare";                    // @
                }
                break;
            default:
                //其他情况
                params.putBoolean("success", false);                // @
                break;
        }
        WeChatModule.reactApplicationContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
        finish();
    }
}

WXPayEntryActivity.java

package com.xxx.wxapi;           // 这里改为你的包名

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.heng.wechat.WeChatModule;
import com.tencent.mm.sdk.constants.ConstantsAPI;
import com.tencent.mm.sdk.modelbase.BaseReq;
import com.tencent.mm.sdk.modelbase.BaseResp;
import com.tencent.mm.sdk.openapi.IWXAPIEventHandler;


public class WXPayEntryActivity extends Activity implements IWXAPIEventHandler {

    Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;
        WeChatModule.wxApi.handleIntent(getIntent(), this);
    }

    @Override
    protected void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);
        WeChatModule.wxApi.handleIntent(intent, this);
    }

    @Override
    public void onReq(BaseReq baseReq) {

    }

    @Override
    public void onResp(BaseResp baseResp) {
        // 下面@所标记的地方key值可以根据需要自行更改,对应你js文件中的key即可
        if (baseResp.getType() == ConstantsAPI.COMMAND_PAY_BY_WX) {
            int errCode = baseResp.errCode;
            WritableMap params = Arguments.createMap();
            params.putInt("errCode", errCode);                    // @
            switch (errCode) {
                case BaseResp.ErrCode.ERR_OK:
                    params.putBoolean("success", true);           // @
                    break;
                default:
                    params.putBoolean("success", false);          // @
                    break;
            }
            WeChatModule.reactApplicationContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                    .emit("finishedPay", params);                 // @
        }
        finish();
    }
}

开始使用

// 比如在index.android.js中使用
'use strict';

import React, {Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    DeviceEventEmitter,
    ToastAndroid
} from 'react-native';

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

let appId = 'wx...';   // 你的AppId 

let webpageOptions = {
    title: '分享这个网页给你',
    desc: '我发现这个网页很有趣，特意分享给你',
    thumbSize: 150,
    scene: 0,
    type: 3,

    webpageUrl: 'https://github.com/beefe/react-native-wechat-android',
    thumbImage: 'http://img1.imgtn.bdimg.com/it/u=3924416677,403957246&fm=21&gp=0.jpg',
};

class MyProject extends React.Component{
    _registerApp(){
        WeChat.registerApp(appId,(err,registerOK) => {
      	    ToastAndroid.show(registerOK + '',ToastAndroid.SHORT);
        });
    }
  
    _openApp(){
        WeChat.openWXApp((err,res) => {

  	});
    }
  
    _share(){
        WeChat.sendReq(webpageOptions,(err,sendOK) => {
	});
    }
  
    componentWillMount(){
        DeviceEventEmitter.addListener('finishedShare',function(event){                            
            if(event.success){
                ToastAndroid.show('分享成功',ToastAndroid.SHORT);
            }else{
                ToastAndroid.show('分享失败',ToastAndroid.SHORT);
            }
        });
    }
  
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text} onPress={this._registerApp} >
                    注册到微信
                </Text>
                <Text style={styles.text} onPress={this._openApp} >
                    打开微信
                </Text>
                <Text style={styles.text} onPress={this._share} >
                    分享网页到微信
                </Text>
            </View>
        );
    }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#333333',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);