JKTalk API 串接範例

本頁面主要提供 JKTalk 相關 API 的使用方式及注意事項。

請先依照 範例 - Cat 的方式實作 useCat.ts 後使用。

initMessageButton

按鈕在建立之後，會自動更新未讀訊息的數量

渲染 JKTalk 打開訊息按鈕。

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

type MessengerButtonConfig = {
    isSimple?: boolean;
    isMobile?: boolean;
}

const initMessageButton = (targetContainer: HTMLElement, btnConfig?: MessengerButtonConfig) => {
  const messageBtn = jktalk().initMessageButton(targetContainer, btnConfig)

  // 可以手動設定成 mobile 或 simple 模式，改成 false 則可以關閉 mobile 或 simple 模式
  // simple 模式通常用於桌機模式的側邊欄縮小時
  // mobile 模式通常用於手機瀏覽器
  messageBtn.setSimple(true)
  messageBtn.setMobile(true)
}

initFriendStatusButton

渲染 JKTalk 好友按鈕

import { useCat } from '@/composable/useCat'
import type { InteractiveFriendButtonConfig } from '@lctech-tw/f2e-cat'


const { jktalk } = useCat()

const initFriendStatusButton = (targetContainer: HTMLElement, btnConfig: InteractiveFriendButtonConfig) => {
  jktalk().initFriendStatusButton(targetContainer, btnConfig)
}

initProductInfoButton

渲染 JKTalk 產品行銷按鈕

import { useCat } from '@/composable/useCat'
import type { ProductInfoButtonConfig } from '@lctech-tw/f2e-cat'

const { jktalk } = useCat()

const initProductInfoButton = (targetContainer: HTMLElement, btnConfig: ProductInfoButtonConfig) => {
  jktalk().initProductInfoButton(targetContainer, btnConfig)
}

initActionButton

渲染 JKTalk 動作按鈕，可以自定義按鈕文字以及點擊後觸發的行為

import { useCat } from '@/composable/useCat'
import type { ActionButtonConfig } from '@lctech-tw/f2e-cat'

const { jktalk } = useCat()

const initActionButton = (targetContainer: HTMLElement, btnConfig: ActionButtonConfig) => {
  jktalk().initActionButton(targetContainer, btnConfig)
}

openTalk

開啟 JKTalk 聊天視窗

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const openTalk = () => {
  jktalk().openTalk()
}

logoutTalk

登出後就無法打開 JKTalk 視窗，直到下次成功登入之後才能打開 JKTalk 視窗

登出 JKTalk 聊天視窗

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const logoutTalk = () => {
  jktalk().logoutTalk()
}

closeTalk

關閉 JKTalk 聊天視窗

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const closeTalk = () => {
  jktalk().closeTalk()
}

sendMessageToUser

傳送訊息給特定使用者 by uid，並開啟 JKTalk 聊天視窗

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const sendMessageToUser = (huid: string) => {
  jktalk().sendMessageToUser(huid)
}

goPreviousStep

回到上一步，若沒有上一步則會關閉 JKTalk 聊天視窗

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const goPreviousStep = () => {
  jktalk().goPreviousStep()
}

goToSpecificPage

開啟特定頁面：聊天室列表、好友列表、一對一聊天室

import { useCat } from '@/composable/useCat'
import type { SpecificPageParam } from '@lctech-tw/f2e-cat'

const { jktalk } = useCat()

const goToSpecificPage = (param: SpecificPageParam) => {
  jktalk().goToSpecificPage(param)
}

cleanSearchText

清除好友列表的查詢欄位的輸入

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const cleanSearchText = () => {
  jktalk().cleanSearchText()
}

handleHeaderMenuShow

控制 JKTalk 聊天視窗 頂部的菜單顯示與否 (若沒傳值則會依照當前菜單狀態決定開啟或關閉)

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const handleHeaderMenuShow = (isOpen?: boolean) => {
  jktalk().handleHeaderMenuShow(isOpen)
}

closeSelectMode

關閉選取動作 (僅對好友列表、聊天室列表並且進行選取動作時有作用)

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const closeSelectMode = () => {
  jktalk().closeSelectMode()
}

onLoad

設定 JKTalk 聊天視窗 完成讀取時觸發的 callback

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

jktalk().onLoad(() => {
    console.log('JKTalk on load')
})

onOpen

設定 JKTalk 聊天視窗 開啟時觸發的 callback

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

jktalk().onOpen(() => {
    console.log('JKTalk onOpen')
})

onClose

設定 JKTalk 聊天視窗 關閉時觸發的 callback

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

jktalk().onClose(() => {
    console.log('JKTalk onClose')
})

onNotReadCountUpdate

設定 JKTalk 聊天視窗 未讀訊息數量更新時觸發的 callback

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

jktalk().onNotReadCountUpdate((count: number) => {
    console.log(`JKTalk onNotReadCountUpdate ${count}`)
})

onUnread

設定 JKTalk 聊天視窗 收到新訊息時觸發的 callback

import { useCat } from '@/composable/useCat'
import type { UnreadParam } from '@lctech-tw/f2e-cat'

const { jktalk } = useCat()

jktalk().onUnread((payload: UnreadParam) => {
    console.log(payload, 'JKTalk onUnread')
})

load

產品端 RD 不需執行，此為 Data4 開發者使用

載入 JKTalk 相關 js 以及建立 js instance

import { useCat } from '@/composable/useCat'

const { jktalk } = useCat()

const load = async () => {
  await jktalk().load()
}