React Native 轻松集成分享功能( iOS 篇)

极光JIGUANG

产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家。 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台)。支持的平台如下:

第一步 安装:

在你的项目路径下执行命令:

npm install jshare-react-native --save
npm install jcore-react-native --save
react-native link

第二步:配置

配置 info.plist

在 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>mqqopensdkapiV4</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>mqqbrowser</string>
    <string>mttbrowser</string>
</array>

添加 URL Types

clipboard.png

URL Types 设置

要是实现跳转还需要在 Xcode 工程目录中的 [TARGETS] -> [Info] 中设置:

clipboard.png

HTTPS 设置

Apple 将从 2017 年开始执行 ATS(App Transport Security),所有进行审核的应用中网络请求全部支持 HTTPS,届时以下配置将会失效,请提前做好准备。

目前 JSHARE 支持不存在新浪微博客户端情况下的网页分享,但是由于新浪微博的 api 尚未针对 https 做优化所以需要针对新浪的做对应的 https 设置。在 JSHARE 中是默认关闭新浪微博的网页端分享的,如需使用这个功能则需要在 JSHARELaunchConfig 类的实例中将 isSupportWebSina 属性设置为 YES。

以 iOS10 SDK 编译的工程会默认以 SSL 安全协议进行网络传输,即 HTTPS,如果依然使用 HTTP 协议请求网络会报系统异常并中断请求。目前可用如下这种方式保持用 HTTP 进行网络连接:

在 info.plist 中加入安全域名白名单(右键 info.plist 用 source code 打开)

<key>NSAppTransportSecurity</key>
<dict>
    <!-- 配置允许 http 的任意网络 End-->
   <key>NSExceptionDomains</key>
   <dict>
       <!-- 集成新浪微博对应的 HTTP 白名单-->
       <key>sina.com.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>sinaimg.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>sinajs.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>sina.cn</key>
       <dict>
           <!-- 适配 iOS10 -->
           <key>NSExceptionMinimumTLSVersion</key>
           <string>TLSv1.0</string>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>weibo.cn</key>
       <dict>
           <!-- 适配 iOS10 -->
           <key>NSExceptionMinimumTLSVersion</key>
           <string>TLSv1.0</string>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <key>weibo.com</key>
       <dict>
           <!-- 适配 iOS10 -->
           <key>NSExceptionMinimumTLSVersion</key>
           <string>TLSv1.0</string>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
           <true/>
           <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
           <false/>
       </dict>
       <!-- 新浪微博-->  
   </dict>
</dict>

第三步:Usage 使用

import JShareModule from 'jshare-react-native';
JShareModule.setup(param)  // iOS 需要调用初始化函数, parm 这个参数
,需要填入应用注册信息,详情可以参考 API 文档

成功初始化后,就可以调用分享接口,我们先要构造消息对象,然后再调用 share()

 //
 // platformString:'wechat_session' / 微信好友(会话)
//                               'wechat_timeLine' /  微信朋友圈
//                               'wechat_favourite' / 微信收藏
//                               'qq' / QQ 好友
//                               'qzone' /   QQ 空间
//                               'sina_weibo' /  新浪微博
//                               'sina_weibo_contact'/ 新浪微博联系人
 //
 //
 // textMessage =
 // {
 //  type: 'text'
 //  platform: platformString  // 分享到指定平台
 //  text: String
 //  imagePath: // 选填,新浪微博本地图片地址,其他平台没有这个字段(iOS 不支持这个字段)
 // }
 // 
 // imageMessage =
 // {
 //  type: 'image'
 //  platform: platformString  // 分享到指定平台
 //  imagePath: String   // 本地图片路径 imagePath, imageUrl imageArray 必须三选一
 //  text: String  // 选填
 //  imageUrl: String // 网络图片地址,必须以 http 或 https 开头,imagePath, imageUrl imageArray 必须三选一 (iOS 不支持这个字段)
 //  imageArray: [String]  // (选填: 分享到 Qzone 才提供这个字段) 如果需要分享多张图片需要这个参数,数组中问题图片路径 imagePath, imageUrl imageArray 必须三选一
 // }
 // 
 // videoMessage =
 // {
 //   type: 'video'
 //   platform: platformString  // 分享到指定平台
 //   title: String // 选填
 //   url: String // 视频跳转页面 url
 //   text: String  // 选填
 //   imagePath: String // 选填,缩略图,本地图片路径
 //  
 //  videoUrl: String  // QQ 空间本地视频 (iOS 不支持这个字段)
 // }
 // 
 // audioMessage =
 // {
 //   type: 'audio'
 //   platform: platformString  // 分享到指定平台
 //   musicUrl: String //必填 点击直接播放的 url
 //   url: String //选填,点击跳转的 url
 //   imagePath: String   //选填,缩略图,本地图片路径,imagePath,imageUrl 必须二选一
 //   imageUrl: String // 选填,网络图片路径,imagePath,imageUrl 必须二选一
 //  title: String // 选填 
 //  text: String  // 选填
 // }
 // 
 // fileMessage =
 // {
 //   type: 'file'
 //   platform: platformString  // 分享到指定平台
 //   path: String // 必填,文件路径
 //   fileExt: String // 必填,文件类型后缀
 //   tile: String
 // }
 // 
 // emoticonMessage =
 // {
 //  type: 'emoticon'
 //  platform: platformString  // 分享到指定平台
 //  imagePath: String // 必填,本地图片路径
 // }
 // 
 // appMessage =
 // {
 //   type: 'app' // wechat_favourite 不支持
 //   platform: platformString  // 分享到指定平台
 //   url: String // 点击跳转 url
 //   extInfo: String // 选填 第三方应用自定义数据
 //   path: String // 选填 对应 app 数据文件
 //   title: String // 选填
 //   text: String // 选填
 // }
 // 
 // {
 //   type: 'link'
 //   platform: platformString  // 分享到指定平台
 //   url: String // 必填,网页 url
 //   imagePath: String // 选填,本地图片路径 imagePath,imageUrl 必须二选一 
 //   imageUrl: String // 选填,网络图片地址 imagePath imageUrl 必须二选一 (iOS 不支持)
 //   title: String // 选填
 //   text: String // 选填
 // }


 // 消息分享可以分享如上的类型,不同消息需要构建不同的消息对象
 // 当前支持 文字、图片、音频、视频、文件、链接、app、表情
  JShareModule.share(message, successCallback, failCallback)

示例代码(分享文本到微信好友)

var shareParam = {
  platform: "wechat_session",
  type: "text",
  text: "JShare test text"
};
shareParam.imagePath = this.state.path  // this.state.path 是本地图片的路径
JShareModule.share(shareParam, (result) => {
  console.log("share succeed, result: " + result);
}, (error) => {
  console.log("share failed, map: " + error);
});

到此我们已经成功集成了分享功能,其他的 API 使用建议参考 文档

阅读 2.9k

极光推送
极光是中国领先的移动大数据服务商。其团队核心成员来自腾讯、摩根士丹利、豆瓣、Teradata和中国移动等...

极光(www.jiguang.cn)是中国领先的移动大数据服务商。其团队核心成员来自腾讯、摩根士丹利、豆瓣、Ter...

1.3k 声望
1.3k 粉丝
0 条评论

极光(www.jiguang.cn)是中国领先的移动大数据服务商。其团队核心成员来自腾讯、摩根士丹利、豆瓣、Ter...

1.3k 声望
1.3k 粉丝
文章目录
宣传栏