React Native之微信分享(iOS Android)

時間 2019-11-30

標籤 react native 微信分享 ios android 欄目 React 简体版

原文原文鏈接

React Native之微信分享(iOS Android)

在使用React Native開發項目的時候，基本都會使用到微信好友或者微信朋友圈分享功能吧，那麼今天我就帶你們實現如下RN微信好友以及朋友圈的分享功能。html

一,應用申請審覈

你們須要去微信開發平臺去註冊帳號而且建立一個移動應用。(地址:https://open.weixin.qq.com)，而後根據流程申請便可。可是須要注意的是Android須要獲取簽名信息：java

下載安裝上面的簽名信息包apk,而後在上面輸入android項目的包名，點擊獲取簽名信息便可。android項目的包名路徑:android/app/build.gradle中的applicationId標籤數據。node

二,Android安裝配置

react-native-wechat庫不只支持微信分享，還支持微信登陸，收藏以及微信支付的。可是登陸，支付之類的功能須要開通開發者認證權限，須要300元一年。react

2.1,npm install react-native-wechat --save

2.2,配置方法

1,在android/settings.gradle文件中添加以下代碼:android

1  include ':RCTWeChat'
2  project(':RCTWeChat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wechat/android')

2,在android/app/build.gradle文件中的dependencies標籤中添加模塊依賴:ios

1  ...
2   
3 dependencies {
4  
5    ...
6  
7    implementation project(':RCTWeChat')    // Add this line only.
8  
9 }

3,在MainActivity.java文件中添加以下代碼:c++

 1 import com.theweflex.react.WeChatPackage; // Add this line before public class MainActivity
 2 
 3   ...
 4 
 5 @Override
 6 protected List<ReactPackage> getPackages() {
 7     return Arrays.<ReactPackage>asList(
 8         new MainReactPackage()
 9         , new WeChatPackage()        // Add this line
10     );
11 }

以上是手動配置的方法，固然也可一鍵配置:npm link react-native-wechatweb

4,在android項目中建立wxapi包名,com目錄下建立wxapi，在該包名底下建立WXEntryActivity.java類，該類用於去微信獲取請求以及響應。sql

 1 package your.package.wxapi;
 2  
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5  
 6 import com.theweflex.react.WeChatModule;
 7  
 8 public class WXEntryActivity extends Activity{
 9     @Override
10     protected void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         WeChatModule.handleIntent(getIntent());
13         finish();
14     }
15 }

5,在AndroidManifest.xml文件中添加剛剛建立的Actiivty的配置npm

 1 <manifest>
 2   ...
 3   <application>
 4     ...
 5     <!-- 微信Activity -->
 6     <activity
 7       android:name=".wxapi.WXEntryActivity"
 8       android:label="@string/app_name"
 9       android:exported="true"
10       />
11   </application>
12 </manifest>

6,混淆設置,在proguard-rules.pro中添加以下代碼，固然若是不混淆就不安全啦

1 -keep class com.tencent.mm.sdk.** {
2    *;
3 }

三,ios安裝配置

1,在xcode中添加部分庫依賴(Link Binary With Libraries) 在沒有這些庫的狀況下:

SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz

2,選中Targets-info配置中URL Types中配置剛申請下來的appid

3,爲了iOS9.0的支持，在Targets-info中的Custom iOS Traget Properties標籤中添加LSApplicationQueriesSchemes字段，值分別爲wechat和weixin

4,接下來須要在APPDelete.m文件中作一下Linking的處理配置

1 #import <React/RCTLinkingManager.h>
2 ...
3 
4 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
5   sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
6 {
7   return [RCTLinkingManager application:application openURL:url
8                             sourceApplication:sourceApplication annotation:annotation];
9 }

四,react-native-wechat分享實例

上面咱們已經把基本安裝配置完成了，下面咱們經過實例來進行演示一下，主要演示分享到好友/朋友圈的連接以及圖片，關於更多的分享實例例如文件，圖片，視頻，語言,文本等等能夠查看項目的說明文件便可。

分享實例步驟:

註冊應用
好友/朋友圈分享

Android測試應用須要打包測試

iOS版本直接測試便可,代碼和下面同樣

3.1,註冊應用

1 //應用註冊
2  WeChat.registerApp(appid);

3.2,好友/朋友圈分享

1,圖片分享

提到圖片分享在這兒就不得不講到屏幕截圖組件react-native-view-shot的簡單使用

 1 import * as WeChat from 'react-native-wechat';
 2 import ViewShot, { captureScreen, captureRef } from "react-native-view-shot";
 3 
 4 ...
 5 
 6 captureScreen({
 7                 format: "jpg",
 8                 quality: 0.8
 9             }).then(
10                 uri => {
11                     let Imageuri = (uri.toLowerCase()).includes('file://')?uri:'file://'+uri
12                     self.setState({ Imageuri: Imageuri })
13                 },
14                 error => console.log("Oops, snapshot failed==" + error)
15             );

分享給好友/羣聊

 1 sharetoFrends = () => {
 2         let self = this; 
 3         WeChat.isWXAppInstalled()
 4             .then((isInstalled) => {
 5                 if (isInstalled) {
 6                     WeChat.shareToSession({
 7                         type: 'imageFile',
 8                         title: '邀請好友',
 9                         description: '',
10                         imageUrl: self.state.Imageuri // require the prefix on both iOS and Android platform                          
11                     })
12                         .catch((error) => {
13                             console.log(JSON.stringify(error));
14                         });
15                 } else {
16                     Toast.show('您尚未安裝微信，請安裝微信以後再試');
17                 }
18             });
19     }

分享到朋友圈

 1 sharetoPyq = () => {
 2         let self = this;
 3         WeChat.isWXAppInstalled()
 4             .then((isInstalled) => {
 5                 if (isInstalled) {
 6                     WeChat.shareToTimeline({
 7                         type: 'imageFile',
 8                         title: '邀請好友',
 9                         description: '',
10                         imageUrl: self.state.Imageuri // require the prefix on both iOS and Android platform                          
11                     })
12                         .catch((error) => {
13                             console.log(JSON.stringify(error));
14                         });
15                 } else {
16                     Toast.show('您尚未安裝微信，請安裝微信以後再試');
17                 }
18             });
19 
20     }

2,圖文連接分享

分享給好友/羣聊

 1  // 分享到好友與羣聊
 2     sharetoFrends = () => {
 3         WeChat.isWXAppInstalled()
 4             .then((isInstalled) => {
 5                 if (isInstalled) {
 6                     WeChat.shareToSession({
 7                         title: 'React Native之TextInput的介紹與使用(富文本封裝與使用實例,經常使用輸入框封裝與使用實例)',
 8                         description: 'TextInput是一個容許用戶在應用中經過鍵盤輸入文本的基本組件。',
 9                        
10  thumbImage:'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
11                         type: 'news',
12                         webpageUrl: 'https://www.cnblogs.com/jackson-zhangjiang/p/9524842.html'
13                     })
14                         .catch((error) => {
15                             console.log(JSON.stringify(error));
16                         });
17                 } else {
18                     Toast.show('您尚未安裝微信，請安裝微信以後再試');
19                 }
20             });
21     }

分享到朋友圈

 1 // 分享到朋友圈
 2     sharetoPyq = () => {
 3         WeChat.isWXAppInstalled()
 4             .then((isInstalled) => {
 5                 if (isInstalled) {
 6                     WeChat.shareToTimeline({
 7                         title: 'React Native之FlatList的介紹與使用實例',
 8                         description: 'FlatList高性能的簡單列表組件',
 9                         thumbImage: http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg'',
10                         type: 'news',
11                         webpageUrl: 'https://www.cnblogs.com/jackson-zhangjiang/p/9523927.html'
12                     })
13                         .catch((error) => {
14                             console.log(JSON.stringify(error));
15                         });
16                 } else {
17                     Toast.show('您尚未安裝微信，請安裝微信以後再試');
18                 }
19             });
20 
21     }

監聽狀態：addListener(eventType, listener[, context])

 1 //監聽分享狀態
 2         // 'SendMessageToWX.Resp' 分享監聽字段
 3         // 'PayReq.Resp'          支付監聽字段
 4         // 'SendAuth.Resp'        登陸監聽字段
 5         wechat.addListener(
 6             'SendMessageToWX.Resp',
 7             (response) => {
 8                 if (parseInt(response.errCode) === 0) {
 9                     alert('分享成功');
10                 } else {
11                     alert('分享失敗');
12                 }
13             }
14         );

pay(data) ：微信支付

 1 const result = await WeChat.pay(
 2   {
 3     partnerId: '',  // 商家向財付通申請的商家id
 4     prepayId: '',   // 預支付訂單
 5     nonceStr: '',   // 隨機串，防重發
 6     timeStamp: '',  // 時間戳，防重發
 7     package: '',    // 商家根據財付通文檔填寫的數據和簽名
 8     sign: ''        // 商家根據微信開放平臺文檔對數據作的簽名
 9   }
10 );

五,react-native打開其餘app

1，經常使用URL Scheme

QQ: mqq://

微信: weixin://
新浪微博: weibo:// (sinaweibo://)
騰訊微博: tencentweibo://
淘寶: taobao://
支付寶: alipay://
美團: imeituan://
知乎: zhihu://
優酷: youku://

2,配置Scheme白名單（僅ios，Android平臺不須要）

3,Linking跳轉

 1 import { Linking } from 'react-native';
 2  
 3  
 4 // 二、跳轉代碼
 5 Linking.canOpenURL('weixin://').then(supported => { // weixin://  alipay://
 6      if (supported) {
 7         return Linking.openURL('weixin://');
 8      } else {
 9      }
10 });