react-native——微信登录、分享、支付

px
6,083 阅读3分钟

-------android篇

推荐使用react-native-wechat库，githup地址：github.com/yorkie/reac… 登录，分享，收藏（v1.9.9+） 和支付的功能，适合iOS/Android 双平台使用。

1.首先你需要一个微信开发者的账号，并且已认证。
微信开发平台去注册账号并且创建一个移动应用。(地址:open.weixin.qq.com)，
注意：在你创建移动应用的时候，Android应用下方的签名需要与你测试的app一致，如果你不知道。可以在微信开发官网上下载签名生成工具来查看app的签名。

在你的模拟器或者真机上安装下载签名工具之后，打开在搜索栏里面搜索你app的包名就可以查看签名啦！
2.安装配置react-native-wechat

// npm安装

npm install react-native-wechat --save

// yarn 安装

yarn add react-native-wechat

Android配置
在android/settings.gradle文件下添加以下代码：

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

在android/app/build.gradle的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 （这里是你的包名）.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();
  }
}

在该文件夹内创建 WXPayEntryActivity.java文件，用于微信支付

WXPayEntryActivity.java代码

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

配置完成，可以运行项目调用api来测试啦！！
API

registerApp(appid) ：注册APP
registerAppWithDescription(appid, appdesc) ： 注册APP（仅支持iOS）
isWXAppInstalled() ：检查微信是否安装
isWXAppSupportApi()
getApiVersion() ：获得微信SDK的版本
openWXApp() ：打开微信APP
sendAuthRequest([scope[, state]]) ：发送微信登录授权
shareToTimeline(data) ： 分享到朋友圈
shareToSession(data) ：分享到朋友
pay(data) ：调用微信支付
addListener(eventType, listener[, context]) ：监听状态
once(eventType, listener[, context]) ：监听状态
removeAllListeners() ：移除所有监听

有可能会遇到的问题
在开发环境中运行正常，但是在打包的时候会有这个错误

这个错误原本不是rn版本的问题，原因是RN将Android SDK的版本更新了，这与大多第三方使用了原生代码的插件不兼容了，因为第三方更新不及时，SDK还是旧的版本。
这个时候需要找到文件： node_modules / react-native-wechat / android / build.gradle 并打开，
然后再打开项目根目录下面的 android / build.gradle 或者 android / app / build.gradle。
修改react-native-wechat下面的build.gradle文件中的这几处地方
上面那一处需要 对比刚刚打开的另一个build.gradle文件的参数来改。
下面那一处需要 把 compile 改为 implementation。

然后重新打包即可！！！
第一次发，文章格式有点乱，请谅解!

avatar
文章
阅读
粉丝