/react-native-wechat

React-native(iOS/Android) functionalities includes WeChat login, share, favorite and payment

Primary LanguageObjective-C

react-native-wechat logo

React-Native bridge static library for WeChat SDK.

  • iOS
  • Android

Requires react-native >= 0.20.0

Join us at Gitter

Join the chat at https://gitter.im/weflex/react-native-wechat

Installation

$ npm install react-native-wechat --save

iOS: Linking in your XCode project

  • Link RCTWeChat library from your node_modules/react-native-wechat/ios folder like its described here. Don't forget to add it to "Build Phases" of project.
  • Added the following libraries to your "Link Binary With Libraries":
    • SystemConfiguration.framework
    • CoreTelephony.framework
    • libsqlite3.0
    • libc++
    • libz
  • add URL Schema as your app id for URL type in Targets - info Set URL Schema in XCode
  • for iOS 9 support, add wechat and weixin into LSApplicationQueriesSchemes in 'Targets - info - Custom iOS Target Properties'

Note: Make sure you have these code in AppDelegate.m to enable LinkingIOS

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

Android: Linking to your gradle Project

  • Add following lines into android/settings.gradle
include ':RCTWeChat'
project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')
  • Add following lines into your android/app/build.gradle in section dependencies
...
dependencies {
   ...
   compile project(':RCTWeChat')    // Add this line only.
}
  • Add following lines into MainActivity.java
import com.theweflex.react.WeChatPackage;       // Add this line before public class MainActivity

...

/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage()
        , new WeChatPackage()        // Add this line
    );
}
  • Create a package named 'wxapi' in your application package and a class named 'WXEntryActivity' in it. This is needed to get request and response from wechat.
package your.package.wxapi;

import android.app.Activity;
import android.os.Bundle;

import com.theweflex.react.WeChatModule;

public class WXEntryActivity extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WeChatModule.handleIntent(getIntent());
        finish();
    }
}
  • Add activity declare in your AndroidManifest.xml
<manifest>
  ...
  <application>
    ...
    <!-- 微信Activity -->
    <activity
      android:name=".wxapi.WXEntryActivity"
      android:label="@string/app_name"
      android:exported="true"
      />
  </application>
</manifest>
  • Add these lines to 'proguard-rules.pro':
-keep class com.tencent.mm.sdk.** {
   *;
}

API Documentation

registerApp(appid)

  • {String} appid the appid you get from WeChat dashboard
  • returns {Promise}

registerAppWithDescription(appid, appdesc)

Only available on iOS.

  • {String} appid the appid you get from WeChat dashboard
  • {String} appdesc the description of your app
  • returns {Promise}

isWXAppInstalled()

Check if wechat installed in this app.

  • returns {Promise} Contain the result.

isWXAppSupportApi()

Check if wechat support open url.

  • returns {Promise} Contain the result.

getApiVersion()

Get api version of WeChat SDK.

  • returns {Promise} Contain the result.

openWXApp()

Open WeChat app with an optional callback argument.

  • returns {Promise}

sendAuthRequest([scope[, state]])

Send authentication request.

  • {Array|String} scope Scopes of auth request.
  • {String} state the state of OAuth2
  • returns {Promise}

shareToTimeline(data)

Share a message to timeline (朋友圈).

  • {Object} data contain the message to send
    • {String} thumbImage Thumb image of the message, which can be a uri or a resource id.
    • {String} type Type of this message. Can be {news|text|imageUrl|imageFile|imageResource|video|audio|file}
    • {String} webpageUrl Required if type equals news. The webpage link to share.
    • {String} imageUrl Provide a remote image if type equals image.
    • {String} videoUrl Provide a remote video if type equals video.
    • {String} musicUrl Provide a remote music if type equals audio.
    • {String} filePath Provide a local file if type equals file.
    • {String} fileExtension Provide the file type if type equals file.

These example code need 'react-native-chat' and 'react-native-fs' plugin.

import * as WeChat from 'react-native-wechat';
import fs from 'react-native-fs';
var resolveAssetSource = require('resolveAssetSource'); // along with Image component
// Code example to share text message:
try {
    var result = await  WeChat.shareToTimeline({type: 'text', description: 'I\'m Wechat, :)'});
    console.log('share text message to time line successful', result);
}
catch (e) {
    console.log('share text message to time line failed', e);
}

// Code example to share image url:
// Share raw http(s) image from web will always fail with unknown reason, please use image file or image resource instead
try {
    var result = await WeChat.shareToTimeline({
        type: 'imageUrl',
        title: 'web image',
        description: 'share web image to time line',
        mediaTagName: 'email signature',
        messageAction: undefined,
        messageExt: undefined,
        imageUrl: 'http://www.ncloud.hk/email-signature-262x100.png'
    });
    console.log('share image url to time line successful', result);
}
catch (e) {
    console.log('share image url to time line failed', e);
}

// Code example to share image file:
try {
    var rootPath = fs.DocumentDirectoryPath;
    var savePath = rootPath + '/email-signature-262x100.png';
    console.log({savePath});
    /*
     * savePath on iOS may be:
     *  /var/mobile/Containers/Data/Application/B1308E13-35F1-41AB-A20D-3117BE8EE8FE/Documents/email-signature-262x100.png
     *
     * savePath on Android may be:
     *  /data/data/com.wechatsample/files/email-signature-262x100.png
     * */

    await fs.downloadFile('http://www.ncloud.hk/email-signature-262x100.png', savePath);

    var result = await WeChat.shareToTimeline({
        type: 'imageFile',
        title: 'image file download from network',
        description: 'share image file to time line',
        mediaTagName: 'email signature',
        messageAction: undefined,
        messageExt: undefined,
        imageUrl: "file://" + savePath // require the prefix on both iOS and Android platform
    });

    console.log('share image file to time line successful', result);
}
catch (e) {
    console.log('share image file to time line failed', e);
}

// Code example to share image resource:
try {
    var imageResource = require('./email-signature-262x100.png');
    var result = await WeChat.shareToTimeline({
        type: 'imageResource',
        title: 'resource image',
        description: 'share resource image to time line',
        mediaTagName: 'email signature',
        messageAction: undefined,
        messageExt: undefined,
        imageUrl: resolveAssetSource(imageResource).uri
    });
    console.log('share resource image to time line successful', result);
}
catch (e) {
    console.log('share resource image to time line failed', e);
}


// Code example to download an word file from web, then share it to WeChat session
// only support to share to session but time line
// iOS code use DocumentDirectoryPath
try {
    var rootPath = fs.DocumentDirectoryPath;
    var fileName = 'signature_method.doc';    
    var savePath = rootPath + '/' + fileName;
    /*
     * savePath on iOS may be:
     *  /var/mobile/Containers/Data/Application/B1308E13-35F1-41AB-A20D-3117BE8EE8FE/Documents/signature_method.doc
     *
     * */

    await fs.downloadFile('https://open.weixin.qq.com/zh_CN/htmledition/res/assets/signature_method.doc', savePath);

    var result = await WeChat.shareToSession({
        type: 'file',
        title: fileName, // WeChat app treat title as file name
        description: 'share word file to chat session',
        mediaTagName: 'word file',
        messageAction: undefined,
        messageExt: undefined,
        filePath: savePath,
        fileExtension: '.doc'
    });

    console.log('share word file to chat session successful', result);
}
catch (e) {
    console.log('share word file to chat session failed', e);
}
//android code use ExternalDirectoryPath
try {
    var rootPath = fs.ExternalDirectoryPath;
    var fileName = 'signature_method.doc';
    var savePath = rootPath + '/' + fileName;
    /*
     * savePath on Android may be:
     *  /storage/emulated/0/Android/data/com.wechatsample/files/signature_method.doc
     * */

    await fs.downloadFile('https://open.weixin.qq.com/zh_CN/htmledition/res/assets/signature_method.doc', savePath);

    var result = await WeChat.shareToSession({
        type: 'file',
        title: fileName, // WeChat app treat title as file name
        description: 'share word file to chat session',
        mediaTagName: 'word file',
        messageAction: undefined,
        messageExt: undefined,
        filePath: savePath,
        fileExtension: '.doc'
    });

    console.log('share word file to chat session successful', result);
}
catch (e) {
    console.log('share word file to chat session failed', e);
}

shareToSession(data)

Similar to shareToTimeline but send message to a friend or a groups.

addListener(eventType, listener[, context])

Adds a listener to be invoked when events of the specified type are emitted. An optional calling context may be provided.

Return a object like {remove: function} which can be used to remove this listener.

once(eventType, listener[, context])

Similar to addListener, except that the listener is removed after it is invoked once.

removeAllListeners()

Removes all of the registered listeners, including those registered as listener maps.

Event Types:

SendAuth.Resp

Receive result for sendAuthRequest - errCode {int} - errStr {String} Error message if any error occured. - openId {String} - code {String} Authorize code - url {String} - lang {String} - country {String}

SendMessageToWX.Resp

Receive result for shareToTimeline and shareToSession - errCode {int} be 0 if auth successed. - errStr {String} Error message if any error occured.

For more details, visit WeChat SDK Documentation

Authors

License

MIT @ WeFlex,Inc