# react-native-wechat **Repository Path**: UnPourTous/react-native-wechat ## Basic Information - **Project Name**: react-native-wechat - **Description**: WeChat login, share, favorite and payment for React-Native on iOS and Android platforms (QQ: 336021910) - **Primary Language**: Objective-C - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2020-02-13 - **Last Updated**: 2025-01-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # React-Native-Wechat [React Native] bridging library that integrates WeChat SDKs: - [x] iOS SDK 1.7.2 - [x] Android SDK 221 And [react-native-wechat] has the following tracking data in open source world: | NPM | Dependency | Downloads | Build | |-----|------------|-----------|-------| | [![NPM version][npm-image]][npm-url] | [![Dependency Status][david-image]][david-url] | [![Downloads][downloads-image]][downloads-url] | [![Build Status][travis-image]][travis-url] | ## Table of Contents - [Get Startted](#get-startted) - [API Documentation](#api-documentation) - [Installation](#installation) - [Community](#community) - [Authors](#authors) - [License](#license) ## Get Startted - [Build setup on iOS](./docs/build-setup-ios.md) - [Build setup on Android](./docs/build-setup-android.md) ## API Documentation [react-native-wechat] exposes the promise-based, therefore you could use `Promise` or `async/await` to manage your dataflow. #### registerApp(appid) - `appid` {String} the appid you get from WeChat dashboard - returns {Boolean} explains if your application is registered done This method should be called once globally. ```js import * as WeChat from 'react-native-wechat'; WeChat.registerApp('appid'); ``` #### registerAppWithDescription(appid, description) - `appid` {String} the appid you get from WeChat dashboard - `description` {String} the description of your app - returns {Boolean} explains if your application is registered done This method is only available on iOS. #### isWXAppInstalled() - returns {Boolean} if WeChat is installed. Check if wechat installed in this app. #### isWXAppSupportApi() - returns {Boolean} Contain the result. Check if wechat support open url. #### getApiVersion() - returns {String} Contain the result. Get api version of WeChat SDK. #### 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 | #### sendSubscribeMsgReq({scene, templateId, reserved}) - `scene` {Number} 重定向后会带上 scene 参数，开发者可以填 0-10000 的整形值，用来标识订阅场值 - `templateId` {String} 订阅消息模板 ID - `reserved` {String} 用于保持请求和回调的状态，授权请后原样带回给第三方。该参数可用于防止 csrf 攻击 - returns {Object} Send subscribeMsg 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 | 用户唯一标识 | | templateId | String | Authorization code | | action | String | 用户点击动作，"confirm"代表用户确认授权，"cancel"代表用户取消授权 | | scene | Number | 订阅场景值。 | | reserved | String | 请求带入原样返回。 | #### class `ShareMetadata` - `type` {Number} type of this message. Can be {news|text|imageUrl|imageFile|imageResource|video|audio|file} - `thumbImage` {String} Thumb image of the message, which can be a uri or a resource id. - `description` {String} The description about the sharing. - `webpageUrl` {String} Required if type equals `news`. The webpage link to share. - `imageUrl` {String} Provide a remote image if type equals `image`. - `videoUrl` {String} Provide a remote video if type equals `video`. - `musicUrl` {String} Provide a remote music if type equals `audio`. - `filePath` {String} Provide a local file if type equals `file`. - `fileExtension` {String} Provide the file type if type equals `file`. #### shareToTimeline(message) - `message` {ShareMetadata} This object saves the metadata for sharing - returns {Object} Share a `ShareMetadata` message to timeline(朋友圈) and returns: | name | type | description | |---------|--------|-------------------------------------| | errCode | Number | 0 if authorization successed | | errStr | String | Error message if any error occurred | These example code need 'react-native-chat' and 'react-native-fs' plugin. ```js import * as WeChat from 'react-native-wechat'; import fs from 'react-native-fs'; let resolveAssetSource = require('resolveAssetSource'); // Code example to share text message: try { let result = await WeChat.shareToTimeline({ type: 'text', description: 'hello, wechat' }); console.log('share text message to time line successful:', result); } catch (e) { if (e instanceof WeChat.WechatError) { console.error(e.stack); } else { throw 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 { let 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) { if (e instanceof WeChat.WechatError) { console.error(e.stack); } else { throw e; } } // Code example to share image file: try { let rootPath = fs.DocumentDirectoryPath; let 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); let 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) { if (e instanceof WeChat.WechatError) { console.error(e.stack); } else { throw e; } } // Code example to share image resource: try { let imageResource = require('./email-signature-262x100.png'); let 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) { if (e instanceof WeChat.WechatError) { console.error(e.stack); } else { throw 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 { let rootPath = fs.DocumentDirectoryPath; let fileName = 'signature_method.doc'; /* * savePath on iOS may be: * /var/mobile/Containers/Data/Application/B1308E13-35F1-41AB-A20D-3117BE8EE8FE/Documents/signature_method.doc **/ let savePath = rootPath + '/' + fileName; await fs.downloadFile('https://open.weixin.qq.com/zh_CN/htmledition/res/assets/signature_method.doc', savePath); let 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) { if (e instanceof WeChat.WechatError) { console.error(e.stack); } else { throw e; } } //android code use ExternalDirectoryPath try { let rootPath = fs.ExternalDirectoryPath; let fileName = 'signature_method.doc'; /* * savePath on Android may be: * /storage/emulated/0/Android/data/com.wechatsample/files/signature_method.doc **/ let savePath = rootPath + '/' + fileName; await fs.downloadFile('https://open.weixin.qq.com/zh_CN/htmledition/res/assets/signature_method.doc', savePath); let 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) { if (e instanceof WeChat.WechatError) { console.error(e.stack); } else { throw e; } } ``` #### shareToSession(message) - `message` {ShareMetadata} This object saves the metadata for sharing - returns {Object} Similar to `shareToTimeline` but send message to a friend or chat group. #### pay(payload) - `payload` {Object} the payment data - `partnerId` {String} 商家向财付通申请的商家ID - `prepayId` {String} 预支付订单ID - `nonceStr` {String} 随机串 - `timeStamp` {String} 时间戳 - `package` {String} 商家根据财付通文档填写的数据和签名 - `sign` {String} 商家根据微信开放平台文档对数据做的签名 - returns {Object} Sends request for proceeding payment, then returns an object: | name | type | description | |---------|--------|-------------------------------------| | errCode | Number | 0 if authorization successed | | errStr | String | Error message if any error occurred | ## Installation ```sh $ npm install react-native-wechat --save ``` ## Community #### IRC #### Tutorials - [react-native-wechat微信组件的使用](http://www.jianshu.com/p/3f424cccb888) - [超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用](http://www.jianshu.com/p/ce5439dd1f52) - [柳轩涤俗 - 微信登录](http://www.cnblogs.com/zhangdw/p/6194345.html) #### Who use it ## Authors | GitHub | Role | Email | |---------------|------------|-----------------------| | [@yorkie] | Author | yorkiefixer@gmail.com | | [@xing-zheng] | Emeriti | | | [@tdzl2003] | Emeriti | tdzl2003@gmail.com | [@yorkie]: https://github.com/yorkie [@xing-zheng]: https://github.com/xing-zheng [@tdzl2003]: https://github.com/tdzl2003 ## License MIT [react-native-wechat]: https://github.com/yorkie/react-native-wechat [npm-image]: https://img.shields.io/npm/v/react-native-wechat.svg?style=flat-square [npm-url]: https://npmjs.org/package/react-native-wechat [travis-image]: https://img.shields.io/travis/yorkie/react-native-wechat.svg?style=flat-square [travis-url]: https://travis-ci.org/yorkie/react-native-wechat [david-image]: http://img.shields.io/david/yorkie/react-native-wechat.svg?style=flat-square [david-url]: https://david-dm.org/yorkie/react-native-wechat [downloads-image]: http://img.shields.io/npm/dm/react-native-wechat.svg?style=flat-square [downloads-url]: https://npmjs.org/package/react-native-wechat [React Native]: https://github.com/facebook/react-native [react-native-cn]: https://github.com/reactnativecn [WeChat SDK]: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417674108&token=&lang=zh_CN [Linking Libraries iOS Guidance]: https://developer.apple.com/library/ios/recipes/xcode_help-project_editor/Articles/AddingaLibrarytoaTarget.html