Рецепт: скелет frame-приложения

pnpm add @bitrix24/b24jssdk

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import {
  initializeB24Frame,
  type B24Frame,
  LoggerFactory
} from '@bitrix24/b24jssdk'

const logger = LoggerFactory.createForBrowser('AppShell', import.meta.env.DEV)
const ready = ref(false)
const userTheme = ref<'light' | 'dark'>('light')
const portalDomain = ref('')
let $b24: B24Frame | null = null

onMounted(async () => {
  try {
    $b24 = await initializeB24Frame()
  }
  catch (error) {
    logger.error('initializeB24Frame failed', error)
    return
  }

  $b24.parent.setTitle('My Bitrix24 App')
  // Авто-ресайз iframe под содержимое; вызывайте снова, когда высота содержимого
  // меняется (например, после рендера ответа сети).
  await $b24.parent.resizeWindowAuto()

  // Чтение сохранённых настроек. Возвращает `null`, если ничего ещё не задано.
  const stored = $b24.options.appGet('theme') as 'light' | 'dark' | null
  if (stored) userTheme.value = stored

  const appInfo = await $b24.actions.v2.call.make({ method: 'app.info' })
  portalDomain.value = appInfo.getData().result.DOMAIN ?? ''

  ready.value = true
})

onBeforeUnmount(() => {
  $b24 = null
})

async function setTheme(value: 'light' | 'dark') {
  userTheme.value = value
  // Опция уровня приложения: хранится на портале под приложением, не под пользователем.
  await $b24?.options.appSet('theme', value)
}

async function openCrmDeals() {
  if (!$b24) return
  const url = new URL('/crm/deal/list/', `https://${portalDomain.value}`)
  await $b24.slider.openPath(url, 1200)
}

async function close() {
  await $b24?.parent.closeApplication()
}
</script>

<template>
  <section v-if="ready" class="app-shell" :data-theme="userTheme">
    <header>
      <h1>Hello from {{ portalDomain }}</h1>
    </header>

    <main>
      <button @click="setTheme(userTheme === 'light' ? 'dark' : 'light')">
        Switch theme (current: {{ userTheme }})
      </button>
      <button @click="openCrmDeals">
        Open deals in slider
      </button>
    </main>

    <footer>
      <button @click="close">Close app</button>
    </footer>
  </section>
  <p v-else>Loading…</p>
</template>

import { createApp } from 'vue'
import AppShell from './components/AppShell.vue'

createApp(AppShell).mount('#app')

# 1. Локальный dev-сервер (Vite)
pnpm dev
# → http://localhost:5173/ — запуск этого URL напрямую завершится reject:
#   initializeB24Frame() нужно родительское окно Bitrix24.

# 2. Пробросьте dev-сервер (ngrok / cloudflared / ваш туннель)
ngrok http 5173
# → возьмите https-URL.

# 3. В Bitrix24: Приложения → Ресурсы разработчика → Локальное приложение →
#    укажите URL обработчика placement равным URL туннеля и сохраните.

# 4. Откройте placement внутри Bitrix24.