1. 程式人生 > >react-native-wechat的android版本的安裝與使用

react-native-wechat的android版本的安裝與使用

本文前面給還未在ios下安裝過wechat外掛的同學們使用,如果已經在ios上使用過wechat的同學們一定要看最後的注意事項。

安裝外掛:

npm install react-native-wechat --save

在你的react-native的目錄裡:

在android/setting.gradle檔案最後新增程式碼:

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

android/app/build.gradle

中的dependencies中新增程式碼,如圖

compile project(':RCTWeChat')


android\app\src\main\java\com\專案名\MainApplication.java檔案中新增程式碼:

import com.theweflex.react.WeChatPackage;       // Add this line before public class MainActivity

在27行這裡新增

new WeChatPackage() 



android/app/src/main/java/com/你的專案名/裡面新建一個wxapi資料夾


再在wxapi裡面新建一個WXEntryActivity.java

的檔案

//注意第一行行改成你的  比如我的就是 com.excellents.wxapi
package com.xxx.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();  
  }  
}  

上述程式碼的第一行的 xxx 可以android\app\src\main\java\com\專案名\MainApplication.java檔案中的第一行找到,如圖的“excellents”:


可選)繼續建立一個名為“WXPayEntryActivity.java”的檔案,裡面的程式碼如下所示。 以便可以獲得微信支付許可權

package com.bigcat.wxapi; //注意這一行改成nide  
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();  
  }  
}  

在android\app\src\main裡面開啟AndroidManifest.xml檔案,貼上以下程式碼

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

開啟android\app裡面的proguard-rules.pro,在最後新增如下程式碼

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

最後可以使用以下程式碼測試該外掛能否使用

componentDidMount(){  
    wechat.registerApp('你的appid').then(function(){  
        return wechat.openWXApp()  
 })  

注意事項:

react-native開發我主要是在ios版本上開發,然後再來適配android版本的,所以我是先在ios上安裝過react-native-wechat並且使用過的,其中在安裝這個wechat外掛的時候

//npm 安裝
npm install react-native-wechat --save
//並且link了
react-native link react-native-wechat

所以,先在ios上安裝過wechat外掛的同志們你們如果想要安裝wechat在android上的話,按照上面的教程一步一步來,該加的檔案加了,到最後 react-native run-android你會發現報錯了


實際上它是由於你之前在ios上執行過link命令導致的,而如果你從未在ios上安裝過wechat外掛的話,當你首次在android上使用wechat外掛不受影響的時候你就放心大膽的按照以上教程來走就可以了。

解決辦法

在上面眾多配置項中,你會發現好幾個都是在程式碼裡新增RCTWechat的,如果你之前開發ios版本Wechat你會在你要新增程式碼的檔案裡看到還有一個react-native-wechat,這些就是你之前ios的時候link的,出來混總是要還的......... 所以在上文中涉及到讓你在檔案中新增RCTWechat,,,的,如果該檔案有react-native-wechat的話,這個RCTWechat程式碼就可以省了,如下圖,RCTWechat程式碼就不能加了,就需要遮蔽了。上面的react-native-wechat是link上的,不然就會報錯咯!!!