react-native 有關微信分享及支付

轉載自   https://www.jianshu.com/p/6a792118fae4

 

(一)前言

React Native開發使用到微信好友或者微信朋友圈分享功能，閒來沒事寫一下，需要的可以看下

(二)應用申請審覈

首先微信開發平臺去註冊賬號並且創建一個移動應用。(地址:https://open.weixin.qq.com)

 

將所必填的信息填寫完整，應用名稱以及中英文（英文是選填的）的信息，移動應用圖標分別爲28x28何108x108的png格式圖標。

繼續點擊下一步填寫iOS項目的bundle ID以及android項目的包名和應用簽名。請注意應用簽名獲取需要安裝一下獲取簽名信息的APK包，同時你的android應用也需要打包以後安裝在手機上面，這樣再去獲取。具體獲取方式見下面的圖

下載獲取第三方應用的簽名信息apk

 

 

下載安裝上面的簽名信息包apk,然後在上面輸入android項目的包名，點擊獲取簽名信息

android項目的包名路徑:android/app/build.gradle中的applicationId標籤數據。

 

 

 

把上面的簽名信息填寫到下面的網頁上面,點擊提交審覈即可。然後就是等待吧，官方說是7個工作日，不過一般也就是幾個小時就可以通過審覈了吧。

(三)安裝配置微信分享庫

官放項目地址:https://github.com/weflex/react-native-wechat 該庫不僅支持微信分享，還支持微信登錄，收藏以及微信支付的。但登錄，支付之類的功能需要開通開發者認證權限，需要300元一年。

3.1.進入根目錄安裝：
npm install react-native-wechat --save

3.2.Android版本安裝配置方法

在android/settings.gradle文件下添加以下代碼：

 

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

在android/app/build.gradle的dependencies部分添加以下代碼：

 

dependencies {
  compile project(':RCTWeChat')   
}

在MainActivity.java或者MainApplication.java（我是配置了在這個文件內）文件中添加以下代碼：

 

import com.theweflex.react.WeChatPackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
   ...
    new WeChatPackage()       
  );
}

如下圖所示：

 

創建名爲'wxapi'的文件夾，並在文件夾內創建WXEntryActivity.java，用於獲得微信的授權和分享權限。
WXEntryActivity.java代碼：

 

package your.package.wxapi;

import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;

public class WXEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatModule.handleIntent(getIntent());
    finish();
  }
}

創建名爲'wxapi'的文件夾，並在文件夾內創建WXPayEntryActivity.java，用於獲得微信的授權和支付權限。
WXPayEntryActivity.java代碼

 

package your.package.wxapi;

import android.app.Activity;
import android.os.Bundle;
import com.theweflex.react.WeChatModule;

public class WXPayEntryActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WeChatModule.handleIntent(getIntent());
    finish();
  }
}

在AndroidManifest.xml添加聲明

 

<manifest>
  <application>
    <activity
      android:name=".wxapi.WXEntryActivity"
      android:label="@string/app_name"
      android:exported="true"
    />
    <activity
      android:name=".wxapi.WXPayEntryActivity"
      android:label="@string/app_name"
      android:exported="true"
    />
  </application>
</manifest>

在proguard-rules.pro中添加(代碼爲混淆設置)：

 

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

3.3 ios配置

自動配置執行以下命令：
react-native link react-native-wechat
react-native-wechat ios dependency
本人不推薦自動配置，因爲會報以下錯誤：

接下來看手動配置方法：

1.點擊Libraries右側的ADD Files to

選擇如下內容：

 

2.在工程Build Phases ➜ Link Binary With Libraries中添加libRCTWeChat.a

 

3.在工程target的Build Phases->Link Binary with Libraries中加入下面庫文件：

 

 

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

4.在TARGETS 下項目名 -> info ,添加我們申請得到的微信 AppId填寫在 "URL type"的"URL Schema"處，ldentifier填寫爲：weixin

 

 

5.iOS9 以上，添加 微信白名單

 

6.在項目的AppDelegate.m添加以下代碼，啓動[LinkingIOS]

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                            sourceApplication:sourceApplication annotation:annotation];
}

接下來就是運用：

在組件內引入：
import * as WeChat from 'react-native-wechat'

並且在構造函數內添加你的appid：
WeChat.registerApp('你的appid');
如下圖：

 

然後就是點擊分享了：

先自定義一個組件（爲了複用，縮減代碼）：

 

class OButton extends Component {
    render() {
        return (
            <TouchableHighlight
                style={styles.button}
                underlayColor="#a5a5a5"
                onPress={this.props.onPress}>
                <Text style={styles.buttonText}>{this.props.text}</Text>
            </TouchableHighlight>
        );
    }
}

使用組件：

 

                <View style={{margin:20}}>
                    <Text style={styles.welcome}>
                        微信分享
                    </Text>
                    <OButton text='微信好友分享的文本'
                                  onPress={() => {
                                      WeChat.isWXAppInstalled()
                                          .then((isInstalled) => {
                                              if (isInstalled) {
                                                  WeChat.shareToSession({type: 'text', description: '測試微信好友分享的文本內容'})
                                                      .catch((error) => {
                                                          Alert.alert(error.message);
                                                      });
                                              } else {
                                                  Alert.alert('請安裝微信');
                                              }
                                          });
                                  }}
                    />
                    <OButton text='微信好友分享鏈接'
                                  onPress={() => {
                                      WeChat.isWXAppInstalled()
                                          .then((isInstalled) => {
                                              if (isInstalled) {
                                                  WeChat.shareToSession({
                                                      title:'微信好友測試的鏈接',
                                                      description: '分享的標題內容',
                                                      thumbImage: '分享的標題圖片',
                                                      type: 'news',
                                                      webpageUrl: '分享的鏈接'
                                                  })
                                                      .catch((error) => {
                                                          Alert.alert(error.message);
                                                      });
                                              } else {
                                                  Alert.alert('請安裝微信');
                                              }
                                          });
                                  }}
                    />
                    <OButton text='微信朋友圈分享的文本'
                                  onPress={() => {
                                      WeChat.isWXAppInstalled()
                                          .then((isInstalled) => {
                                              if (isInstalled) {
                                                  WeChat.shareToTimeline({type: 'text', description: '測試微信朋友圈分享的文本內容'})
                                                      .catch((error) => {
                                                          Alert.alert(error.message);
                                                      });
                                              } else {
                                                  Alert.alert('請安裝微信');
                                              }
                                          });
                                  }}
                    />
                    <OButton text='微信朋友圈分享的鏈接'
                                  onPress={() => {
                                      WeChat.isWXAppInstalled()
                                          .then((isInstalled) => {
                                              if (isInstalled) {
                                                  WeChat.shareToTimeline({
                                                      title:'分享的標題',
                                                      description: '分享的標題內容',
                                                      thumbImage: '分享的標題圖片',
                                                      type: 'news',
                                                      webpageUrl: '分享的鏈接'
                                                  })
                                                      .catch((error) => {
                                                          Alert.alert(error.message);
                                                      });
                                              } else {
                                                  Alert.alert('請安裝微信');
                                              }
                                          });
                                  }}
                    />

                 <OButton text='微信支付'
                                 onPress={() => {
                                      WeChat.isWXAppInstalled()
                                            .then((isInstalled) => {
                                                   if (isInstalled) {
                                                        WeChat.pay({
                                                            partnerId: 'xxxxxx',  // 商家向財付通申請的商家id
                                                            prepayId: 'xxxxxx',   // 預支付訂單
                                                            nonceStr:'xxxxxx',   // 隨機串，防重發
                                                            timeStamp: 'xxxxxxx'    ,  // 時間戳，防重發.
                                                            package: 'Sign=WXPay',    // 商家根據財付通文檔填寫的數據和簽名
                                                            sign: 'xxxxxxxxx'       // 商家根據微信開放平臺文檔對數據做的簽名
                                                            }).then((requestJson)=>{
                                                                      //支付成功回調                                           
                                                                      if (requestJson.errCode=="0"){
                                                                       //回調成功處理
                                                                      }
                                                                  }).catch((err)=>{
                                                                      Alert.alert('支付失敗')
                                                                  })
                                                    } else {
                                                        Alert.alert('請安裝微信');
                                                    }
                                             });
                                            
                                    }}
                         />
                </View>

最後再給大家說一個小bug,若是出現點擊微信分享閃退問題時，請檢查你app的簽名是否正確，因爲開發版和公佈版的簽名是不一致的，需要改成公佈版的，簽名獲取方式微信開放平臺有apk,也可以給我要。

如果還是閃退，終極大招！！！清除微信緩存就好了！！！親測有效！！！