react-native开源组件react-native-wechat学习
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-open-source-components-react-native-wechat-learning/
由于最近工作的需要用到微信分享，于是我就找开源组件库(react-native-wechat),下面是具体的使用方法。
一、进入到项目的目录中执行如下命令:
$ npm install react-native-wechat --save
二、IOS:打开你的Xcode工程
2.1 从node_modules/react-native-wechat/ios中链接RCTWeChat到库文件中，不要忘记将它添加到"Buid Phases"中(如下图所示。注：具体的可以参考facebook官网的方法http://facebook.github.io/react-native/docs/linking-libraries-ios.html)
2.2 添加一下库文件（Build Phase->Link Binary With Libraries）：SystemConfiguration.framework，CoreTelephony.framework ，libsqlite3.0，libc++,libz
2.3添加app id （Targets->info->URL types）注：URL Schemes填写的是APP ID 需要去微信开发者平台注册。
2.4为了适配IOS9需要在LSApplicationQueriesSchemes (Target-info-Custom IOS Target Properties)添加微信为白名单。我们需要修改info.plist文件,
然后添加如下的代码:
<key>LSApplicationQueriesSchemes</key>
<array>
<!-- 微信 URL Scheme 白名单-->
<string>wechat</string>
<string>weixin</string>
<!-- 新浪微博 URL Scheme 白名单-->
<string>sinaweibohd</string>
<string>sinaweibo</string>
<string>sinaweibosso</string>
<string>weibosdk</string>
<string>weibosdk2.5</string>
<!-- QQ、Qzone URL Scheme 白名单-->
<string>mqqapi</string>
<string>mqq</string>
<string>mqqOpensdkSSoLogin</string>
<string>mqqconnect</string>
<string>mqqopensdkdataline</string>
<string>mqqopensdkgrouptribeshare</string>
<string>mqqopensdkfriend</string>
<string>mqqopensdkapi</string>
<string>mqqopensdkapiV2</string>
<string>mqqopensdkapiV3</string>
<string>mqzoneopensdk</string>
<string>wtloginmqq</string>
<string>wtloginmqq2</string>
<string>mqqwpa</string>
<string>mqzone</string>
<string>mqzonev2</string>
<string>mqzoneshare</string>
<string>wtloginqzone</string>
<string>mqzonewx</string>
<string>mqzoneopensdkapiV2</string>
<string>mqzoneopensdkapi19</string>
<string>mqzoneopensdkapi</string>
<string>mqzoneopensdk</string>
<!-- 支付宝 URL Scheme 白名单-->
<string>alipay</string>
<string>alipayshare</string>
</array>
2.5因为需要使用LinkingIOS,还需要在AppDelegate.m中添加如下代码:
#import "../Libraries/LinkingIOS/RCTLinkingManager.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
三、API文档
3.1 registerApp(appid)
{string} appid 你的appid
return {promise} 返回一个promise对象
3.2 registerAppWithDescription(appid,appdesc) ->仅支持IOS
{string} appid （同上）
{String} appdesc 你的app的说明
return {promise}
3.3 isWXAppInstalled() 检查微信是否初始化
3.4 isWXAppSupportApi()检查微信是否支持url
3.5 getApiVersion() 获得微信SDK的版本
3.6 openWXApp() 打开微信app
3.7 sendAuthRequest([scope[,state]]) 发送默认请求，scope：登录时所申请的权限默认为get_simple_userinfo.需要
多个权限的时候以逗号分隔开。
3.8 shareToTimeline(data) 分享信息到朋友圈
{Object } data 包含以下发送信息
{string} thumbImage 可以是一个uri或者资源id
{string} type 信息的类型，可以是 {news|text|imageUrl|imageFile|imageResource|video|audio|file}
{string} webpageUrl 如果类型是news,分享一个网页链接
{string} imageUrl 如果类型是image,提供一个远程的图片链接
{string} videoUrl 如果类型是video,提供一个视频
{string} musicUrl 如果是audio,提供一个音乐
{string} filePath 提供本地文件
以下例子需要'react-native-wechat'和'react-native-fs'组件
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'; // like /var/mobile/Containers/Data/Application/B1308E13-35F1-41AB-A20D-3117BE8EE8FE/Documents/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: savePath
});
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);
}
3.9 shareToSession(data) 用法和shareToTimeline用法相似，发送信息给一个朋友或者群组
3.10 addListener(eventType,listener[,context]) 当事件触发时，会调用一个监听器，返回一个对象
3.11 once(eventType,listener[,context]) 用法和addListener相似
3.12 removeAllListener() 删除所有的注册监听器
