V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jpush
V2EX  ›  推广

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

  •  
  •   jpush · 2017-09-19 14:52:50 +08:00 · 5252 次点击
    这是一个创建于 2383 天前的主题,其中的信息可能已经有所发展或是发生改变。

    产品一直催我在 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 格式说明

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


    作者:HuminiOS - 极光( JPush 为极光推送团队账号,欢迎关注)

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

    知乎专栏:极光日报

    2 条回复    2017-09-25 13:40:34 +08:00
    byuan04
        1
    byuan04  
       2017-09-20 18:27:40 +08:00
    这年头还用 RN 是要把自己产品送给 FB 了么..
    jpush
        2
    jpush  
    OP
       2017-09-25 13:40:34 +08:00
    @byuan04 FB 已经修改协议了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2857 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:39 · PVG 21:39 · LAX 06:39 · JFK 09:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.