expo native wechat

Expo Natif Wechat

Un module Expo pour prendre en charge les API Wechat sur Android et iOS

Pour le projet natif Bare React

Veuillez vous référer à Native Wechat

Motivation

La plupart des développeurs utilisant React Native pour créer des applications ne sont pas dotés de compétences en développement natives, sans parler de la connexion de leurs applications avec WeChat.

Surtout, WeChat OpenSDK est quelque chose de pénible à cause de la documentation merdique où de nombreuses API ne sont pas claires et intuitives. Pour aider les développeurs utilisant React Native, j'ai essayé autant que possible de créer cette bibliothèque. Et j'espère que vous en bénéficierez et que vous serez moins frustré par WeChat.

Pourquoi

• Native WeChat est nouveau et de nombreuses bibliothèques comme celle-ci ne sont plus maintenues et ne suivent pas la dernière version de WeChat.
• Native WeChat prend en charge à la fois l'ancienne et la nouvelle architecture React Native.
• Native WeChat est un TurboModule qui prend en charge le chargement paresseux, permettant un démarrage plus rapide des applications.
• Prend en charge TypeScript pour une meilleure intelligence et des erreurs de frappe faciles à vérifier.
• Tous les Apis sont promis.

Commencer

Installation

Expo SDK 51 et versions antérieures

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

Expo SDK 52 et supérieur

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

Configuration

Ouvrez app.json et ajoutez les informations suivantes :

 {
    // 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" ]
} 

Enregistrer le SDK

Avant d’invoquer une API, il est essentiel d’enregistrer Native WeChat en appelant registerApp .

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

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

Lors de l'appel registerApp , il y aura un écouteur pour recevoir les événements de Wechat. registerApp renvoie une fonction pour supprimer l'écouteur et aucun événement ne sera reçu de Wechat.

Appel de l'API

Il est maintenant temps d'invoquer l'API. Par exemple, nous enverrons une demande d'authentification à Wechat et recevrons le code. Vous pouvez utiliser l'API nommée sendAuthRequest ici.

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

La plupart des API de Native WeChat sont promises. Il en va de même pour sendAuthRequest qui renverra une promesse. Lorsque l'utilisateur confirme la demande sur Wechat, la promesse est résolue en données avec un code. Toutes les API promises renvoient un type générique nommé NativeWechatResponse .

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

Soutien

Si vous rencontrez des difficultés pour utiliser cette bibliothèque, n'hésitez pas à ouvrir un ticket. Je suis toujours là pour vous aider.