@yyyyu/react-native-wechat

react-native-wechat

安装

yarn add @yyyyu/react-native-wechat

or

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

配置

ios

1. 自动配置(推荐)

react-native link @yyyyu/react-native-wechat

如果项目使用 Pods 管理依赖需要在 Podfile 中添加

pod 'React', :path => '../node_modules/react-native', :subspecs => ['Dependency']

2. 手动配置

• 使用 Xcode 打开项目，在项目依赖目录(Libraries)下添加 node_modules 中的 @yyyyu/react-native-wechat 项目
• 在 Linked Frameworks and Libraries 添加 libRNWechat.a

额外配置 微信官方文档参考

• 手动配置和非 Pods 管理依赖情况需要在 Linked Frameworks and Libraries 添加 libsqlite3.0 (方法同上)

• 在 AppDelegate.m 文件中添加下列代码

  #import <React/RCTLinkingManager.h>
  
  - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  {
    return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
  }
  

  

• 在 Info.plist 文件中添加 URL Schemes

  • identifier -> weixin
  • URL Schemes -> 你的 appId

• ​在 Info.plist 文件添加 LSApplicationQueriesSchemes 字段，值类型为 Array，添加字符串子元素 weixin

android

1. 自动配置(如果 IOS 已经运行过，不需要重复运行)

react-native link @yyyyu/react-native-wechat

2. 手动配置

• 在 android/settings.gradle 文件中添加

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

• 在 android/app/build.gradle 文件中依赖部分添加

  dependencies {
      // other dependencies
      compile project(':react-native-wechat')
  }
  

• 在 MainApplication.java 文件中添加

  import com.rnlib.wechat.RNWechatPackage;
  
  @Override
  protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          // other packages
          new RNWechatPackage()
      );
  }
  

额外配置 微信官方文档参考

• 在 MainActivity.java 文件中添加下列代码，标识出当前状态，在微信唤起应用时需要做不同处理

  public class MainActivity extends ReactActivity {
      public static boolean isActivityCreated;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          isActivityCreated = true;
      }
  
      @Override
      protected void onDestroy() {
          super.onDestroy();
          isActivityCreated = false;
      }
  }
  

  

• 在应用包名下创建 wxapi 这个包，并新建 WXEntryActivity 类(这里要严格按照这种形式创建，否则无法接收到微信的应答)

  package 包名.wxapi;
  
  import android.app.Activity;
  import android.content.Intent;
  import android.os.Bundle;
  
  import com.rnlib.wechat.RNWechatModule;
  
  import 包名.MainActivity;
  
  public class WXEntryActivity extends Activity {
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          if (MainActivity.isActivityCreated) {
              RNWechatModule.handleIntent(this.getIntent());
          } else {
            // 如果应用未在后台启动，就打开应用
              Intent intent = new Intent(getApplicationContext(), MainActivity.class);
              intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
              startActivity(intent);
          }
  
          finish();
      }
  }
  

  

• 如果需要使用微信支付功能，在 wxapi 这个包下新建 WXPayEntryActivity 类(注意此处类名和上面不同)

  package 包名.wxapi;
  
  import android.app.Activity;
  import android.os.Bundle;
  
  import com.rnlib.wechat.RNWechatModule;
  
  public class WXPayEntryActivity extends Activity {
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          RNWechatModule.handleIntent(this.getIntent());
  
          finish();
      }
  }
  

• 在 AndroidManifest.xml 中注册上述 activity

  <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>
  

  

• 应用一定要签名才能正常调用接口，开发时也需要签名

  # 微信开放平台登记的就是 keystore 的签名，使用
  
  keytool -v -list -keystore 'you keystore' | grep MD5
  
  # 得到 XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX
  

  在浏览器 console 格式化一下填到微信开放平台上
  
  'XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX:XX'.replace(/:/g, '').toLowerCase()
  

  

JS API

import wechat from '@yyyyu/react-native-wechat'

wechat.registerApp({ appId: 'appId' })
  .then(res => { console.log(res) })
  .catch(err => { console.error(err) })

参数说明

• 参数注释带有 optional 字样为可选参数，括号内为默认值，e.g. optional('default')
• iosOnly androidOnly 表示只有在相应平台才会生效
• 发送场景类型有 session (会话、聊天) timeline (朋友圈) favorite (收藏)，默认 session
• 小程序类型有 test (测试版) preview (体验版) release (正式版)，默认 test
• 图片、缩略图以下 4 种方式均可
  • local 资源 e.g. require('image.png')
  • base64 e.g. data:image/png;base64,...
  • 原生 path uri 路径字符串 (第三方库 react-native-camera、react-native-image-picker 等返回值)
  • 网络 uri e.g. https://reactjs.org/logo-og.png
• 微信 SDK 限制: 标题文字大小不能超过 512B、描述文字大小不能超过 1KB、缩略图大小不能超过 32KB, 超过限制报错 RequestFailed

返回值说明

• 错误代码

  import { ErrCode } from '@yyyyu/react-native-wechat'
  
  console.log(ErrCode)
  
  {
    // 微信 sdk 返回错误类型
    Success: 0,        // 成功
    Common: -1,        // 普通错误
    UserCancel: -2,    // 点击取消返回
    SentFail: -3,      // 发送失败
    AuthDeny: -4,      // 授权失败
    Unsupport: -5,     // 不支持
    Ban: -6,           // 禁止(签名信息不正确时会出现这个错误) androidOnly
    // 自定义错误类型
    ActiveSuccess: 1,  // 发送请求后通过系统唤起(任务列表选择唤起)，无法判断成功失败
    RequestFailed: -7, // 请求失败
    UnRegisteApi: -8,  // 未注册接口
    UnInstall: -9,     // 未安装微信
    UnSupportApi: -10, // 不支持 Api
    Unknow: -99        // 未知错误
  }
  

• 抛出错误处理方式

  import { WechatError } from '@yyyyu/react-native-wechat'
  
  try {
    const res = await wechat.sendText({ text: 'example' })
    console.log(res)
  } catch (e) {
    if (e instanceof WechatError) {
        const { errCode, errMsg } = e
        console.error(errCode, errMsg)
    }
  }
  

registerApp 注册微信 api

// @return Boolean
wechat.registerApp({
  appId: 'you app id', // 微信平台注册应用后得到的 appId
  isDebug: false,      // optional(false)
})

isWXAppInstalled 检测是否安装微信

// @return Boolean
wechat.isWXAppInstalled()

isWXAppSupportApi 检测当前版本微信是否支持 Api

// @return Boolean
wechat.isWXAppSupportApi()

getWXAppInstallUrl 获取微信 iTunes 的安装地址 iosOnly

// @return String
wechat.getWXAppInstallUrl()

openWXApp 打开微信(需要先注册 api 才可以调用)

wechat.openWXApp()

launchMiniProgram 打开小程序(安卓需要先注册 api 才可以调用)

wechat.launchMiniProgram({
  username: 'you username', // 原始 id，微信开放平台注册小程序处获取
  path: '/path1/path2', // 小程序路由地址
  type: 'test' // 小程序类型 optional('release')
})

sendAuthRequest OAuth2 微信登录

wechat.sendAuthRequest({
  state: 'state' // 返回值会包含相同的数据用于验证请求 optional('')
})

sendText 发送文字

wechat.sendText({
  text: 'text', // 用于发送的文字
  scene: 'session' // 发送场景 optional('session')
})

sendImage 发送图片

wechat.sendImage({
  image: require('path/image.png'), // 用于发送的图片
  scene: 'session' // 发送场景 optional('session')
})

sendMusic 发送音乐

wechat.sendMusic({
  music: 'https://music.com/music.html', // 音乐地址
  data: 'https://music.com/data', // 音乐数据地址
  title: 'title', // 标题
  desc: 'description', // 描述
  thumb: require('path/thumb.png'), // 缩略图
  scene: 'session' // 发送场景 optional('session')
})

sendVideo 发送视频

wechat.sendVideo({
  video: 'https://video.com/video', // 视频地址
  title: 'title', // 标题
  desc: 'description', // 描述
  thumb: require('path/thumb.png'), // 缩略图
  scene: 'session' // 发送场景 optional('session')
})

sendLink 发送链接

wechat.sendLink({
  link: 'https://link.com/', // 链接地址
  title: 'title', // 标题
  desc: 'description', // 描述
  thumb: require('path/thumb.png'), // 缩略图
  scene: 'session' // 发送场景 optional('session')
})

sendMiniProgram 发送小程序

wechat.sendMiniProgram({
  username: 'you username', // 原始 id，微信开放平台注册小程序处获取
  path: '/path1/path2', // 小程序路由地址
  title: 'title', // 标题
  desc: 'description', // 描述
  hdThumb: require('path/thumb.png'), // 缩略图
  link: 'https://www.link.com/', // 兼容旧版本链接，不支持小程序的微信版本会以此方式打开
  thumb: require('path/thumb.png'), // 兼容旧版本缩略图，不支持小程序的微信版本会看到此缩略图
  type: 'test' // 分享小程序类型 optional('release')
})

pay 支付

wechat.pay({
  appId: 'you appId', // appId androidOnly 安卓 sdk 就是这样
  partnerId: 'you partnerId', // 商家 id
  prepayId: 'you prepayId', // 预支付订单 id
  nonceStr: 'nonceStr', // 随机串
  timestamp: 'timestamp', // 时间戳
  packageSign: 'you packageSign', // 财付通签名
  sign: 'you sign', // 微信开放平台签名
})