转载链接: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),下面是具体的使用方法。
一、进入到项目的目录中执行如下命令:
$npminstallreact-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> <!--微信URLScheme白名单--> <string>wechat</string> <string>weixin</string> <!--新浪微博URLScheme白名单--> <string>sinaweibohd</string> <string>sinaweibo</string> <string>sinaweibosso</string> <string>weibosdk</string> <string>weibosdk2.5</string> <!--QQ、QzoneURLScheme白名单--> <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> <!--支付宝URLScheme白名单--> <string>alipay</string> <string>alipayshare</string> </array>
2.5因为需要使用LinkingIOS,还需要在AppDelegate.m中添加如下代码:
#import"../Libraries/LinkingIOS/RCTLinkingManager.h" @implementationAppDelegate -(BOOL)application:(UIApplication*)applicationopenURL:(NSURL*)urlsourceApplication:(NSString*)sourceApplicationannotation:(id)annotation{ return[RCTLinkingManagerapplication:applicationopenURL:urlsourceApplication:sourceApplicationannotation:annotation]; }
三、API文档
3.1registerApp(appid)
{string}appid你的appid
return{promise}返回一个promise对象
3.2registerAppWithDescription(appid,appdesc)->仅支持IOS
{string}appid(同上)
{String}appdesc你的app的说明
return{promise}
3.3isWXAppInstalled()检查微信是否初始化
3.4isWXAppSupportApi()检查微信是否支持url
3.5getApiVersion()获得微信SDK的版本
3.6openWXApp()打开微信app
3.7sendAuthRequest([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*asWeChatfrom'react-native-wechat'; importfsfrom'react-native-fs'; varresolveAssetSource=require('resolveAssetSource');//alongwithImagecomponent //Codeexampletosharetextmessage: try{ varresult=awaitWeChat.shareToTimeline({type:'text',description:'I\'mWechat,:)'}); console.log('sharetextmessagetotimelinesuccessful',result); } catch(e){ console.log('sharetextmessagetotimelineFailed',e); } //Codeexampletoshareimageurl: //Sharerawhttp(s)imagefromwebwillalwaysfailwithunknownreason,pleaseuseimagefileorimageresourceinstead try{ varresult=awaitWeChat.shareToTimeline({ type:'imageUrl',title:'webimage',description:'sharewebimagetotimeline',mediaTagName:'emailsignature',messageAction:undefined,messageExt:undefined,imageUrl:'http://www.ncloud.hk/email-signature-262x100.png' }); console.log('shareimageurltotimelinesuccessful',result); } catch(e){ console.log('shareimageurltotimelineFailed',e); } //Codeexampletoshareimagefile: try{ varrootPath=fs.DocumentDirectoryPath; varsavePath=rootPath+'/email-signature-262x100.png';//like/var/mobile/Containers/Data/Application/B1308E13-35F1-41AB-A20D-3117BE8EE8FE/Documents/email-signature-262x100.png awaitfs.downloadFile('http://www.ncloud.hk/email-signature-262x100.png',savePath); varresult=awaitWeChat.shareToTimeline({ type:'imageFile',title:'imagefiledownloadfromnetwork',description:'shareimagefiletotimeline',imageUrl:savePath }); console.log('shareimagefiletotimelinesuccessful',result); } catch(e){ console.log('shareimagefiletotimelineFailed',e); } //Codeexampletoshareimageresource: try{ varimageResource=require('./email-signature-262x100.png'); varresult=awaitWeChat.shareToTimeline({ type:'imageResource',title:'resourceimage',description:'shareresourceimagetotimeline',imageUrl:resolveAssetSource(imageResource).uri }); console.log('shareresourceimagetotimelinesuccessful',result); } catch(e){ console.log('shareresourceimagetotimelineFailed',e); }
3.9 shareToSession(data) 用法和shareToTimeline用法相似,发送信息给一个朋友或者群组
3.10 addListener(eventType,listener[,context]) 当事件触发时,会调用一个监听器,返回一个对象
3.11 once(eventType,context]) 用法和addListener相似