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),下面是具体的使用方法

一、进入到项目的目录中执行如下命令:

$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相似

3.12 removeAllListener() 删除所有的注册监听器

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....