Register App on weixin open platform
Register your on https://open.weixin.qq.com
While registering your app, you will need app sign signature,
you can refer sign your app for weixin.
You will get your APPID
after your app registered.
please keep it.
prepare wechat sdk for you app
add wechat sdk in android/app/build.gradle
dependencies {
compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+'
}
set up AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
<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"/>
build native wechat to react native JS
I export wechat as "NativeModules.WeChat" follow below examples
https://facebook.github.io/react-native/docs/native-modules-android.html
The main java codes:
- WeChatModule, extends ReactContextBaseJavaModule, implements IWXAPIEventHandler
- WeChatPackage, new WeChatModule as NativeModules
- MainApplication::getPackages(), new WeChatPackage
Important:
To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).
public class WeChatModule extends ReactContextBaseJavaModule implements IWXAPIEventHandler {
// ReactContextBaseJavaModule implementation
@Override
public String getName() {
return "RCTWeChat";
}
// IWXAPIEventHandler implementation
@Override
public void onReq(BaseReq baseReq) {
}
@Override
public void onResp(BaseResp baseResp) {
}
@ReactMethod
public void shareToTimeline(ReadableMap data, Callback callback) {
}
}
public class WeChatPackage implements ReactPackage {
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new WeChatModule(reactContext));
return modules;
}
}
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new WeChatPackage()
);
}
Use in react native JS
import { NativeModules, } from 'react-native';
const { WeChat } = NativeModules;
You can get all codes by downloading my example app wechat-share-example.
It is a zip file, after you download it, Remember:
1. replace app id in .\android\app\src\main\java\com\wx\react\WeChatModule.java
2. replace package name to your package name.
3. run npm install before react-native run-android
The package name in the example is "com.errong.webrowser".
./android/app/BUCK:48: package = "com.errong.webrowser",
./android/app/BUCK:53: package = "com.errong.webrowser",
./android/app/build.gradle:100: applicationId "com.errong.webrowser"
./android/app/src/main/AndroidManifest.xml:2: package="com.errong.webrowser"
./android/app/src/main/java/com/webrowser/MainActivity.java:1:package com.errong.webrowser;
./android/app/src/main/java/com/webrowser/MainApplication.java:1:package com.errong.webrowser;
app id and package name should exactly same to the one you applied at
open.weixin.com which was mentioned at the beginning of this post.
otherwist, share feature maynot work well.
register app id to wechat
.\android\app\src\main\java\com\wx\react\WeChatModule.java
public class WeChatModule extends ReactContextBaseJavaModule implements IWXAPIEventHandler {
private IWXAPI api = null;
public WeChatModule(ReactApplicationContext context) {
super(context);
String appId = "YOURAPPID";
api = WXAPIFactory.createWXAPI(this.getReactApplicationContext().getBaseContext(), appId, true);
if (api != null)
api.registerApp(appId);
}
Share to wechat time line
.\android\app\src\main\java\com\wx\react\WeChatModule.java
@ReactMethod
public void shareToTimeline(ReadableMap data, Callback callback) {
if (api == null) {
Toast.makeText(getReactApplicationContext(), "App not registered to WeChat", Toast.LENGTH_SHORT).show();
return;
}
WXMediaMessage.IMediaObject mediaObject = _jsonToTextMedia(data);
WXMediaMessage message = new WXMediaMessage();
message.mediaObject = mediaObject;
if (data.hasKey("title"))
message.title = data.getString("title");
if (data.hasKey("description"))
message.description = data.getString("description");
SendMessageToWX.Req req = new SendMessageToWX.Req();
req.message = message;
req.scene = SendMessageToWX.Req.WXSceneTimeline;
req.transaction = UUID.randomUUID().toString();
api.sendReq(req);
}
App.js
import { NativeModules, } from 'react-native';
const { WeChat } = NativeModules;
var msg = {'id' : 'ABSTRACT_FETCHED', 'url' : window.location.href, 'title' : title, 'description' : desc, 'imgurl' : imgurl};
WeChat.shareToTimeline(msg, null);
Key points
- APPID and package name should same to the one you applied at open.weixin.qq.com
sign your app for weixin - sign your apk with your keystore file before you release.
Generate Signed android APK for react-native app - all sample codes download here