How do I create a custom app in LB Phone?

Add an app to the Config.CustomApps table in lb-phone/config/config.lua with properties like name, description, developer, ui, icon, and price. Use the AddCustomApp export to add the app.

Can custom apps have a user interface?

Yes, LB Phone supports custom apps using UI by providing the path of an HTML file as the ui parameter. The recommended way is to create apps using exports with template apps available for reference.

What happens when a user opens a custom app?

When an app is opened, either the onUse client-side function or onServerUse server-side function (if defined) will be called, or the UI will display if a ui parameter is provided.

Can apps be set as default without requiring download?

Yes, by setting the defaultApp parameter to true, the app should be added without having to be downloaded by players.

What is the difference between landscape and default display modes?

When the landscape parameter is set to true, the app will be displayed in landscape mode. Otherwise, it displays in the default mode.

LB Phone v2 para FiveM - Script/QBCore de Telefone

Name: LB Phone v2
Brand: FiveMX
SKU: lb-phone-v2
Price: 49.00 USD
Availability: InStock

https://www.youtube.com/watch?v=CirWSvYno70

Aplicativos Personalizados

O LB Phone permite que você adicione aplicativos que possuem uma interface ou que simplesmente acionam funções ao abrir o aplicativo. Para adicionar um aplicativo que aciona uma função ao ser aberto, vá para lb-phone/config/config.lua e adicione o aplicativo à tabela Config.CustomApps, assim:

lb-phone/config/config.lua

Config.CustomApps = {    [app_identifier] = { -- Um identificador exclusivo para o aplicativo, não exibido para o usuário        name = Nome do App, -- O nome do aplicativo, exibido para o usuário        description = Descrição do App, -- A descrição do aplicativo, exibida para o usuário        developer = LB Phone, -- OPCIONAL, o desenvolvedor do aplicativo        defaultApp = true, -- OPCIONAL, se definido como verdadeiro, o aplicativo deve ser adicionado sem precisar ser baixado,        game = false, -- OPCIONAL, se definido como verdadeiro, o aplicativo será adicionado à seção de jogos        size = 59812, -- OPCIONAL em kB        images = { https://example.com/photo.jpg }, -- OPCIONAL, array de imagens do aplicativo na loja de aplicativos        ui = nome-do-recurso/ui/index.html, -- OPCIONAL        icon = https://cfx-nui- .. GetCurrentResourceName() .. /ui/icon.png, -- OPCIONAL, ícone do aplicativo        price = 0, -- OPCIONAL, faça os jogadores pagarem com dinheiro do jogo para baixar o aplicativo        landscape = false, -- OPCIONAL, se definido como verdadeiro, o aplicativo será exibido em modo paisagem        keepOpen = true, -- OPCIONAL, se definido como verdadeiro, o aplicativo não será fechado quando o jogador abrir o aplicativo (funciona apenas se ui não estiver definido)        onUse = function() -- OPCIONAL, função a ser chamada quando o aplicativo for aberto            -- faça algo        end,        onServerUse = function(source) -- OPCIONAL, função do lado do servidor a ser chamada quando o aplicativo for aberto            -- faça algo        end    }}

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-8>

Aplicativos personalizados usando UI

Se você quiser usar uma UI personalizada para seu aplicativo, precisará criar um script separado e fornecer o caminho do arquivo HTML e enviá-lo como ui.

A maneira recomendada de criar um aplicativo com UI é fazê-lo usando exports. Temos aplicativos template que você pode usar como referência.

Se o usuário tiver o modo escuro ativado, data-theme será definido como escuro. Caso contrário, será definido como claro.

Adicionando o aplicativo

Para adicionar o aplicativo, use a AddCustomApp exportação.

Removendo o aplicativo

Para remover o aplicativo, use a RemoveCustomApp exportação.

Enviando uma mensagem para a UI

Para enviar uma mensagem para a UI, você precisa usar a SendCustomAppMessage exportação em vez de usar SendNUIMessage. Você ouviria por ela da mesma forma no frontend.

Componentes & funções importadas

Quando o aplicativo é carregado no telefone, algumas funções são importadas para o objeto globalThis.

Nome	Tipo	Descrição
resourceName	string	O nome do recurso que adicionou o aplicativo personalizado
appName	string	O nome do aplicativo
settings	object	As configurações do telefone
components	object	Componentes úteis para o aplicativo

Componentes

Os seguintes componentes podem ser acessados através de globalThis.components. Você pode visualizar um arquivo de declaração TypeScript em lb-reactts/ui/src/components.d.ts.

createGameRender

Criar uma renderização de jogo, que renderiza o jogo em um canvas. Isso é usado para criar uma câmera em seu aplicativo e deve ser usado com as exportações de câmera.

const gameRender = components.createGameRender(canvas) // defina a proporçãogameRender.resizeByAspect(9 / 16) // pause a renderizaçãogameRender.pause() // retome a renderizaçãogameRender.resume() // tire uma fotoconst blob: Blob = await gameRender.takePhoto() // grave um vídeoconst recorder = gameRender.startRecording((blob: Blob) => {    const video = URL.createObjectURL(blob)}) await new Promise((resolve) => setTimeout(resolve, 5000)) recorder.stop() // destrua a renderização do jogogameRender.destroy()

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

uploadMedia

Faz upload de mídia e retorna uma promessa com a URL.

// O tipo de upload pode ser 'Vídeo' | 'Imagem' | 'Áudio'const url = await components.uploadMedia('Video', blob)

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

saveToGallery

Salva uma URL na galeria e retorna uma promessa com o ID

const id = await components.saveToGallery(url)

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setColorPicker

components.setColorPicker({    onSelect(color) {},    onClose(color) {}})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setPopUp

components.setPopUp({    title: 'Menu Popup',    description: 'Confirme sua escolha',    buttons: [        {            title: 'Cancelar',            color: 'red',            cb: () => {                console.log('Cancelar')            }        },        {            title: 'Confirmar',            color: 'blue',            cb: () => {                console.log('Confirmar')            }        }    ]})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setContextMenu

components.setContextMenu({    title: 'Menu de Contexto',    buttons: [        {            title: 'Notificação do Telefone',            color: 'blue',            cb: () => {                sendNotification({ title: notificationText })            }        },        {            title: 'Notificação do GTA',            color: 'red',            cb: () => {                fetchNui('drawNotification', { message: notificationText })            }        }    ]})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setContactSelector

components.setContactSelector({    onSelect(contact) {        components.setPopUp({            title: 'Contato Selecionado',            description: `${contact.firstname ?? '??'} ${contact.lastname ?? ''} ${contact.number}`,            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setShareComponent

Veja a exportação AirShare para quais dados enviar.

components.setShareComponent({    type: 'image',    data: {        isVideo: false,        src: 'https://docs.lbscripts.com/images/icons/icon.png'    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setEmojiPickerVisible

components.setEmojiPickerVisible({    onSelect: (emoji) => {        components.setEmojiPickerVisible(false)        components.setPopUp({            title: 'Emoji Selecionado',            description: emoji.emoji,            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setGifPickerVisible

components.setGifPickerVisible({    onSelect(gif) {        components.setPopUp({            title: 'GIF Selecionado',            attachment: { src: gif },            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setGallery

components.setGallery({    includeVideos: true,    includeImages: true,    allowExternal: true,    multiSelect: false,     onSelect(data) {        components.setPopUp({            title: 'Mídia Selecionada',            attachment: { src: Array.isArray(data) ? data[0].src : data.src },            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setFullscreenImage

components.setFullscreenImage('https://docs.lbscripts.com/images/icons/icon.png')

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setHomeIndicatorVisible

components.setHomeIndicatorVisible(true)

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

Funções

fetchNui(event, data, scriptName?)

fetchNui('test', {    foo: 'bar'})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

onNuiEvent

Ouça mensagens NUI enviadas via SendCustomAppMessage

onNuiEvent('test', (data) => {    console.log(data)})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

onSettingsChange

Ouça por alterações nas configurações

onSettingsChange((newSettings) => {    console.log(newSettings)})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

createCall

createCall({    number: '1234567890', // você pode enviar `company` em vez de `number` para chamar uma empresa    videoCall: false,    hideNumber: false})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

Scripts de telefone relacionados

https://www.youtube.com/watch?v=CirWSvYno70

Aplicativos Personalizados

lb-phone/config/config.lua

Config.CustomApps = {    [app_identifier] = { -- Um identificador exclusivo para o aplicativo, não exibido para o usuário        name = Nome do App, -- O nome do aplicativo, exibido para o usuário        description = Descrição do App, -- A descrição do aplicativo, exibida para o usuário        developer = LB Phone, -- OPCIONAL, o desenvolvedor do aplicativo        defaultApp = true, -- OPCIONAL, se definido como verdadeiro, o aplicativo deve ser adicionado sem precisar ser baixado,        game = false, -- OPCIONAL, se definido como verdadeiro, o aplicativo será adicionado à seção de jogos        size = 59812, -- OPCIONAL em kB        images = { https://example.com/photo.jpg }, -- OPCIONAL, array de imagens do aplicativo na loja de aplicativos        ui = nome-do-recurso/ui/index.html, -- OPCIONAL        icon = https://cfx-nui- .. GetCurrentResourceName() .. /ui/icon.png, -- OPCIONAL, ícone do aplicativo        price = 0, -- OPCIONAL, faça os jogadores pagarem com dinheiro do jogo para baixar o aplicativo        landscape = false, -- OPCIONAL, se definido como verdadeiro, o aplicativo será exibido em modo paisagem        keepOpen = true, -- OPCIONAL, se definido como verdadeiro, o aplicativo não será fechado quando o jogador abrir o aplicativo (funciona apenas se ui não estiver definido)        onUse = function() -- OPCIONAL, função a ser chamada quando o aplicativo for aberto            -- faça algo        end,        onServerUse = function(source) -- OPCIONAL, função do lado do servidor a ser chamada quando o aplicativo for aberto            -- faça algo        end    }}

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-8>

Aplicativos personalizados usando UI

Se você quiser usar uma UI personalizada para seu aplicativo, precisará criar um script separado e fornecer o caminho do arquivo HTML e enviá-lo como ui.

A maneira recomendada de criar um aplicativo com UI é fazê-lo usando exports. Temos aplicativos template que você pode usar como referência.

Se o usuário tiver o modo escuro ativado, data-theme será definido como escuro. Caso contrário, será definido como claro.

Adicionando o aplicativo

Para adicionar o aplicativo, use a AddCustomApp exportação.

Removendo o aplicativo

Para remover o aplicativo, use a RemoveCustomApp exportação.

Enviando uma mensagem para a UI

Para enviar uma mensagem para a UI, você precisa usar a SendCustomAppMessage exportação em vez de usar SendNUIMessage. Você ouviria por ela da mesma forma no frontend.

Componentes & funções importadas

Quando o aplicativo é carregado no telefone, algumas funções são importadas para o objeto globalThis.

Nome	Tipo	Descrição
resourceName	string	O nome do recurso que adicionou o aplicativo personalizado
appName	string	O nome do aplicativo
settings	object	As configurações do telefone
components	object	Componentes úteis para o aplicativo

Componentes

Os seguintes componentes podem ser acessados através de globalThis.components. Você pode visualizar um arquivo de declaração TypeScript em lb-reactts/ui/src/components.d.ts.

createGameRender

Criar uma renderização de jogo, que renderiza o jogo em um canvas. Isso é usado para criar uma câmera em seu aplicativo e deve ser usado com as exportações de câmera.

const gameRender = components.createGameRender(canvas) // defina a proporçãogameRender.resizeByAspect(9 / 16) // pause a renderizaçãogameRender.pause() // retome a renderizaçãogameRender.resume() // tire uma fotoconst blob: Blob = await gameRender.takePhoto() // grave um vídeoconst recorder = gameRender.startRecording((blob: Blob) => {    const video = URL.createObjectURL(blob)}) await new Promise((resolve) => setTimeout(resolve, 5000)) recorder.stop() // destrua a renderização do jogogameRender.destroy()

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

uploadMedia

Faz upload de mídia e retorna uma promessa com a URL.

// O tipo de upload pode ser 'Vídeo' | 'Imagem' | 'Áudio'const url = await components.uploadMedia('Video', blob)

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

saveToGallery

Salva uma URL na galeria e retorna uma promessa com o ID

const id = await components.saveToGallery(url)

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setColorPicker

components.setColorPicker({    onSelect(color) {},    onClose(color) {}})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setPopUp

components.setPopUp({    title: 'Menu Popup',    description: 'Confirme sua escolha',    buttons: [        {            title: 'Cancelar',            color: 'red',            cb: () => {                console.log('Cancelar')            }        },        {            title: 'Confirmar',            color: 'blue',            cb: () => {                console.log('Confirmar')            }        }    ]})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setContextMenu

components.setContextMenu({    title: 'Menu de Contexto',    buttons: [        {            title: 'Notificação do Telefone',            color: 'blue',            cb: () => {                sendNotification({ title: notificationText })            }        },        {            title: 'Notificação do GTA',            color: 'red',            cb: () => {                fetchNui('drawNotification', { message: notificationText })            }        }    ]})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setContactSelector

components.setContactSelector({    onSelect(contact) {        components.setPopUp({            title: 'Contato Selecionado',            description: `${contact.firstname ?? '??'} ${contact.lastname ?? ''} ${contact.number}`,            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setShareComponent

Veja a exportação AirShare para quais dados enviar.

components.setShareComponent({    type: 'image',    data: {        isVideo: false,        src: 'https://docs.lbscripts.com/images/icons/icon.png'    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setEmojiPickerVisible

components.setEmojiPickerVisible({    onSelect: (emoji) => {        components.setEmojiPickerVisible(false)        components.setPopUp({            title: 'Emoji Selecionado',            description: emoji.emoji,            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setGifPickerVisible

components.setGifPickerVisible({    onSelect(gif) {        components.setPopUp({            title: 'GIF Selecionado',            attachment: { src: gif },            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setGallery

components.setGallery({    includeVideos: true,    includeImages: true,    allowExternal: true,    multiSelect: false,     onSelect(data) {        components.setPopUp({            title: 'Mídia Selecionada',            attachment: { src: Array.isArray(data) ? data[0].src : data.src },            buttons: [                {                    title: 'OK'                }            ]        })    }})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setFullscreenImage

components.setFullscreenImage('https://docs.lbscripts.com/images/icons/icon.png')

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

setHomeIndicatorVisible

components.setHomeIndicatorVisible(true)

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

Funções

fetchNui(event, data, scriptName?)

fetchNui('test', {    foo: 'bar'})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

onNuiEvent

Ouça mensagens NUI enviadas via SendCustomAppMessage

onNuiEvent('test', (data) => {    console.log(data)})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

onSettingsChange

Ouça por alterações nas configurações

onSettingsChange((newSettings) => {    console.log(newSettings)})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

createCall

createCall({    number: '1234567890', // você pode enviar `company` em vez de `number` para chamar uma empresa    videoCall: false,    hideNumber: false})

&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-0>

LB Phone v2

Descrição

Aplicativos Personalizados

Aplicativos personalizados usando UI

Adicionando o aplicativo

Removendo o aplicativo

Enviando uma mensagem para a UI

Componentes & funções importadas

Componentes

createGameRender

uploadMedia

saveToGallery

setColorPicker

setPopUp

setContextMenu

setContactSelector

setShareComponent

setEmojiPickerVisible

setGifPickerVisible

setGallery

setFullscreenImage

setHomeIndicatorVisible

Funções

fetchNui(event, data, scriptName?)

onNuiEvent

onSettingsChange

createCall

Scripts de telefone relacionados

Compatibilidade, configuração e comprovação do produto em um olhar

Compatibilidade

Related Tutorials & Guides

Continue Construindo Seu Servidor FiveM

LB Phone v2

Descrição

Aplicativos Personalizados

Aplicativos personalizados usando UI

Adicionando o aplicativo

Removendo o aplicativo

Enviando uma mensagem para a UI

Componentes & funções importadas

Componentes

createGameRender

uploadMedia

saveToGallery

setColorPicker

setPopUp

setContextMenu

setContactSelector

setShareComponent

setEmojiPickerVisible

setGifPickerVisible

setGallery

setFullscreenImage

setHomeIndicatorVisible

Funções

fetchNui(event, data, scriptName?)

onNuiEvent

onSettingsChange

createCall

Scripts de telefone relacionados

Compatibilidade, configuração e comprovação do produto em um olhar

Compatibilidade

Related Tutorials & Guides

Continue Construindo Seu Servidor FiveM

Características Principais

Perguntas Frequentes

How do I create a custom app in LB Phone?

Can custom apps have a user interface?

What happens when a user opens a custom app?

Can apps be set as default without requiring download?

What is the difference between landscape and default display modes?

Produtos Relacionados

GKSPhone (ESX)

Chezza Phone V2

Megaphone Mod (Vehicle & Handheld)

LMX iFruitPods

ESX vs QBCore vs QBOX: Technical Framework Comparison 2026

FiveM Frameworks Explained: Complete Guide to ESX, QBCore & QBOX

QBox Framework Guide: Migrate from QBCore and Boost Performance (2026)