快速集成 react-native 的微信分享

来源:互联网 发布:期刊数据库 编辑:程序博客网 时间:2024/06/07 01:26


1.首先开发者需要在微信开放平台申请自己的 appid,这一步骤跳过.
2.在终端下载,并关联

npm install react-native-wechat --save

rnpm link react-native-wechat

微信分享需要0.35版本以上,若版本过低则先要升级(升级参考地址)


3.在 app delegate.m 中导入

<span style="font-size:18px;">#import "../Libraries/LinkingIOS/RCTLinkingManager.h"</span>

 并且添加

<span style="font-size:18px;">- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {    return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];  }</span>

4.在 Xcode 中配置分享到微信的一些参数.



 到这里 Xcode 需要的操作已经完成了.

5.找到需要分享功能的页面,引入刚刚下载的头文件

<span style="font-size:18px;">import * as WeChat from 'react-native-wechat';</span>

在这里可以点击react-native-wechat 查看 API.

这里主要用到三个 api

(1).注册

<span style="font-size:18px;">WeChat.registerApp('申请得到的 appid');</span>
(2).判断微信是否安装,如未安装则提示

(3).进行分享.这里分享的类型参数在 api 中注释得都很清晰

<span style="font-size:18px;"> WeChat.isWXAppInstalled()            .then((isInstalled) => {                if (isInstalled) {                    WeChat.shareToTimeline({                            title: title,                            description: description,                            thumbImage: thumbImage,                            type: 'news',                            webpageUrl: url                        })                        .catch((error) => {                            // error.message;                        });                } else {                    //没有安装微信软件,请您安装微信之后再试;                }            });</span>
需要注意的一点,registerApp 方法不要写在需要分享的页面中,因为注册只需注册一次就够了,若写在了分享页面,多次进行分享后会出现黄色警告,提示 appid 已经注册过.

最终继承后的效果如下:


 

0 0
原创粉丝点击