react-native-wechat

安裝

• 終端運作

  npm install react-native-wechat --save

   添加依賴 

  react-native link

安卓

• 檢查配置
  • 在android/settings.gradle檔案中添加如下代碼:

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

    • 特别說明一下，

      include ':react-native-wechat'

      這是新版本中link後的寫法，官方文檔中

      include ':RCTWeChat'

      這種是老版本寫法，意思是一樣的，對于我們這種安卓小白來說，千萬不要傻到兩種都寫，這樣會報重複引包的錯誤
• 在android/app/build.gradle檔案中的dependencies标簽中添加子產品依賴

  //同樣注意react-native-wechat和:RCTWeChat寫一種就可以
  dependencies {
   ···
    compile project(':react-native-wechat')
  }
             

• 在MainActivity.java或者MainApplication.java檔案中添加以下代碼：

  import com.theweflex.react.WeChatPackage;      
  @Override
  protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(), 
    new WeChatPackage()        // Add this line
  );
  }                

• 在應用程式包中建立一個名為'wxapi'的包，并在其中建立一個名為'WXEntryActivity'的類。以便可以獲得微信的授權和分享權限。

  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”的類。 以便可以獲得微信支付權限。

  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.** {
   *;
  }
             

iOS

• 如果link不成功手動檢查下一下配置（第三方庫手動添加依賴的方法）
  • 将

    /node_modules/react-native-wechat/ios/RCTWeChat.xcodeproj

    拖入到xcode中的Libraries檔案夾中
  • 然後點選築工程項目檔案(原項目的.xcodeproj檔案的那個)，然後選擇

    Build Phases

    頁籤。然後将剛剛添加的庫中的Products檔案夾中的.a庫拖動到

    Link Binary With Libraries

    中
  • 在 

    TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths

     添加如下如路徑

    $(SRCROOT)/../node_modules/react-native-wechat/ios
               

• 添加依賴庫

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

• 選中

  Targets/info

  配置中

  URL Schema

  中配置剛申請下來的

  appid

• 為了

  iOS9.0

  的支援，添加 微信白名單，在

  Targets/info

  中的

  Custom iOS Traget Properties

  标簽中添加

  LSApplicationQueriesSchemes

  字段，值分别為

  wecha

  t和

  weixin

  ,也可以直接編輯

  info.plist

  檔案，添加源碼

  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>weixin</string>
    <string>wechat</string>
  </array>
             

• 在你項目的AppDelegate.m添加以下代碼，啟動[LinkingIOS]

  #import <React/RCTLinkingManager.h>
  -(BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  {
  //支付寶
  if([[sourceApplication substringToIndex:] isEqualToString:@"com.alipay"]){
    [AlipayModule handleCallback:url];
    return YES;
  }
  //微信
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation]; 
  }
             

JS方法

• registerApp(appid)

  注冊微信SDK

  • appid

    微信背景注冊的APPID
  • 建議在應用啟動時初始化，初始化之前無法使用此子產品的其他方法。WeChat子產品隻需要初始化一次

    import * as WeChat from 'react-native-wechat';
    componentDidMount (){
    wechat.registerApp('your appid')
    }
               

• isWXAppInstalled()

  檢查是否安裝微信

• isWXAppSupportApi()

  檢查是否支援微信開放接口

• getApiVersion()

  擷取微信SDK版本

• openWXApp()

  打開微信

• sendAuthRequest([scope[, state]])

  微信登入授權請求

  • scope

     應用授權作用域，如擷取使用者個人資訊則填寫

    snsapi_userinfo

  • state

    用于保持請求和回調的狀态，授權請求後原樣帶回給第三方。該參數可用于防止csrf攻擊（跨站請求僞造攻擊），建議第三方帶上該參數，可設定為簡單的随機數加session進行校驗

    let scope = 'snsapi_userinfo';
    let state = 'wechat_sdk_demo';
    wechat.sendAuthRequest(scope,state)
    .then(res=>{
    
    )
               

• shareToTimeline(data)

  分享朋友圈,

  shareToSession(data)

  分享好友

  WeChat.shareToTimeline({
    type: 'news',
    title: '标題',
    description: '描述',
    thumbImage: '圖檔'
    webpageUrl：'連結'
  });                

• pay(data)

  微信支付

  WeChat.pay({
       appId: '',  //應用id
       partnerId: '', // 商家向财付通申請的商家id
       prepayId: '', // 預支付訂單
       nonceStr: '', // 随機串，防重發
      timeStamp: '', // 時間戳，防重發
       package: '', // 商家根據财付通文檔填寫的資料和簽名
       sign: '',  // 商家根據微信開放平台文檔對資料做的簽名
  }).then((requestJson)=>{
       //支付成功回調
       console.log(requestJson);
  }).catch((err)=>{
       console.log(err);
  })
             

• addListener(eventType, listener[, context])

  監聽

  //監聽分享狀态
      wechat.addListener(
          'SendMessageToWX.Resp',
          (response) => {
              if (parseInt(response.errCode) === ) {
                  toastShort('分享成功');
              } else {
                  toastShort('分享失敗');
              }
          }
      );
             

• once(eventType, listener[, context])

   和

  addListener

  類似，但是被調用一次後會被移除

• removeAllListeners()

  移除所有監聽事件