React Native 實現微信綁定，微信登陸

版本

react-native 0.61.2
react-native-wechat 1.9.12
複製代碼

安裝配置

• react-native-wechat 安裝

yarn add react-native-wechat
// rn 版本 < 0.60
react-native link react-native-wechat
// rn 版本 > 0.60
cd /ios/
pod install
複製代碼

Android 配置

• 在/android/app/src包名目錄下建立wxapi包，建立WXEntryActivity.java和WXPayEntryActivity.java

  

// WXEntryActivity.java
package com.xxx.wxapi;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

import com.theweflex.react.WeChatModule;
import com.wechatusageexample.MainActivity;

public class WXEntryActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (MainActivity.isActivityCreated) {
            WeChatModule.handleIntent(this.getIntent());
        } else {
            // 若是應用未在後臺啓動，就打開應用
            Intent intent = new Intent(getApplicationContext(), MainActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
        }

        finish();
    }
}
複製代碼

// WXPayEntryActivity.java
package com.xxx.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

  

<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" />
複製代碼

• 在proguard-rules.pro中添加混淆忽略代碼

-keep class com.tencent.mm.sdk.** {
  *;
}
複製代碼

iOS配置

• link 庫

  

#Build Phases ➜ Link Binary With Libraries
SystemConfiguration.framework
CoreTelephony.framework
libsqlite3.0
libc++
libz
複製代碼

• 在AppDelegate.m中添加代碼

#import <React/RCTLinkingManager.h>

#pragma mark - Handle URL

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
   sourceApplication:sourceApplication annotation:annotation];
}

// ios 9.0+
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
    options:(NSDictionary<NSString*, id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}
複製代碼

• 配置白名單

  在 ios/Info.plist 添加

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>wechat</string>
</array>
複製代碼

• 配置URL Schema

打開Xcode 選擇Targets > info，配置URL Types

• 配置Universal Link（ios須要配置Universal Link，才能鏈接打開app）

  

  • 建立一個文件名是apple-app-site-association的文件, 這個文件須要上傳到本身服務器，如下面舉例子，這裏的appid是prefix + bundle id, path是下載路徑，好比本身的服務器網站域名是，xx.xxx.com則訪問https://xx.xxx.com/download能夠下載到apple-app-site-association文件就算ok, 而後打開打開Xcode 選擇Targets > Capabilities，打開Assoication Domains選項，添加一項：applinks:xxx.xxx.com (本身服務器域名)

  {
      "applinks": {
          "apps": [],
          "details": [
              {
                  "appID": "8NL2H3YTL7.org.reactjs.native.example.dummpAppJacky",
                  "paths": [ "/download" ]
              }
          ] 
      }
  }
  複製代碼

調用

• 微信參數說明

const wxAppId = ""; // 微信開放平臺註冊的app id
const wxAppSecret = ""; // 微信開放平臺註冊獲得的app secret
const wxMerchantId = ""; // 微信商戶ID
const wxTransSecret = ""; // 商戶api祕鑰
複製代碼

• 初始化

import * as WeChat from 'react-native-wechat';

WeChat.registerApp(wxAppId);
複製代碼

• 登陸

wechatLogin() {
    if (!this.state.isWXInstalled) {
      this.showAlert('微信未安裝');
      return;
    }
    WeChat.sendAuthRequest('snsapi_userinfo', 'wechat_sdk_demo').then((response) => {
      this.getOpenId(response.code);
    }).catch((error) => {
      let errorCode = Number(error.code);
      if (errorCode === -2) {
        this.showAlert('已取消受權登陸'); // errorCode = -2 表示用戶主動取消的狀況，下同
      } else {
        this.showAlert('微信受權登陸失敗');
      }
    })
  }
  
  /// 獲取openId
  getOpenId(code) {
    this.progressHUD.show();
    let requestUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + wxAppId + "&secret=" + wxAppSecret + "&code=" + code + "&grant_type=authorization_code";
    fetch(requestUrl).then((response) => response.json()).then((json) => {
      console.log('獲取微信openid成功');
      console.log(json);
      this.getUnionId(json.access_token, json.openid);
    }).catch((error) => {
      this.progressHUD.hide();
      this.showAlert('微信受權登陸失敗');
    })
  }
  
  getUnionId(accessToken, openId) {
    let requestUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openId;
    fetch(requestUrl).then((response) => response.json()).then((json) => {
      console.log('獲取微信unionid成功');
      console.log(json);
      // TODO: 這裏openId和unionId都已經成功獲取了，調用用戶本身的接口傳遞openId或unionId登陸或註冊
      // put your login method here...
    }).catch((error) => {
      this.progressHUD.hide();
      this.showAlert('微信受權登陸失敗');
    })
  }
複製代碼

• 分享

// 分享到好友
  shareToFriend() {
    if (!this.state.isWXInstalled) {
      this.showAlert('微信未安裝');
      return;
    }
    WeChat.shareToSession({
      type:'news',
      webpageUrl:'https://www.baidu.com',
      title:'Test sharing',
      description:'This is a test'
    }).then((response) => {
      console.log(response);
      this.showAlert('分享成功');
    }).catch((error) => {
      let errorCode = Number(error.code);
      if (errorCode === -2) {
        this.showAlert('分享已取消');
      } else {
        this.showAlert('分享失敗');
      }
    })
  }
  
  // 分享到朋友圈
  shareToTimeline() {
    if (!this.state.isWXInstalled) {
      this.showAlert('微信未安裝');
      return;
    }
    WeChat.shareToTimeline({
      type:'news',
      webpageUrl:'https://www.baidu.com',
      title:'Test sharing',
      description:'This is a test'
    }).then((response) => {
      console.log(response);
      this.showAlert('分享成功');
      
    }).catch((error) => {
      let errorCode = Number(error.code);
      if (errorCode === -2) {
        this.showAlert('分享已取消');
      } else {
        this.showAlert('分享失敗');
      }
    })
  }
複製代碼

• 支付

// 支付
  wechatPay() {
    if (!this.state.isWXInstalled) {
      this.showAlert('微信未安裝');
      return;
    }
    /**************添加支付處理過程****************/
    
    // 第一步，獲取預訂單prepayId，生成預訂單最好讓作後臺接口的童鞋來完成，app端調用接口獲取預訂單
    let prepayId = ""; // 這裏預訂單是從接口獲取的，這裏簡寫僅作演示
    let tempTime = Date.parse(new Date());
    let timestamp = (tempTime/1000).toString();
    let nonce_str = MD5.hexMD5(timestamp);
  
    // 第二步，拼裝參數
    let params = {
      "appid": wxAppId,
      "noncestr": nonce_str,
      "package": "Sign=WXPay",
      "partnerid": wxMerchantId,
      "timestamp": timestamp,
      "prepayid": prepayId,
    };
    let paramsList = [];
    let sortedKeys = Object.keys(params).sort();
    for (let i = 0; i < sortedKeys.length; i++) {
      let keyValueCombo = sortedKeys[i] + "=" + params[sortedKeys[i]];
      paramsList.push(keyValueCombo);
    }
    let paramsString = paramsList.join('&');
    let finalString = paramsString + "&key=" + wxTransSecret;
    let encryptedStr = MD5.hexMD5(finalString).toUpperCase(); // MD5加密後轉爲大寫
  
    // 第三步，調起微信客戶端支付
    WeChat.pay({
      appId: wxAppId,
      partnerId: wxMerchantId,
      prepayId: prepayId,
      nonceStr: nonce_str,
      timeStamp: timestamp,
      package: 'Sign=WXPay',
      sign: encryptedStr
    }).then((response) => {
      console.log('支付成功');
      console.log(response);
      let errorCode = Number(response.errCode);
      if (errorCode === 0) {
        this.showAlert('支付成功');
        // TODO: 這裏處理支付成功後的業務邏輯，好比支付成功跳轉頁面、清空購物車。。。。
        // .....
      } else {
        this.showAlert(response.errStr);
      }
    }).catch((error) => {
      let errorCode = Number(error.code);
      if (errorCode === -2) {
        this.showAlert('已取消支付');
      } else {
        this.showAlert('支付失敗');
      }
    });
  }
複製代碼

參考

• react-native-wechat
• react-native-blog-examples