expo native wechat

เอ็กซ์โปเนทีฟ Wechat

โมดูล Expo สำหรับรองรับ Wechat API บน Android และ iOS

สำหรับโปรเจ็กต์เนทีฟ Bare React

โปรดดูที่ Native Wechat

แรงจูงใจ

นักพัฒนาส่วนใหญ่ที่ใช้ React Native เพื่อสร้างแอปไม่มีทักษะการพัฒนาแบบเนทีฟ และยังไม่ต้องพูดถึงการเชื่อมต่อแอปของตนกับ WeChat

โดยเฉพาะอย่างยิ่ง WeChat OpenSDK เป็นเรื่องที่น่าปวดหัวเพราะเอกสารห่วยๆ ที่ API จำนวนมากไม่ชัดเจนและใช้งานง่าย เพื่อช่วยนักพัฒนาที่ใช้ React Native ฉันพยายามสร้างไลบรารีนี้ให้มากที่สุด และฉันหวังว่าคุณจะได้รับประโยชน์จากสิ่งนี้และหงุดหงิดกับ WeChat น้อยลง

ทำไม

• Native WeChat เป็นเวอร์ชันใหม่และห้องสมุดจำนวนมากเช่นนี้ไม่ได้รับการดูแลและตาม WeChat เวอร์ชันล่าสุดอีกต่อไป
• Native WeChat รองรับทั้งสถาปัตยกรรม React Native ทั้งแบบเดิมและใหม่
• Native WeChat คือ TurboModule ที่รองรับการโหลดแบบ Lazy Loading ซึ่งช่วยให้เริ่มต้นแอปได้เร็วขึ้น
• รองรับ TypeScript เพื่อสติปัญญาที่ดีขึ้นและข้อผิดพลาดในการพิมพ์ที่ง่ายต่อการตรวจสอบ
• Apis ทั้งหมดได้รับสัญญา

เริ่มต้นใช้งาน

การติดตั้ง

Expo SDK 51 และต่ำกว่า

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

Expo SDK 52 ขึ้นไป

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

การกำหนดค่า

เปิด app.json และเพิ่มข้อมูลต่อไปนี้:

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

ลงทะเบียน SDK

ก่อนที่จะเรียกใช้ API ใด ๆ การลงทะเบียน Native WeChat โดยการเรียกใช้ registerApp ถือเป็นสิ่งสำคัญ

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

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

เมื่อเรียกใช้ registerApp จะมี Listener คอยรับกิจกรรมจาก Wechat registerApp ส่งคืนฟังก์ชันเพื่อลบ Listener และจะไม่ได้รับกิจกรรมจาก Wechat

การเรียกใช้ API

ตอนนี้เป็นเวลาที่จะเรียกใช้ API ตัวอย่างเช่น เราจะส่งคำขอตรวจสอบสิทธิ์ไปยัง Wechat และรับรหัส คุณสามารถใช้ API ชื่อ sendAuthRequest ได้ที่นี่

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

API ส่วนใหญ่ใน Native WeChat ได้รับการสัญญาไว้ sendAuthRequest ก็เช่นกันซึ่งจะคืนสัญญา เมื่อผู้ใช้ยืนยันคำขอบน Wechat สัญญาจะได้รับการแก้ไขให้เป็นข้อมูลที่มีรหัส API ที่ได้รับสัญญาทั้งหมดจะส่งคืนประเภททั่วไปที่ชื่อว่า NativeWechatResponse

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

สนับสนุน

หากคุณมีปัญหาในการใช้ห้องสมุดนี้ อย่าลังเลที่จะเปิดปัญหา ฉันพร้อมให้ความช่วยเหลือเสมอ