React Native 輕鬆集成分享功能（iOS 篇）

来源:http://www.cnblogs.com/jpush88/archive/2017/09/19/7551881.html
-Advertisement-
Play Games

產品一直催我在 RN 項目中添加分享功能，一直沒找到合適的庫，今天讓我看到了一個 "插件" 分享給大家。 在集成插件之前，需要在各大開放平臺上成功註冊應用，並通過審核（支持 3 個可選的主流平臺）。支持的平臺如下： "微信開放平臺" "QQ 開放平臺" "微博開放平臺" 第一步 安裝: 在你的項目路 ...


產品一直催我在 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 使用建議參考 文檔

作者：HuminiOS - 極光推送
原文：React Native 輕鬆集成分享功能（iOS 篇）
知乎專欄：極光日報


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基於 Electron 的爬蟲框架 Nightmare
    Electron 可以讓你使用純 JavaScript 調用 Chrome 豐富的原生的介面來創造桌面應用。你可以把它看作一個專註於桌面應用的 Node.js 的變體，而不是 Web 伺服器。其基於瀏覽器的應用方式可以極方便的做各種響應式的交互，接下來介紹下關於 Electron 上衍生出的框架 N... ...
  • 解決vue.js在編寫過程中出現空格不規範報錯的情況
    找到build文件夾下麵的webpack.base.conf.js文件。 然後打開該文件，找到圖下這段代碼，把他註釋掉。 註釋掉之後，再進行子頁面等編寫的時候，空格不規範的情況下也不會再報錯啦。因為這個報錯對於初學者來說實在頭大。哈哈O(∩_∩)O哈哈~ 我標註的這些地方，原本是有嚴格的空格規範要求 ...
  • 聽說2017你想寫前端？
    不好意思，沒有像其他公眾號一樣趕著發文章，每年到這個時候總有一大波什麼今年前端預測，技術框架預測什麼的。我這次寫這篇文針對的對象，是想在今年踏入前端這行的人們，不管你現在是徘徊在門口，還是已經半隻腳踏入這片未知領域，都可以參考一下先行者的經驗。 ...
  • 前端開發者指南（2017）
    這是一本可供任何人使用的指南，用於學習前端開發實踐。該指南大體上勾勒出了前端工程的輪廓，同時也討論了前端工程的實踐：2017 年，如何學習前端工程，用什麼工具來實踐？ 筆者有意將本書打造為一份專業資料，為想要或正在實踐的前端開發者們提供學習材料和開發工具。其次，它同樣可供主管、CTO、講師和獵頭們... ...
  • jQuery選擇器之樣式二
    prop()方法和attr()類似，但是HTML5規定有一種屬性在DOM節點中可以沒有值，只有出現與不出現兩種，例如： attr()和prop()對於屬性checked處理有所不同： prop()返回值更合理一些。不過，用is()方法判斷更好： 類似的屬性還有selected，處理時最好用is(': ...
  • 使用原生js+canvas實現模擬心電圖
    從2015年2月轉行進入IT行業，到現在也有將近兩年的時間了，從最開始的java到現在的前端，前進的路上一直靠自己摸索，一路走到現在，前端大神是絕對談不上的，最多算一隻剛入門的菜鳥。 從最開始的懵懵懂懂，到現在學著開始寫github、寫博客，其實技術上沒有太多可寫的，畢竟自己也才剛剛入門，只能說是按 ...
  • 翻譯連載 |《你不知道的JS》姊妹篇 |《JavaScript 輕量級函數式編程》- 第 3 章：管理函數的輸入
    在第 2 章的 “函數輸入” 小節中，我們聊到了函數形參（parameters）和實參（arguments）的基本知識，實際上還瞭解到一些能簡化其使用方式的語法技巧，比如 `...` 操作符和解構（destructuring）。 在那個討論中，我建議儘可能設計單一形參的函數。但實際上你不能每次都做... ...
  • 翻譯連載 |《你不知道的JS》姊妹篇 |《JavaScript 輕量級函數式編程》- 第 2 章：函數基礎
    函數式編程**不是僅僅用 `function` 這個關鍵詞來編程**。如果真這麼簡單，那我這本書可以到此為止了！重點在於：函數**是**函數式編程的核心。這也是如何使用函數（function）才能使我們的代碼具有函數式（functional）的方法。 然而，你真的明白**函數**的含義嗎？ 在這... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類