美文网首页极光程序员
React Native 轻松集成分享功能（iOS 篇）

React Native 轻松集成分享功能（iOS 篇）

作者: HuminiOS | 来源:发表于2017-08-03 15:31 被阅读355次

产品一直催我在 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

各个平台的 URL Schemes 格式说明：
平台 格式 举例
微信 微信 appKey wxa2ea563906227379
QQ 需添加：“tencent” + 腾讯 QQ 互联应用 appID 如 appID 为:1105864531
URL Schemes 值为:tencent1105864531
新浪微博 “wb”+新浪 appKey 如 appKey 为:727232518
URL Schemes 值为: wb727232518

URL Types 设置

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


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 使用建议参考 文档

相关文章

网友评论

  • d7f16da285f6:你好，正打算使用jshare-react-native这个插件时限分享功能，请问ios和android两个平台使用这一个插件就可以实现分享了是吗？分享出来的那个向上可以修改吗
  • f830ef97075e:您好，我使用jshare进行微信／微博分享，目前遇到的一个问题就是如何设置imagePath本地图片路径？我按照文档上面的demo方法，但是NativeAppEventEmitter.addListener方法并没有调用。
    因为我目前是想分享出去一个链接，这个分享的链接上面会有一个图标。类似我们点完外卖分享出去的链接，上面的那个icon图标。
    谢谢～！！！
    HuminiOS:@不知道_0965 你这个是相对路径，要传绝对路径。
    f830ef97075e:@HuminiOS 您好，是的我已经知道图片的路径就在本地，但是我直接用我本地的路径，图片没有显示出来。我写的路径是这样的：../img/invite.png。
    代码是这样的：
    var shareParam = {
    type: "link",
    platform: "wechat_session",
    url: this.state.inviteUrl,
    imageUrl: "../img/invite.png",
    title: "****",
    text: "************"
    };

    您所说的这个路径是什么路径呢，我没有找到类似结构的路径？:cry:
    HuminiOS:NativeAppEventEmitter.addListener 这个方法只是获取本地资源路径， 如果你的应用已经知道了本地路径，这个方法没什么必要 。

    imagePath 的格式你可以参考一下 真机的话是这种格式： /var/containers/Bundle/Application/1A3B20CA-694F-4305-8C3E-3EB43FA52CE7/jshare.app/wechat@3x.png
  • f830ef97075e:作者您好，我已经使用了jpush在自己的项目中进行消息推送；同时也使用了react-native-wechat这个组件实现了微信分享的功能，但是尚未实现微博分享，所以现在我想使用一整套的极光相关组件实现推送、分享等功能。但是目前的问题就是，以前的项目集成了react-native-wechat这个组件，同时也配置了相关内容，我是否要将以前配置的内容全部删除再来配置极光的组件。
    tips：您的这篇文章第一步安装：npm install janalytics-react-native --save写错了，应该是npm install jshare-react-native --save
    HuminiOS:@不知道_0965 一般不会有问题
    f830ef97075e:@HuminiOS 谢谢回复，那react-native-wechat 这个组件我不uninstall问题应该不是很大吧？我直接去集成您的组件去实现微信+微博的， 应该可以的是吧？
    HuminiOS:需要注意配置 info.plist 和 URL types 这两个步骤，
    如果及成过 react-native-wechat 这个组件，那么 info.plist 和 URL types 就应该不需要重新改动 微信的了，在原有的集成上加上微博的就行。

本文标题：React Native 轻松集成分享功能（iOS 篇）

本文链接：https://www.haomeiwen.com/subject/lfdplxtx.html

延伸阅读

深度阅读

  • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

极光

程序员

关于我们|服务条款|联系我们|React Native 轻松集成分享功能（iOS 篇）|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！