expo native wechat

Expo Native Wechat

Ein Expo-Modul zur Unterstützung von Wechat-APIs auf Android und iOS

Für Bare React Native-Projekt

Bitte beziehen Sie sich auf Native Wechat

Motivation

Die meisten Entwickler, die React Native zum Erstellen von Apps verwenden, verfügen nicht über native Entwicklungskenntnisse, ganz zu schweigen von der Verbindung ihrer Apps mit WeChat.

Vor allem WeChat OpenSDK ist aufgrund der beschissenen Dokumente, in denen viele APIs nicht klar und intuitiv sind, eine Nervensäge. Um Entwicklern bei der Verwendung von React Native zu helfen, habe ich so viel wie möglich versucht, diese Bibliothek zu erstellen. Und ich hoffe, dass Sie davon profitieren und mit WeChat weniger frustriert sind.

Warum

• Natives WeChat ist neu und viele ähnliche Bibliotheken werden nicht mehr gepflegt und halten mit dem neuesten WeChat Schritt.
• Native WeChat unterstützt sowohl die alte als auch die neue React Native-Architektur.
• Native WeChat ist ein TurboModul, das Lazy Loading unterstützt und so einen schnelleren App-Start ermöglicht.
• Unterstützt TypeScript für bessere Intelligenz und einfachere Überprüfung von Tippfehlern.
• Alle Apis sind versprochen.

Erste Schritte

Installation

Expo SDK 51 und niedriger

npm install [email protected]
# or
yarn add [email protected]

Expo SDK 52 und höher

npm install [email protected]
# or
yarn add [email protected]

Konfiguration

Öffnen Sie app.json und fügen Sie die folgenden Informationen hinzu:

 {
    // Add your WeChat app ID
    "scheme" : [ "wx123456nxabcdefg" ] ,
    "ios" : {
      // Add your iOS universal link
      // Example "applinks:(google.com)"
      "associatedDomains" : [ "applinks:(Universal Link Here)" ]
    } ,
    // Add Expo Native Wechat plugin
    "plugins" : [ "expo-native-wechat" ]
} 

Registrieren Sie das SDK

Vor dem Aufrufen von APIs ist die Registrierung von Native WeChat durch Aufrufen von registerApp unbedingt erforderlich.

 import { registerApp } from "expo-native-wechat" ;

useEffect ( ( ) => {
  return registerApp ( "wx964290141ebe9b7b" ) ;
} , [ ] ) ;

Beim Aufruf registerApp gibt es einen Listener, der Ereignisse von Wechat empfängt. registerApp gibt eine Funktion zum Entfernen des Listeners zurück und es werden keine Ereignisse von Wechat empfangen.

Aufrufende API

Jetzt ist es an der Zeit, die API aufzurufen. Beispielsweise senden wir eine Authentifizierungsanfrage an Wechat und erhalten den Code. Sie können hier die API namens sendAuthRequest verwenden.

 import { registerApp , sendAuthRequest } from "expo-native-wechat" ;
import { Button , Text } from "react-native" ;
import { verifyWechatCode } from "@/api/auth/wechat" ;

useEffect ( ( ) => {
  registerApp ( "wx964290141ebe9b7b" ) ;
} , [ ] ) ;

const onButtonClicked = async ( ) => {
  const {
    data : { code } ,
  } = await sendAuthRequest ( ) ;

  await verifyWechatCode ( code ) ;
} ;

return (
  < Button onClick = { onButtonClicked } >
    < Text > Send Auth Request </ Text >
  </ Button >
) ;

Die meisten APIs in Native WeChat sind versprochen. Dies gilt auch für sendAuthRequest , das ein Versprechen zurückgibt. Wenn der Benutzer die Anfrage auf Wechat bestätigt, wird das Versprechen in Daten mit einem Code umgewandelt. Alle versprochenen APIs geben einen generischen Typ namens NativeWechatResponse zurück.

 export type NativeWechatResponse < T = Record < string , unknown > > = {
  type : string ;
  errorCode : number ;
  errorStr : string | null ;
  data : T ;
} ;

Unterstützung

Wenn Sie Probleme bei der Verwendung dieser Bibliothek haben, zögern Sie nicht, eine Ausgabe zu eröffnen. Ich bin immer hier, um zu helfen.