README

@react-native-hero/wechat

封装微信 SDK，支持 微信登录、微信支付、微信分享。

Getting started

Install the library using either Yarn:

yarn add @react-native-hero/wechat

or npm:

npm install --save @react-native-hero/wechat

Link

React Native v0.60+

For iOS, use cocoapods to link the package.

run the following command:

$ cd ios && pod install

For android, the package will be linked automatically on build.

React Native <= 0.59

run the following command to link the package:

$ react-native link @react-native-hero/wechat

Setup

iOS

在微信开放平台获取 appId，并配置 universalLink。

在 Xcode 中，选择你的工程设置项，选中 TARGETS 一栏，在 Info 标签栏的 URL Types 添加 URL Scheme 为你所注册的 appId。

在 Xcode 中，选择你的工程设置项，选中 TARGETS 一栏，在 Info 标签栏的 LSApplicationQueriesSchemes 添加 weixin 和 weixinULAPI。

接下来，配置 universalLink，这有点麻烦。

首先在苹果开发者帐号里获取 Team ID，然后生成一份如下格式的 json：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID":"<team id>.<bundle id>",
        "paths": ["*"]
      }
    ]
  }
}

举个例子，如果你的 Team ID 是 N123，Bundle ID 是 com.abd.prod，那么 appID 应该是 N123.com.abd.prod。

准备好 json 之后，确保通过 https://www.abc.com/apple-app-site-association 能打开这份 json。

到此服务器的配置完成，接下来配置 Xcode，首先打开苹果 Certificates, Identifiers & Profiles，选中 Identifiers 菜单，再选中你要使用的 Identifier，确保它勾选了 Associated Domains 项，如下：

然后回到主菜单，选中 Profiles 菜单，确保你要使用的 Profile 包含了 Associated Domains，如果当前还未包含，则点击编辑，保存，然后重新下载一个，并导入 Xcode。

在 Xcode 中，选择你的工程设置项，选中 TARGETS 一栏，在 Signing & Capabilities 标签栏点击 + Capability，添加 Associated Domains，并填入你的 universalLink，格式是 applinks:<domain name>，注意域名不要包含 https，如下：

最后，修改 AppDelegate.m：

// 导入库
#import <RNTWechat.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [RNTWechat init:^(NSString *url, void (^ onComplete)(UIImage *)) {

    // 加载网络图片
    // 加载成功后调用 onComplete

  }];
}

// 添加此方法
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
            options:(NSDictionary<NSString*, id> *)options {
  return [RNTWechat handleOpenURL:application openURL:url options:options];
}

// 添加此方法
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void(^)(NSArray<id<UIUserActivityRestoring>> * __nullable restorableObjects))restorationHandler {
  return [RNTWechat handleOpenUniversalLink:userActivity];
}

Android

在微信开放平台获取 appId。

在你的包名相应目录下新建一个 wechat 目录，并在该 wechat 目录下新增一个 NotifyActivity 类，该类继承自 Activity。

package your-package-name.wechat

import android.app.Activity
import android.os.Bundle
import com.github.reactnativehero.wechat.RNTWechatModule

class NotifyActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        RNTWechatModule.handleIntent(this.intent)
        finish()
    }

}

在 manifest 文件的 application 节点下新增一个 activity 和两个 activity-alias，里面加上 exported 和 launchMode 属性，其中 exported 设置为 true， launchMode 设置为 singleTask：

<activity
    android:name=".wechat.NotifyActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.Translucent.NoTitleBar"
    android:exported="true"
    android:launchMode="singleTask" />

<activity-alias
    android:name="${applicationId}.wxapi.WXEntryActivity"
    android:exported="true"
    android:targetActivity=".wechat.NotifyActivity" />

<!-- 不要微信支付可以删掉下面这个 -->
<activity-alias
    android:name="${applicationId}.wxapi.WXPayEntryActivity"
    android:exported="true"
    android:targetActivity=".wechat.NotifyActivity" />

最后，在 MainApplication 的 onCreate 方法进行初始化：

override fun onCreate() {

   RNTWechatModule.init { url, onComplete ->

      // 加载网络图片
      // 加载成功后调用 onComplete

  }

}

Usage

import {
  SCOPE,
  SCENE,
  MP_TYPE,
  init,
  sendAuthRequest,
  open,
  openMiniProgram,
  pay,
  shareText,
  shareImage,
  shareAudio,
  shareVideo,
  sharePage,
  shareMiniProgram,
} from '@react-native-hero/wechat'

// 必须先调用初始化方法，才能调用后面的方法
init({
  appId: '微信 app id',
  universalLink: 'ios 的 universalLink，注意包含 https://'
})

// 微信登录
sendAuthRequest({
  scope: SCOPE.USER_INFO,
})
.then(response => {
  response.data.code
})
.catch(() => {
  // 登录失败
})

// 打开微信
open()

// 打开微信小程序
openMiniProgram({
  // 小程序的 userName
  // 获取方式：登录小程序管理后台-设置-基本设置-帐号信息
  mpName: '',
  // 小程序的页面路径
  mpPath: '',
  // 小程序的类型
  mpType: MP_TYPE.PROD,
})

// 打开微信网页
openWebview({
  url: 'https://baidu.com',
})

// 微信支付（一般透传后端传来的参数，不用管它是什么意思）
pay({
  partnerId: 'partnerId',
  prepayId: 'prepayId',
  nonceStr: 'nonceStr',
  timeStamp: 'timeStamp',
  package: 'package',
  sign: 'sign',
})
.then(response => {
  // 财付通返回给商家的信息（好像也没什么用...）
  response.data.returnKey
})
.catch(() => {
  // 支付失败
})

// 分享文本
shareText({
  text: 'xxxxx',
  // 通过 scene 控制分享到 会话、朋友圈、收藏
  scene: SCENE.SESSION,
})
.then(() => {
  // 分享成功
})
.catch(() => {
  // 分享失败
})

// 分享图片
shareImage({
  imageUrl: 'https://xxx',
  scene: SCENE.SESSION,
})

// 分享 base64 图片
// 前面的 data:image/png;base64, 可要可不要，随便外面怎么传
shareImage({
  imageBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA....',
  scene: SCENE.SESSION,
})

// 分享音频
shareAudio({
  // 音频网页地址
  pageUrl: 'https://xxx',
  // 音频地址
  audioUrl: 'https://xxx',
  // 缩略图地址
  thumbnailUrl: 'https://xxx',
  title: '',
  description: '',
  scene: SCENE.SESSION,
})

// 分享视频
shareVideo({
  // 视频地址
  videoUrl: 'https://xxx',
  // 缩略图地址
  thumbnailUrl: 'https://xxx',
  title: '',
  description: '',
  scene: SCENE.SESSION,
})

// 分享网页
sharePage({
  // 网页地址
  pageUrl: 'https://xxx',
  // 缩略图地址
  thumbnailUrl: 'https://xxx',
  title: '',
  description: '',
  scene: SCENE.SESSION,
})

// 分享小程序
shareMiniProgram({
  // 兼容低版本的网页链接
  pageUrl: 'https://xxx',
  // 缩略图地址
  thumbnailUrl: 'https://xxx',
  // 小程序的 userName
  // 获取方式：登录小程序管理后台-设置-基本设置-帐号信息
  mpName: '',
  // 小程序的页面路径
  mpPath: '',
  // 小程序的类型
  mpType: MP_TYPE.PROD,
  // 是否使用带 shareTicket 的分享
  withShareTicket: true,
  title: '',
  description: '',
  scene: SCENE.SESSION,
})

Usage no npm install needed!