在Svelte中安全高效地使用WordPress（PHP）变量

<?php
/**
 * 将Svelte应用脚本和WordPress数据排队
 */
function my_svelte_app_scripts() {
    // 注册Svelte编译后的主JS文件
    // 假设Svelte输出的bundle.js位于主题的build目录下
    wp_enqueue_script(
        'my-svelte-app', // 脚本的唯一句柄
        get_template_directory_uri() . '/build/bundle.js',
        array(), // 依赖项数组，如果Svelte有依赖其他WordPress注册的脚本，可在此指定
        '1.0.0', // 版本号，有助于缓存管理
        true // 在页脚加载脚本
    );

    // 准备要传递给Svelte的数据
    $my_app_data = array(
        'text_domain' => 'my-custom-plugin', // 文本域示例
        'greeting' => __('Hello from WordPress!', 'my-custom-plugin'), // 国际化字符串示例
        'product_id' => get_the_ID(), // 示例：获取当前文章或产品ID
        'ajax_url' => admin_url('admin-ajax.php'), // WordPress AJAX URL
        'nonce' => wp_create_nonce('my_svelte_app_nonce'), // 安全验证码
        'is_user_logged_in' => is_user_logged_in() ? true : false, // 用户登录状态
        'custom_settings' => array( // 复杂数据结构示例
            'items_per_page' => get_option('posts_per_page'),
            'api_key' => 'YOUR_PUBLIC_API_KEY_HERE' // 注意：敏感信息不宜直接暴露
        )
    );

    // 将PHP数据本地化到'my-svelte-app'脚本
    // 'mySvelteAppData' 将是前端JavaScript中全局对象的名称
    wp_localize_script(
        'my-svelte-app', // 脚本的句柄，必须与wp_enqueue_script中的句柄一致
        'mySvelteAppData', // 全局JavaScript对象的名称，Svelte中将通过此名称访问
        $my_app_data // 要传递的PHP数组
    );
}
add_action('wp_enqueue_scripts', 'my_svelte_app_scripts');

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

    // 定义响应式变量来存储从WordPress获取的数据
    let greetingText = 'Loading...';
    let productId = null;
    let ajaxUrl = '';
    let isUserLoggedIn = false;
    let customSettings = {};

    onMount(() => {
        // 确保window.mySvelteAppData存在
        if (typeof window.mySvelteAppData !== 'undefined') {
            greetingText = window.mySvelteAppData.greeting || 'Default Greeting';
            productId = window.mySvelteAppData.product_id;
            ajaxUrl = window.mySvelteAppData.ajax_url;
            isUserLoggedIn = window.mySvelteAppData.is_user_logged_in;
            customSettings = window.mySvelteAppData.custom_settings || {};

            // 可以直接使用nonce进行AJAX请求
            const nonce = window.mySvelteAppData.nonce;
            console.log('WordPress Nonce:', nonce);

            console.log('Svelte app loaded with WordPress data:', window.mySvelteAppData);
        } else {
            console.warn('`mySvelteAppData` is not defined. Please check your `wp_localize_script` setup.');
            greetingText = 'Error: Data not loaded.';
        }
    });
</script>

<style>
    /* 你的Svelte组件样式 */
    div {
        font-family: Arial, sans-serif;
        padding: 20px;
        border: 1px solid #eee;
        border-radius: 8px;
        max-width: 600px;
        margin: 20px auto;
        background-color: #f9f9f9;
    }
    h1 {
        color: #333;
    }
    p {
        color: #555;
    }
    strong {
        color: #0073aa; /* WordPress Blue */
    }
</style>

<div>
    <h1>{greetingText}</h1>
    <p>当前产品ID: <strong>{productId || 'N/A'}</strong></p>
    <p>WordPress AJAX URL: <strong>{ajaxUrl || 'N/A'}</strong></p>
    <p>用户是否登录: <strong>{isUserLoggedIn ? '是' : '否'}</strong></p>
    <p>自定义设置 - 每页显示项数: <strong>{customSettings.items_per_page || 'N/A'}</strong></p>
    <p>自定义设置 - API Key: <strong>{customSettings.api_key || 'N/A'}</strong></p>
    <p><em>这些数据均来自WordPress后端。</em></p>
</div>