react-native组件(7)--(react-native

react-native-wechat 具有微信 登录，分享，收藏（v1.9.9+） 和支付的功能，适合iOS/Android 双平台使用。这里主要介绍支付功能

安装 react-native-wechat

npm install react-native-wechat --save

配置 react-native-wechat

自动配置执行以下命令：
react-native link 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部分添加以下代码：

dependencies {
  compile project(':RCTWeChat')    // Add this line only.
}

在MainActivity.java或者MainApplication.java文件中添加以下代码：

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

/**
 * A list of packages used by the app. If the app uses additional views
 * or modules besides the default ones, add more packages here.
 */
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(), 
    new WeChatPackage()        // Add this line
  );
}

以上这些安卓的配置link一下都会自动添加

在应用程序包中创建一个名为'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.** {
   *;
}

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() ：移除所有监听

在react中写支付

import *as wechat from 'react-native-wechat' //导入
然后在合适的地方注册微信(只需注册一次就行)
wechat.registerApp('你的微信AppId');
接下来就支付了
服务器请求就不写了 主要介绍调起微信的地

try {
  let result = await WeChat.pay(
    {
      partnerId: '', // 商家向财付通申请的商家id
      prepayId: '', // 预支付订单
      nonceStr: '', // 随机串，防重发
      timeStamp: '', // 时间戳，防重发
      package: '', // 商家根据财付通文档填写的数据和签名
      sign: '' // 商家根据微信开放平台文档对数据做的签名
    }
  );
  result.then(function success() {
                console.log('支付成功');
            }, function fail() {
                console.log("支付失败");
                
            });
} catch (error) {
  console.log('Pay for failure!');
}

await是es7的异步方法，不加也没事
pay方法返回的是一个Promise，那Promise是个什么玩意呢，Promise是JavaScript语法，不熟的可以百度下。
写到这支付就完成了