本文前面給還未在ios下安裝過wechat插件的同學們使用,如果已經在ios上使用過wechat的同學們一定要看最後的注意事項。
瞭解ios版本的react-native-wechat的可以點擊 https://www.jianshu.com/p/3f424cccb888;
安裝插件:
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上的,不然就會報錯咯!!!