Applications personnalisées
LB Phone vous permet d'ajouter des applications dotées d'une interface utilisateur ou déclenchant simplement des fonctions à leur ouverture. Pour ajouter une application déclenchant une fonction à son ouverture, rendez-vous sur lb-phone/config/config.lua et ajoutez l'application à la Config.CustomApps table, comme ceci :
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 }}Applications personnalisées utilisant l'interface utilisateur
Si vous souhaitez utiliser une interface utilisateur personnalisée pour votre application, vous devez créer un script séparé et fournir le chemin du fichier HTML et l'envoyer en tant que ui.
La méthode recommandée pour créer une application avec interface utilisateur est d'utiliser des exportations. Nous avons applications modèles que vous pouvez utiliser comme référence.
Si le mode sombre est activé, le thème des données sera défini sur sombre. Sinon, il sera défini sur clair.
Ajout de l'application
Pour ajouter l'application, utilisez le Ajouter une application personnalisée exporter.
Suppression de l'application
Pour supprimer l'application, utilisez le SupprimerCustomApp exporter.
Envoi d'un message à l'interface utilisateur
Pour envoyer un message à l'interface utilisateur, vous devez utiliser le Envoyer un message d'application personnalisé exportez au lieu d'utiliser SendNUIMessage. Vous l'écouterez de la même manière dans le frontend.
Composants et fonctions importés
Lorsque l'application est chargée sur le téléphone, quelques fonctions sont importées dans le globalThis objet.
| Nom | Taper | Description |
|---|---|---|
| nom de la ressource | chaîne | Le nom de la ressource qui a ajouté l'application personnalisée |
| nom de l'application | chaîne | Le nom de l'application |
| paramètres | objet | Les paramètres du téléphone |
| composants | objet | Utile composants pour l'application |
Composants
Les composants suivants sont accessibles via globalThis.components. Vous pouvez afficher un fichier de déclaration TypeScript à l'adresse lb-reactts/ui/src/components.d.ts.
créerGameRender
Crée un rendu de jeu, qui affiche le jeu sur une toile. Ceci permet de créer une caméra dans votre application et doit être utilisé avec l'option exportations de caméras.
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
Télécharge le média et renvoie une promesse avec l'URL.
// Upload type can be 'Video' | 'Image' | 'Audio'const url = await components.uploadMedia('Video', blob)enregistrer dans la galerie
Enregistre une URL vers la galerie et renvoie une promesse avec l'ID
const id = await components.saveToGallery(url)setColorPicker
components.setColorPicker({ onSelect(color) {}, onClose(color) {}})définirPopUp
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') } } ]})définirContextMenu
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 }) } } ]})définirContactSelector
components.setContactSelector({ onSelect(contact) { components.setPopUp({ title: 'Selected contact', description: `${contact.firstname ?? '??'} ${contact.lastname ?? ''} ${contact.number}`, buttons: [ { title: 'OK' } ] }) }})setShareComponent
Voir le Exportation AirShare pour savoir quelles données envoyer.
components.setShareComponent({ type: 'image', data: { isVideo: false, src: 'https://docs.lbscripts.com/images/icons/icon.png' }})définirEmojiPickerVisible
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' } ] }) }})définirFullscreenImage
components.setFullscreenImage('https://docs.lbscripts.com/images/icons/icon.png')définirHomeIndicatorVisible
components.setHomeIndicatorVisible(true)Fonctions
fetchNui(événement, données, scriptName ?)
fetchNui('test', { foo: 'bar'})onNuiEvent
Écoutez les messages NUI envoyés via Envoyer un message d'application personnalisé
onNuiEvent('test', (data) => { console.log(data)})sur les paramètres de modification
Écoutez les changements de paramètres
onSettingsChange((newSettings) => { console.log(newSettings)})créerAppel
createCall({ number: '1234567890', // you can send `company` instead of `number` to call a company videoCall: false, hideNumber: false})
