Benutzerdefinierte Apps
LB Phone ermöglicht es dir, Apps hinzuzufügen, die entweder ein UI haben oder einfach Funktionen auslösen, wenn die App geöffnet wird. Um eine App hinzuzufügen, die eine Funktion beim Öffnen auslöst, gehe zu lb-phone/config/config.lua und füge die App zu den Config.CustomApps Tabelle, etwa so:
Config.CustomApps = { ["app_identifier"] = { -- A unique identifier for the app, not shown to the user name = "App Name", -- The name of the app, shown to the user description = "App Description", -- The description of the app, shown to the user developer = "LB Phone", -- OPTIONAL the developer of the app defaultApp = true, -- OPTIONAL if set to true, app should be added without having to download it, game = false, -- OPTIONAL if set to true, app will be added to the game section size = 59812, -- OPTIONAL in kB images = { "https://example.com/photo.jpg" }, -- OPTIONAL array of images for the app on the app store ui = "resource-name/ui/index.html", -- OPTIONAL icon = "https://cfx-nui-" .. GetCurrentResourceName() .. "/ui/icon.png", -- OPTIONAL app icon price = 0, -- OPTIONAL, Make players pay with in-game money to download the app landscape = false, -- OPTIONAL, if set to true, the app will be displayed in landscape mode keepOpen = true, -- OPTIONAL, if set to true, the app will not close when the player opens the app (only works if ui is not defined) onUse = function() -- OPTIONAL function to be called when the app is opened -- do something end, onServerUse = function(source) -- OPTIONAL server side function to be called when the app is opened -- do something end }}Benutzerdefinierte Apps mit UI
Wenn du einen benutzerdefinierten UI für deine App verwenden möchtest, musst du ein separates Skript erstellen und den Pfad der HTML-Datei bereitstellen und sie senden als ui.
Die empfohlene Methode zum Erstellen einer App mit UI ist die Verwendung von Exporten. Wir haben Vorlagen-Apps die du als Referenz verwenden kannst.
Wenn der Benutzer den Dunkelmodus aktiviert hat, wird das Datendesign auf Dunkel eingestellt. Andernfalls wird es auf Hell eingestellt.
Hinzufügen der App
Um die App hinzuzufügen, verwende den AddCustomApp Export.
Entfernen der App
Um die App zu entfernen, verwende die RemoveCustomApp Export.
Senden einer Nachricht an die Benutzeroberfläche
Um eine Nachricht an den UI zu senden, musst du die SendCustomAppMessage Exportiere stattdessen, anstatt SendNUIMessage zu verwenden. Du würdest es auf die gleiche Weise im Frontend abhören.
Importierte Komponenten und Funktionen
Wenn die App auf das Telefon geladen wird, werden einige Funktionen in die globalThis Objekt.
| Name | Typ | Beschreibung |
|---|---|---|
| Ressourcenname | Schnur | Der Name der Ressource, die die benutzerdefinierte App hinzugefügt hat |
| appName | Schnur | Der App-Name |
| Einstellungen | Objekt | Die Einstellungen des Telefons |
| Komponenten | Objekt | Nützlich Komponenten für die App |
Komponenten
Auf folgende Komponenten kann zugegriffen werden über globalThis.components. Du kannst eine TypeScript-Deklarationsdatei unter lb-reactts/ui/src/components.d.ts.
createGameRender
Erstellt eine Spielrenderung, die das Spiel auf eine Leinwand rendert. Dies wird verwendet, um eine Kamera in deiner App zu erstellen und sollte mit der Kameraexporte.
const gameRender = components.createGameRender(canvas) // set the aspect ratiogameRender.resizeByAspect(9 / 16) // pause the renderinggameRender.pause() // unpause the renderinggameRender.resume() // take a photoconst blob: Blob = await gameRender.takePhoto() // take a videoconst recorder = gameRender.startRecording((blob: Blob) => { const video = URL.createObjectURL(blob)}) await new Promise((resolve) => setTimeout(resolve, 5000)) recorder.stop() // destroy the game rendergameRender.destroy()Medien hochladen
Lädt Medien hoch und gibt ein Versprechen mit der URL zurück.
// Upload type can be 'Video' | 'Image' | 'Audio'const url = await components.uploadMedia('Video', blob)saveToGallery
Speichert eine URL zur Galerie und gibt ein Versprechen mit der ID zurück
const id = await components.saveToGallery(url)setColorPicker
components.setColorPicker({ onSelect(color) {}, onClose(color) {}})setPopUp
components.setPopUp({ title: 'Popup Menu', description: 'Confirm your choice', buttons: [ { title: 'Cancel', color: 'red', cb: () => { console.log('Cancel') } }, { title: 'Confirm', color: 'blue', cb: () => { console.log('Confirm') } } ]})setContextMenu
components.setContextMenu({ title: 'Context menu', buttons: [ { title: 'Phone Notification', color: 'blue', cb: () => { sendNotification({ title: notificationText }) } }, { title: 'GTA Notification', color: 'red', cb: () => { fetchNui('drawNotification', { message: notificationText }) } } ]})setContactSelector
components.setContactSelector({ onSelect(contact) { components.setPopUp({ title: 'Selected contact', description: `${contact.firstname ?? '??'} ${contact.lastname ?? ''} ${contact.number}`, buttons: [ { title: 'OK' } ] }) }})setShareComponent
Sieh dir die AirShare-Export welche Daten gesendet werden sollen.
components.setShareComponent({ type: 'image', data: { isVideo: false, src: 'https://docs.lbscripts.com/images/icons/icon.png' }})setEmojiPickerVisible
components.setEmojiPickerVisible({ onSelect: (emoji) => { components.setEmojiPickerVisible(false) components.setPopUp({ title: 'Selected emoji', description: emoji.emoji, buttons: [ { title: 'OK' } ] }) }})setGifPickerVisible
components.setGifPickerVisible({ onSelect(gif) { components.setPopUp({ title: 'Selected GIF', attachment: { src: gif }, buttons: [ { title: 'OK' } ] }) }})Galerie einstellen
components.setGallery({ includeVideos: true, includeImages: true, allowExternal: true, multiSelect: false, onSelect(data) { components.setPopUp({ title: 'Selected media', attachment: { src: Array.isArray(data) ? data[0].src : data.src }, buttons: [ { title: 'OK' } ] }) }})setFullscreenImage
components.setFullscreenImage('https://docs.lbscripts.com/images/icons/icon.png')setHomeIndicatorVisible
components.setHomeIndicatorVisible(true)Funktionen
fetchNui(Ereignis, Daten, Skriptname?)
fetchNui('test', { foo: 'bar'})onNuiEvent
Hör auf NUI-Nachrichten, die über SendCustomAppMessage
onNuiEvent('test', (data) => { console.log(data)})beiEinstellungenÄndern
Höre auf Änderungen der Einstellungen
onSettingsChange((newSettings) => { console.log(newSettings)})Anruf erstellen
createCall({ number: '1234567890', // you can send `company` instead of `number` to call a company videoCall: false, hideNumber: false})
