Skip to content

React Native 包使用微信分享、登录、收藏、支付等功能,支持Android/iOS。

Notifications You must be signed in to change notification settings

uiwjs/react-native-wechat

Folders and files

NameName
Last commit message
Last commit date
Aug 1, 2020
Aug 5, 2020
Aug 5, 2020
Aug 5, 2020
Jul 31, 2020
Aug 5, 2020
Aug 5, 2020
Aug 5, 2020
Aug 9, 2020
Aug 1, 2020
Aug 1, 2020

Repository files navigation



@uiw/react-native-wechat

NPM Version David

React Native 包使用微信分享、登录、收藏、支付等功能,支持Android/iOS。完整实例 Example | 完整的接口文档

注意事项

iOS: 微信授权登录 Universal Link(通用链接)

Universal Link(通用链接)是苹果在 iOS9 推出的,一种能够方便的通过传统 HTTPS 链接来启动 APP 的功能,可以使用相同的网址打开网址和 APP。
看起来就是一条普通的 https 链接,当然是我们在该链接域名根目录配置过的一个链接,也可以在该链接中放置对应的H5页面。当用户的点击该链接,只要手机中安装了支持该链接的 APP 就会直接进入到 APP 中。如果没有安装APP则会跳转到 Safari 浏览器中,展示 H5 页面。对用户来说则是一个无缝跳转的过程。

创建一个名为 apple-app-site-association 的文件,如下:

{
  "applinks": {
    "details": [
      {
        "appID": "968DSZ49MT.com.uiwjs.react.example.wechat",
        "paths": ["/react-native-wechat/*"]
      }
    ]
  }
}

说明: 字段 appID 中的 968DSZ49MT 表示苹果账号的团队 IDcom.uiwjs.react.example.wechat 表示项目的 BundleID

<Application Identifier Prefix>.<Bundle Identifier>

上传该文件到你的域名所对应的根目录xxx目录下,apple-app-site-association 文件不需要扩展名。

注意: 苹果提供了一个网页来验证我们编写的这个 apple-app-site-association 是否合法有效。

https://<fully qualified domain>/.well-known/apple-app-site-association
根目录
https://uiwjs.github.io/apple-app-site-association

xxx目录
https://uiwjs.github.io/react-native-wechat/apple-app-site-association

打开 Associated Domains 开关,将 Universal Links 域名加到配置上,如果 URL 地址是 https://uiwjs.github.io/apple-app-site-association,那么, Associated Domains 中填写 applinks: uiwjs.github.io

登录苹果开发者后台,在设置证书的页面找到 Identifiers 里,在对应的 BundleId 下勾选 Associated Domains

iOS: -canOpenURL: failed for URL: "weixin://".
-canOpenURL: failed for URL: "weixin://" - error: "The operation couldn’t be completed. (OSStatus error -10814.)"

设置 URL Schemes 并列为白名单,在 ios/<应用名称>/Info.plist 中添加

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>weixin</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>wx500b695a47bd364b</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>weixin</string>
  <string>weixinULAPI</string>
</array>
iOS: RCTBridge required dispatch_sync to load RCTDevLoadingView.

错误内容: RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

错误解决方案:可以通过下面代码可以解决,事实上我通过关闭 debug 浏览器页面就没有错误消息了。错误原因可能是你打开了 debug 浏览器,但是你模拟器并没有开启 debug 模式。

+ #if RCT_DEV
+ #import <React/RCTDevLoadingView.h>
+ #endif

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

+  #if RCT_DEV
+    [bridge moduleForClass:[RCTDevLoadingView class]];
+  #endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"example" initialProperties:nil];

安装依赖

yarn add @uiw/react-native-alipay
# react-native version >= 0.60+
$ cd ios && pod install

使用

import Wechat from '@uiw/react-native-wechat';

开发

cd example   # 进入实例 example 工程,根目录不需要安装,会引发错误
yarn install # 安装依赖

cd ios     # 进入 example/ios 目录安装依赖
pod instll # 安装依赖

其它

当前工程基于 @brodybits/create-react-native-module 初始化。

npx create-react-native-module --package-identifier com.uiwjs.react.wechat --object-class-name RNWechat --generate-example Wechat --example-react-native-version 0.63.2 --module-name @uiw/react-native-wechat --github-account uiwjs --author-name "Kenny Wong" --author-email "wowohoo@qq.com"

相关连接