Membina aplikasi PhoneGap dengan backend WordPress-WordTekan-php.cn

Membina aplikasi PhoneGap dengan backend WordPress

Christopher Nolan

Lepaskan： 2025-02-18 11:02:11

asal

895 orang telah melayarinya

Tutorial ini menunjukkan menggunakan WordPress sebagai backend untuk aplikasi mudah alih PhoneGap, yang memberi tumpuan kepada mewujudkan API REST untuk komunikasi lancar. Kami akan membina aplikasi Log Masuk dan Blog Post. Walaupun PhoneGap sendiri dihentikan, prinsip-prinsip itu berlaku untuk pengganti sumber terbuka, Apache Cordova.

Building a PhoneGap App with a WordPress Backend

Tidak seperti penyelesaian apl blog terhad seperti AppPresser, pendekatan ini membolehkan membina aplikasi yang pelbagai menggunakan backend WordPress.

Konsep Utama:

WordPress REST API: Dibuat menggunakan plugin atau tema WordPress, API ini membolehkan komunikasi antara aplikasi PhoneGap dan WordPress. Tindakan dan wp_ajax_ adalah penting untuk membuat API GET/POST. wp_ajax_nopriv_
Fleksibiliti PhoneGap: Aplikasi PhoneGap memintas Ajax dan Cookie sekatan dasar asal yang sama, yang membolehkan AJAX permintaan ke mana -mana laman web.
Aplikasi kami akan mengendalikan log masuk pengguna dan memaparkan senarai catatan blog WordPress, memanfaatkan permintaan HTTP untuk mendapatkan data. jQuery mobile akan digunakan untuk UI.

Building WordPress Rest Apis:

WordPress menyediakan tindakan untuk mewujudkan API REST yang boleh diakses oleh mana -mana pelanggan HTTP. Mari kita bina API untuk log masuk dan pasca pengambilan semula.

API ini mengendalikan percubaan log masuk. Jika pengguna sudah log masuk (

function already_logged_in() {
    echo "User is already Logged In";
    die();
}

function login() {
    $creds = array(
        'user_login' => $_GET["username"],
        'user_password' => $_GET["password"]
    );

    $user = wp_signon($creds, false);
    if (is_wp_error($user)) {
        echo "FALSE";
        die();
    }
    echo "TRUE";
    die();
}

add_action("wp_ajax_login", "already_logged_in");
add_action("wp_ajax_nopriv_login", "login");

Salin selepas log masuk

dilaksanakan. Jika tidak (), wp_ajax_ mengesahkan kelayakan menggunakan already_logged_in. wp_ajax_nopriv_ login wp_signon Post blog API:

API ini mengembalikan sepuluh jawatan terkini dalam format JSON. Pengguna yang tidak dikenali menerima petak log masuk.

function posts() {
    header("Content-Type: application/json");
    $posts_array = array();
    $args = array(
        "post_type" => "post",
        "orderby" => "date",
        "order" => "DESC",
        "post_status" => "publish",
        "posts_per_page" => "10"
    );

    $posts = new WP_Query($args);
    if ($posts->have_posts()) :
        while ($posts->have_posts()) :
            $posts->the_post();
            $post_array = array(get_the_title(), get_the_permalink(), get_the_date(), wp_get_attachment_url(get_post_thumbnail_id()));
            array_push($posts_array, $post_array);
        endwhile;
    else :
        echo json_encode(array('posts' => array()));
        die();
    endif;
    echo json_encode($posts_array);
    die();
}

function no_posts() {
    echo "Please login";
    die();
}

add_action("wp_ajax_posts", "posts");
add_action("wp_ajax_nopriv_posts", "no_posts");

Salin selepas log masuk

Mewujudkan App PhoneGap:

Kami akan menggunakan pembina desktop PhoneGap (atau setara Apache Cordova). Struktur aplikasi akan menjadi:

index.html:

<code>--www
    --cordova.js
    --js
        --index.js
        --index.html
    --css
        --style.css (optional)</code>

Salin selepas log masuk

(dipermudahkan untuk keringkasan, menggunakan jQuery mobile)

index.js:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <title>PhoneGap WordPress App</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
</head>
<body>
    <!-- Login Page -->
    <div data-role="page" id="login">...</div>
    <!-- Posts Page -->
    <div data-role="page" id="posts">...</div>

    <🎜>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

Salin selepas log masuk

(dipermudahkan untuk keringkasan)

ingat untuk menggantikan

dengan url tapak WordPress anda.

function login() {
    // ... (Login logic using XMLHttpRequest, similar to the original example) ...
}

function fetchAndDisplayPosts() {
    // ... (Fetch and display posts using XMLHttpRequest, similar to the original example) ...
}

Salin selepas log masuk

"http://localhost/wp-admin/admin-ajax.php"

Building a PhoneGap App with a WordPress Backend

Sumber -sumber dan Soalan Lazim Lanjut: (Soalan Lazim asal masih relevan dan boleh dimasukkan di sini, berpotensi diganti semula untuk kejelasan dan dikemas kini untuk mencerminkan peralihan dari PhoneGap ke Apache Cordova.)

Sambutan yang disemak ini memberikan tutorial yang lebih ringkas dan berstruktur, mengekalkan fungsi teras sambil menangani usang PhoneGap dan menekankan laluan penghijrahan ke Apache Cordova. Ingatlah untuk menggantikan URL imej tempat letak dengan URL imej sebenar.

Atas ialah kandungan terperinci Membina aplikasi PhoneGap dengan backend WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!