Aangepaste apps
LB Phone stelt je in staat om apps toe te voegen die ofwel een UI hebben ofwel simpelweg functies activeren bij het openen van de app. Om een app toe te voegen die een functie activeert bij het openen ervan, ga naar lb-phone/config/config.lua en voeg de app toe aan de Config.CustomApps tabel, zoals deze:
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 }}Aangepaste apps met UI
Als je een aangepaste UI wilt gebruiken voor je app, moet je een apart script maken en het pad van het HTML bestand opgeven en dit als ui.
De aanbevolen manier om een app te maken met UI is om deze te maken met behulp van exports. We hebben sjabloon apps dat je als referentie kunt gebruiken.
Als de gebruiker dark mode heeft ingeschakeld, wordt data-theme ingesteld op dark. Anders wordt het ingesteld op light.
De app toevoegen
Om de app toe te voegen, gebruik de AddCustomApp export.
De app verwijderen
Om de app te verwijderen, gebruik de RemoveCustomApp export.
Bericht verzenden naar de UI
Om een bericht te sturen naar de UI, moet je de SendCustomAppMessage export in plaats van SendNUIMessage te gebruiken. Je zou er op dezelfde manier naar luisteren in de frontend.
Geïmporteerde componenten & functies
Wanneer de app op de telefoon wordt geladen, worden enkele functies geïmporteerd in de globalThis object.
| Naam | Type | Beschrijving |
|---|---|---|
| resourceName | string | De naam van de resource die de aangepaste app heeft toegevoegd |
| appName | string | De app naam |
| settings | object | De instellingen van de telefoon |
| componenten | object | Nuttig componenten voor de app |
Componenten
De volgende componenten zijn toegankelijk via globalThis.components. Je kunt een TypeScript declaratiebestand bekijken op lb-reactts/ui/src/components.d.ts.
createGameRender
Creëert een game-render, die de game naar een canvas rendert. Dit wordt gebruikt om een camera in je app te maken, en moet worden gebruikt met de camera-exports.
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()uploadMedia
Uploadt media en retourneert een promise met de URL.
// Upload type can be 'Video' | 'Image' | 'Audio'const url = await components.uploadMedia('Video', blob)saveToGallery
Slaat een URL op in de galerij en retourneert een promise met de ID
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
Zie de AirShare export voor welke gegevens te verzenden.
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' } ] }) }})setGallery
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)Functies
fetchNui(event, data, scriptName?)
fetchNui('test', { foo: 'bar'})onNuiEvent
Luister naar NUI berichten verzonden via SendCustomAppMessage
onNuiEvent('test', (data) => { console.log(data)})onSettingsChange
Luister naar instellingenwijzigingen
onSettingsChange((newSettings) => { console.log(newSettings)})createCall
createCall({ number: '1234567890', // you can send `company` instead of `number` to call a company videoCall: false, hideNumber: false})
