Comment créer des applications mobiles natives avec PHP-tutoriel php-php.cn

Comment créer des applications mobiles natives avec PHP

王林

Libérer： 2024-05-07 08:36:01

original

312 Les gens l'ont consulté

Créez des applications mobiles natives à l'aide de PHP via le framework React Native, qui permet aux développeurs de créer des applications avec une apparence et des performances natives à l'aide de PHP. Dans le cas réel, une simple application de compteur a été créée à l'aide de React Native et du serveur PHP. Lorsque vous cliquez sur le bouton dans l'application, une API du serveur PHP est appelée pour mettre à jour le décompte et le décompte mis à jour est affiché dans l'application.

如何用 PHP 构建原生移动应用

Comment créer des applications mobiles natives avec PHP

Introduction

PHP est un langage de script côté serveur populaire, mais ce que l'on sait moins, c'est qu'il peut également être utilisé pour créer des applications mobiles natives. En utilisant React Native, un framework d'applications mobiles multiplateformes populaire, les développeurs peuvent utiliser PHP pour créer des applications hautes performances avec une apparence native.

Cas pratique : Construire une application de compteur simple

Étape 1 : Créer un projet React Native

mkdir counter-app
cd counter-app
npx react-native init CounterApp --template react-native-template-typescript

Copier après la connexion

Étape 2 : Créer un fichier api.php dans le serveur PHP

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

$data = json_decode(file_get_contents("php://input"));

if (isset($data->operation)) {
  switch ($data->operation) {
    case "increment":
      $count = (int) file_get_contents("count.txt") + 1;
      break;
    case "decrement":
      $count = (int) file_get_contents("count.txt") - 1;
      break;
    default:
      $count = (int) file_get_contents("count.txt");
      break;
  }
  file_put_contents("count.txt", $count);
  echo json_encode(["count" => $count]);
}
?>

Copier après la connexion

Étape 3 : Dans Application Ajoutez un appel à l'API dans .tsx

// Import React and useState
import React, { useState } from 'react';

// Create the main app component
const App = () => {
  // Initialize state for count
  const [count, setCount] = useState(0);

  // Handle increment and decrement button clicks
  const handleIncrement = () => {
    fetch('http://localhost:3000/api.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ operation: 'increment' }),
    })
      .then(res => res.json())
      .then(data => setCount(data.count))
      .catch(error => console.error(error));
  };

  const handleDecrement = () => {
    fetch('http://localhost:3000/api.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ operation: 'decrement' }),
    })
      .then(res => res.json())
      .then(data => setCount(data.count))
      .catch(error => console.error(error));
  };

  // Render the main app
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter Application</Text>
      <Text style={styles.count}>{count}</Text>
      <TouchableOpacity style={styles.button} onPress={handleIncrement}>
        <Text style={styles.buttonText}>+</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={handleDecrement}>
        <Text style={styles.buttonText}>-</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Copier après la connexion

Étape 4 : Exécutez l'application

npx react-native run-ios

Copier après la connexion

Testez l'application

Pendant que l'application est en cours d'exécution, cliquez sur les boutons pour incrémenter ou décrémenter le décompte. Vous pouvez afficher les requêtes adressées au serveur en accédant à la route API à l'adresse http://localhost:3000/api.php dans un navigateur Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!