如何在Svelte应用中集成WordPress PHP变量和字符串

<?php
/**
 * 注册并排队Svelte脚本，并本地化数据。
 */
function my_svelte_app_scripts() {
    // 假设你的Svelte应用编译后的JS文件位于 'build/bundle.js'
    // 确保 'my-svelte-app-script' 是一个唯一的句柄
    wp_enqueue_script(
        'my-svelte-app-script',
        get_template_directory_uri() . '/build/bundle.js', // 或 plugins_url()
        array('jquery'), // Svelte应用可能不依赖jQuery，根据实际情况调整
        '1.0.0',
        true // 在</body>标签前加载
    );

    // 准备要传递给Svelte的数据
    $svelte_data = array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('my_svelte_app_nonce'),
        'texts'    => array(
            'greeting' => __('Hello from WordPress!', 'my-text-domain'),
            'buttonText' => __('Click Me', 'my-text-domain'),
            'configuratorTitle' => __('Product Configurator', 'my-text-domain')
        ),
        'productOptions' => array(
            'option1' => get_option('my_product_setting_1'),
            'option2' => get_option('my_product_setting_2')
        ),
        'currentUserId' => get_current_user_id(),
        'isUserLoggedIn' => is_user_logged_in()
    );

    // 使用 wp_localize_script 将数据传递给 Svelte 脚本
    // 'my-svelte-app-script' 是脚本的句柄
    // 'MySvelteAppData' 是在JavaScript中访问数据时使用的全局对象名称
    wp_localize_script(
        'my-svelte-app-script',
        'MySvelteAppData',
        $svelte_data
    );
}
add_action('wp_enqueue_scripts', 'my_svelte_app_scripts');
add_action('admin_enqueue_scripts', 'my_svelte_app_scripts'); // 如果需要在后台使用
?>

<script>
    import { onMount } from 'svelte';

    let greetingText = '';
    let configuratorTitle = '';
    let currentUserId = 0;
    let isUserLoggedIn = false;
    let productOption1 = '';
    let ajaxUrl = '';

    onMount(() => {
        // 确保 MySvelteAppData 全局对象已存在
        if (typeof window.MySvelteAppData !== 'undefined') {
            const data = window.MySvelteAppData;
            greetingText = data.texts.greeting;
            configuratorTitle = data.texts.configuratorTitle;
            currentUserId = data.currentUserId;
            isUserLoggedIn = data.isUserLoggedIn;
            productOption1 = data.productOptions.option1;
            ajaxUrl = data.ajax_url;

            console.log('WordPress Data loaded:', data);
        } else {
            console.warn('MySvelteAppData is not defined. Ensure wp_localize_script is correctly set up.');
        }
    });

    function handleClick() {
        alert(window.MySvelteAppData.texts.buttonText + ' User ID: ' + currentUserId);
        // 示例：可以向WordPress AJAX端点发送请求
        // fetch(ajaxUrl, {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/x-www-form-urlencoded'
        //     },
        //     body: new URLSearchParams({
        //         action: 'my_custom_ajax_action',
        //         nonce: window.MySvelteAppData.nonce,
        //         data: 'some_data_from_svelte'
        //     })
        // }).then(res => res.json()).then(console.log);
    }
</script>

<style>
    .container {
        font-family: Arial, sans-serif;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    h2 {
        color: #333;
    }
    p {
        color: #666;
    }
    button {
        padding: 10px 15px;
        background-color: #0073aa;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    button:hover {
        background-color: #005177;
    }
</style>

<div class="container">
    <h2>{configuratorTitle || 'Loading Configurator...'}</h2>
    <p>{greetingText || 'Loading greeting...'}</p>
    <p>当前用户ID: {currentUserId}</p>
    <p>用户是否登录: {isUserLoggedIn ? '是' : '否'}</p>
    <p>产品选项1: {productOption1}</p>
    <button on:click={handleClick}>{window.MySvelteAppData?.texts.buttonText || 'Loading Button...'}</button>
</div>