React-Native-Wechat-Lib

This library provides Wechat SDK support for React Native projects.

[React Native] bridging library that integrates WeChat SDKs:

• Android SDK 6.8.20
• iOS SDK 2.0

Roadmap

• 3.0.x
  • React Native 0.78+
  • Android SDK 6.8.20
  • iOS SDK 2.0
  • iOS SDK 2.0 No payment function
  • Example

Table of Contents

• Installation
• Getting Started
• API Reference

Installation

npm install react-native-wechat-lib --save

For React Native versions >= 0.60, auto-linking is available. For versions < 0.60, you need to run:

react-native link react-native-wechat-lib

Getting Started

• iOS Setup
• Android Setup
• Example Project

API Reference

This library supports TypeScript and uses Promise or async/await for handling asynchronous operations. The API naming and parameters are designed to be consistent with the official Tencent documentation.

registerApp(appid)

• appid {String} the appid you get from WeChat dashboard
• universalLink {String} iOS Universal Link
• returns {Boolean} explains if your application is registered done

This method should be called once globally.

import * as WeChat from 'react-native-wechat-lib';

WeChat.registerApp('appid', 'universalLink');

isWXAppInstalled()

• returns {Boolean} if WeChat is installed.

Check if the WeChat app is installed on the device.

isWXAppSupportApi()

• returns {Boolean} Contains the result.

Check if WeChat supports the Open API.

getApiVersion()

• returns {String} Contains the result.

Get the WeChat SDK API version.

openWXApp()

• returns {Boolean}

Open the WeChat app from your application.

sendAuthRequest([scope[, state]])

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

Send authentication request, and it returns an object with the following fields:

field	type	description
errCode	Number	Error Code
errStr	String	Error message if any error occurred
openId	String
code	String	Authorization code
url	String	The URL string
lang	String	The user language
country	String	The user country

authByScan([scope, nonceStr, onQRGet])

• appId {String} the appId you get from WeChat dashboard
• appSecret {String} the appSecret you get from WeChat dashboard
• onQRGet (String) => void

After calling authByScan, you need to listen for the QR code, and the callback will be triggered after the user scans the code to log in.

field	type	description
errCode	Number	Error Code
errStr	String	Error message if any error occurred
nickname	String	WeChat nickname
headimgurl	String	WeChat avatar URL
openid	String	openid
unionid	String	unionid

Example:

const ret = await WeChat.authByScan(WeiXinId, WeiXinSecret, (qrcode) => {
  console.log(qrcode)
  // Render the qrcode with an Image component
});  
console.log('Login info:', ret);

For more details, please refer to the official WeChat documentation.

ShareText(ShareTextMetadata)

ShareTextMetadata

name	type	description
text	String	Text to share
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareText({
  text: 'Text content.',
  scene: 0,
});

ShareImage(ShareImageMetadata)

ShareImageMetadata

name	type	description
imageUrl	String	Image URL
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareImage({
  imageUrl: 'https://google.com/1.jpg',
  scene: 0,
});

ShareLocalImage(ShareImageMetadata)

ShareImageMetadata

name	type	description
imageUrl	String	Local image path
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

ShareFile(ShareFileMetadata)

ShareFileMetadata

name	type	description
url	String	File path (http for remote, absolute path for local)
title	String	File title
scene	Number	0: Session

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

For sharing local files on Android, some configuration is required. See Android Setup.

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareFile({
  url: 'file:///sdcard/test.pdf',
  title: 'Test File.pdf',
  scene: 0,
});

ShareMusic(ShareMusicMetadata)

ShareMusicMetadata

name	type	description
title	String	Title
description	String	Description
thumbImageUrl	String	Thumbnail URL (will be compressed to 32KB)
musicUrl	String	Audio page URL
musicLowBandUrl	String	Low-bandwidth audio page URL
musicDataUrl	String	Audio data URL
musicLowBandDataUrl	String	Low-bandwidth audio data URL
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareMusic({
  title: 'Good music.',
  musicUrl: 'https://google.com/music.mp3',
  thumbImageUrl: 'https://google.com/1.jpg',
  scene: 0,
});

ShareVideo(ShareVideoMetadata)

ShareVideoMetadata

name	type	description
title	String	Title
description	String	Description
thumbImageUrl	String	Thumbnail URL (will be compressed to 32KB)
videoUrl	String	Video URL
videoLowBandUrl	String	Low-bandwidth video URL
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareVideo({
  title: 'Interesting video.',
  videoUrl: 'https://google.com/music.mp3',
  thumbImageUrl: 'https://google.com/1.jpg',
  scene: 0,
});

ShareWebpage (ShareWebpageMetadata)

ShareWebpageMetadata

name	type	description
title	String	Title
description	String	Description
thumbImageUrl	String	Thumbnail URL (will be compressed to 32KB)
webpageUrl	String	HTML link
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareWebpage({
  title: 'Interesting web.',
  webpageUrl: 'https://google.com/page.html',
  thumbImageUrl: 'https://google.com/1.jpg',
  scene: 0,
});

ShareMiniProgram(ShareMiniProgramMetadata)

ShareMiniProgram

name	type	description
title	String	Title
description	String	Description
thumbImageUrl	String	Thumbnail URL (will be compressed to 32KB)
userName	String	Mini program's original ID
path	String	Page path of the mini program
hdImageUrl	String	HD preview image for mini program (supported in WeChat 6.5.9+)
withShareTicket	String	Whether to use sharing with shareTicket
miniProgramType	Number	Mini program type (Default: official)
webpageUrl	String	Fallback webpage URL for older versions
scene	Number	0: Session, 1: Timeline, 2: Favorite

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.shareMiniProgram({
  title: 'Mini program.',
  userName: 'gh_d39d10000000',
  webpageUrl: 'https://google.com/show.html',
  thumbImageUrl: 'https://google.com/1.jpg',
  scene: 0,
});

LaunchMiniProgram (LaunchMiniProgramMetadata)

LaunchMiniProgramMetadata

name	type	description
userName	String	Mini program's original ID
miniProgramType	Number	Mini program type (develop, trial, or official)
path	String	Page path to launch, can include query parameters (e.g., "?foo=bar")

Return:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

WeChat.launchMiniProgram({
  userName: 'gh_d39d10000000',
  miniProgramType: 1,
});

ChooseInvoice (ChooseInvoice)

ChooseInvoice

name	type	description
cardSign	String	Signature
signType	String	Signature type
timeStamp	Number	Timestamp
nonceStr	String	Random string

Invoice

name	type	description
appId	String
cardId	String	Invoice ID
encryptCode	String	Encrypted code

Return:

name	type	description
errCode	Number	0 if authorization succeed
cards	Invoice[]	Invoice data
errStr	String	Error message if any error occurred

import * as WeChat from 'react-native-wechat-lib';

// On iOS, this can be called without parameters.
// On Android, you can use dummy data to get it working.
// Refer to WeChat documentation for how to get the real parameters.
WeChat.chooseInvoice({
  cardSign: 'cardSign',
  signType: 'SHA256',
  timeStamp: Date.now(),
  nonceStr: `${Date.now()}`,
});

pay(payload)

• payload {Object} the payment data
  • partnerId {String} Merchant ID
  • prepayId {String} Prepay order ID
  • nonceStr {String} Random string
  • timeStamp {String} Timestamp
  • package {String} Package data and signature
  • sign {String} Signature
• returns {Object}

Sends request for proceeding payment, then returns an object:

name	type	description
errCode	Number	0 if authorization succeed
errStr	String	Error message if any error occurred

subscribeMessage(SubscribeMessageMetadata)

• returns {Object}

name	type	description
scene	Number	A value from 0-10000 to identify the subscription scene.
templateId	String	Subscription message template ID.
reserved	String	A state parameter to prevent CSRF attacks.

Event Listening

Listen for events when returning to the app from WeChat (e.g., after a Mini Program launch or a payment).

import { DeviceEventEmitter } from 'react-native';
import * as WeChat from 'react-native-wechat-lib';

WeChat.registerApp(Global.APP_ID, Global.UNIVERSAL_LINK);

DeviceEventEmitter.addListener('WeChat_Req', req => {
  console.log('req:', req)
  if (req.type === 'LaunchFromWX.Req') { // Event from returning from Mini Program
    miniProgramCallback(req.extMsg)
  }
});

DeviceEventEmitter.addListener('WeChat_Resp', resp => {
  console.log('res:', resp)
  if (resp.type === 'WXLaunchMiniProgramReq.Resp') { // Event from returning from Mini Program
    miniProgramCallback(resp.extMsg)
  } else if (resp.type === 'SendMessageToWX.Resp') { // Event after sending a message
    sendMessageCallback(resp.country)
  } else if (resp.type === 'PayReq.Resp') { // Event after payment
    payCallback(resp)
  }
});

License

This project is licensed under the MIT License.

Originally authored by little-snow-fox.