中文字幕亚洲精品,亚洲国产日韩女人aaaaaa毛片在线 ,国产精品人成福利视频

本節(jié)重點(diǎn)：在 WordPress 中將 PHP 準(zhǔn)備好的數(shù)據(jù)傳給 JS 文件，并在 JS 中將傳來的值打印瀏覽器控制臺中

書接上回，我們使用 Vue3 技術(shù)撰寫前端，為了與后臺進(jìn)行交互，包括從前端加載的開始獲取初始設(shè)置數(shù)據(jù)等，都需要從 PHP 中獲取數(shù)據(jù)，但我們開發(fā)的項目打包后，只有 JS 文件，因此，開發(fā)的第一件事就是解決 PHP 傳值給 JS 的問題。

為了方便我們的功能實現(xiàn)，我們開發(fā)一個簡單的插件。簡單介紹下軟件環(huán)境，都是三平臺通用的，大家能都用

編輯器：Visual Studio Code
環(huán)境：Local

目標(biāo)

通過 PHP，將所需數(shù)據(jù)傳給 JS 文件，并在 JS 文件中打印出來。

準(zhǔn)備環(huán)境

VS Code 下載后安裝使用即可。
Local 下載安裝后，可點(diǎn)擊左下角“+”按鈕，一路默認(rèn)選擇，填寫站點(diǎn)名稱即可.
創(chuàng)建后，如下所示，

第一節(jié)：Vue3 開發(fā)WordPress設(shè)置選項 - PHP傳數(shù)據(jù)給JS

左側(cè)列表選擇自己創(chuàng)建的站點(diǎn)，

點(diǎn)擊 Go to site folder 進(jìn)入站點(diǎn)文件夾，選擇 app → public 即可看到站點(diǎn)根目錄文件
點(diǎn)擊 WP Admin 即可進(jìn)入站點(diǎn)后臺

我們先在 WordPress 站點(diǎn)的wp-content/plugins目錄下新建文件夾 vue-spa ，我們在這里撰寫代碼，實現(xiàn)我們的功能。

準(zhǔn)備插件信息并啟用

現(xiàn)在，我們在 vue-spa 文件夾下添加新文件“vue-spa.php”文件，寫入以下內(nèi)容

//vue-spa.php
<?php
/*
Plugin Name: Vue - SPA 
Plugin URI: http://m.kartiktrivedi.com
Description: 將vue構(gòu)建的頁面嵌入WordPress 中并產(chǎn)生交互
Author: Muze
Author URI: http://m.kartiktrivedi.com
Version: 1.0.0
*/

分別代表：

插件名
插件介紹網(wǎng)址
插件功能介紹
插件作者
插件作者介紹網(wǎng)站
插件版本

現(xiàn)在，我們的插件準(zhǔn)備好了，點(diǎn)擊 WP Admin 即可進(jìn)入站點(diǎn)后臺，進(jìn)入插件頁面，選擇 Vue – SPA 插件啟用吧

準(zhǔn)備菜單

Dashicons | WordPress 圖標(biāo)

為了驗證我們準(zhǔn)備的數(shù)據(jù)，需要一個地方來展示，方便驗證，就做個菜單出來。承接上文，添加以下代碼

//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實際菜單項顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');
//菜單回調(diào) - 展示的內(nèi)容

function vuespa_menu_page_display()
{
?>
    <!--在默認(rèn)WordPress“包裝”容器中創(chuàng)建標(biāo)題-->
    <div class="wrap">
        <!--標(biāo)題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點(diǎn)-->
        <div id="vuespa">此內(nèi)容將在掛載Vue后被替換</div>
    </div>
<?php

} // vuespa_menu_page_display

代碼的用途我放注釋了，大家可以看看，主要作用是，在 WordPress 后臺創(chuàng)建一個菜單，并展示一段話。

其中的 class 樣式class="wrap"是 WordPress 自帶的，有利于頁面的一致性。
其中的圖標(biāo)，可在本節(jié)的開始提供的網(wǎng)址中獲取，是 WordPress 的自帶圖標(biāo)

現(xiàn)在，我們刷新 WordPress 后臺，可以找到 VueSpa 菜單，點(diǎn)擊打開即可。

若沒有此菜單，請檢查是否啟用了 Vue – SPA 插件

準(zhǔn)備JS文件接收數(shù)據(jù)

為了確定 PHP 傳給 JS 的數(shù)據(jù)是成功的，我們需要在 JS 文件中進(jìn)行驗證。

我們在插件文件夾下新建文件夾 vite 和 dist 文件夾，并新建 index.js 和index.css 文件，結(jié)構(gòu)類似這樣

vue-spa/vite/dist/index.js
vue-spa/vite/dist/index.css

index.js 寫入以下代碼

//vite/dist/index.js
alert("我加載啦 - Npcink")

index.css 暫時不寫

現(xiàn)在，我們需要在 vue-spa.php 文件中載入 index.js 文件，我們在 vue-spa.php 文件中添加以下代碼

//載入所需 JS 和 CSS 資源
function vuespa_load_vues($hook)
{
    //判斷當(dāng)前頁面是否是指定頁面，是則繼續(xù)加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '52';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.js', array(), $ver, false);

}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');

現(xiàn)在，我們只有打開 VueSpa 菜單才會有彈窗。此時，我們就加載了 JS 文件。

準(zhǔn)備數(shù)據(jù)

我們通過PHP準(zhǔn)備數(shù)據(jù)，在JS文件中通過彈窗顯示出來。

我們在 vue-spa.php 頁面底部添加以下代碼準(zhǔn)備數(shù)據(jù)

//準(zhǔn)備待傳輸?shù)臄?shù)據(jù)
function vuespa_data()
{
    $person = [
        "str" => "Hello, world!",
        "num" => 25,
        "city" => [1, 2, 3, 4, 5],
    ];
    return $person;
}

為了看到數(shù)據(jù)是否做好，我們修改下菜單回調(diào)函數(shù) vuespa_menu_page_display() ，先用PHP將數(shù)據(jù)展示看看

//菜單回調(diào) - 展示的內(nèi)容
function vuespa_menu_page_display()
{
?>
    <!--在默認(rèn)WordPress“包裝”容器中創(chuàng)建標(biāo)題-->
    <div class="wrap">
        <!--標(biāo)題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點(diǎn)-->
        <div id="vuespa">此內(nèi)容將在掛載Vue后被替換</div>
    </div>
<?php

//展示準(zhǔn)備的數(shù)據(jù)
    echo "<pre>";
    print_r(vuespa_data());
    echo "</pre>";
} // vuespa_menu_page_display

效果如下：

數(shù)據(jù)展示正常，

傳遞數(shù)據(jù)

wp_localize_script() | Function | WordPress Developer Resources

傳遞數(shù)據(jù)，我們要用到 wp_localize_script()函數(shù)，修改我們載入JS的函數(shù) vuespa_load_vues()

//載入所需 JS 和 CSS 資源 并傳遞數(shù)據(jù)
function vuespa_load_vues($hook)
{
    //判斷當(dāng)前頁面是否是指定頁面，是則繼續(xù)加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '52';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.js', array(), $ver, false);

    $pf_api_translation_array = array(
        'route' => esc_url_raw(rest_url()),     //路由
        'nonce' => wp_create_nonce('wp_rest'), //驗證標(biāo)記
        'data' => vuespa_data(),               //自定義數(shù)據(jù)
    );
    wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項目
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');

再修改我們的 index.js 文件，將拿到的數(shù)據(jù)打印出來

//vite/dist/index.js
console.table(dataLocal);

在WordPress 中，點(diǎn)擊VueSpa菜單，使用瀏覽器的開發(fā)者工具，即可在控制臺中看到傳遞的數(shù)據(jù)

其中，各個數(shù)據(jù)的用途可見注釋

    'route' => esc_url_raw(rest_url()),     //路由
    'nonce' => wp_create_nonce('wp_rest'), //驗證標(biāo)記
    'data' => vuespa_data(),               //自定義數(shù)據(jù)

   nonce: "82711b7680"
   route: "http://localhost:10004/wp-json/"

我們通過傳來的路由，知道要發(fā)出 POST 請求的網(wǎng)址
我們通過傳來的驗證標(biāo)記，在發(fā)出 POST 請求時進(jìn)行身份驗證
我們通過傳來的data數(shù)據(jù)，在 JS 文件中進(jìn)行進(jìn)一步的操作

補(bǔ)充

vue-spa.php 本節(jié)完整代碼

<?php
/*
Plugin Name: Vue - SPA 
Plugin URI: http://m.kartiktrivedi.com
Description: 將vue構(gòu)建的頁面嵌入WordPress 中并產(chǎn)生交互
Author: Muze
Author URI: http://m.kartiktrivedi.com
Version: 1.0.0
*/


//創(chuàng)建一個菜單
function vuespa_create_menu_page()
{
    add_menu_page(
        'VueSpa選項',                   // 此菜單對應(yīng)頁面上顯示的標(biāo)題
        'VueSpa',                      // 要為此實際菜單項顯示的文本
        'administrator',               // 哪種類型的用戶可以看到此菜單
        'vuespa_id',                   //  此菜單項的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈現(xiàn)此頁面的菜單時要調(diào)用的函數(shù)的名稱
        'dashicons-admin-customizer',  //圖標(biāo) - 默認(rèn)圖標(biāo)
        '500.1',                       //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');

//菜單回調(diào) - 展示的內(nèi)容
function vuespa_menu_page_display()
{
?>
    <!--在默認(rèn)WordPress“包裝”容器中創(chuàng)建標(biāo)題-->
    <div class="wrap">
        <!--標(biāo)題-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue掛載點(diǎn)-->
        <div id="vuespa">此內(nèi)容將在掛載Vue后被替換</div>
    </div>
<?php

    //展示準(zhǔn)備的數(shù)據(jù)
    echo "<pre>";
    print_r(vuespa_data());
    echo "</pre>";
} // vuespa_menu_page_display



//載入所需 JS 和 CSS 資源 并傳遞數(shù)據(jù)
function vuespa_load_vues($hook)
{
    //判斷當(dāng)前頁面是否是指定頁面，是則繼續(xù)加載
    if ('toplevel_page_vuespa_id' != $hook) {
        return;
    }
    //版本號
    $ver = '52';
    //加載到頁面頂部
    wp_enqueue_style('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.css', array(), $ver, false);
    wp_enqueue_script('vite', plugin_dir_url(__FILE__) . 'vite/dist/index.js', array(), $ver, false);

    $pf_api_translation_array = array(
        'route' => esc_url_raw(rest_url()),     //路由
        'nonce' => wp_create_nonce('wp_rest'), //驗證標(biāo)記
        'data' => vuespa_data(),               //自定義數(shù)據(jù)
    );
    wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項目
}
//樣式加載到后臺
add_action('admin_enqueue_scripts', 'vuespa_load_vues');


//準(zhǔn)備待傳輸?shù)臄?shù)據(jù)
function vuespa_data()
{
    $person = [
        "str" => "Hello, world! - Npcink",
        "num" => 25,
        "city" => [1, 2, 3, 4, 5],
    ];
    return $person;
}

獲取hook變量

若您想知道當(dāng)前頁面的hook變量，可在 vue-spa.php 頁面底部添加以下代碼獲取

function wpdocs_myselective_css_or_js($hook)
{
    echo '<h1 style="color: crimson;text-align: center;">' . esc_html($hook) . '</h1>';
}
//獲取當(dāng)前頁面hook
add_action('admin_enqueue_scripts', 'wpdocs_myselective_css_or_js');

{{userData.name}}已認(rèn)證

第一節(jié)：Vue3 開發(fā)WordPress設(shè)置選項 – PHP傳數(shù)據(jù)給JS

目標(biāo)

準(zhǔn)備環(huán)境

準(zhǔn)備插件信息并啟用

準(zhǔn)備菜單

準(zhǔn)備JS文件接收數(shù)據(jù)

準(zhǔn)備數(shù)據(jù)

傳遞數(shù)據(jù)

補(bǔ)充

vue-spa.php 本節(jié)完整代碼

獲取hook變量

Woo PayGate – WordPress WooCommerce商城支付接口插件

Responsive Lightbox & Gallery – 自適應(yīng)燈箱和圖庫WordPres插件

Red Line – WordPress 文檔主題[開源]

WordPress 技巧：在后臺顯示日志瀏覽數(shù)

WordPress 主題教程：從零開始制作 WordPress 主題

怎么將自定義文本添加至登錄界面？ – WordPress教程

{{userData.name}}已認(rèn)證

目標(biāo)

準(zhǔn)備環(huán)境

準(zhǔn)備插件信息并啟用

準(zhǔn)備菜單

準(zhǔn)備JS文件接收數(shù)據(jù)

準(zhǔn)備數(shù)據(jù)

傳遞數(shù)據(jù)

補(bǔ)充

vue-spa.php 本節(jié)完整代碼

獲取hook變量

第三節(jié)：Vue3 開發(fā)WordPress設(shè)置選項 - 從篩選功能研究前后臺數(shù)據(jù)交互

第二節(jié)：Vue3 開發(fā)WordPress設(shè)置選項- 從輸入框開始，配置基礎(chǔ)設(shè)置選項

02：講透WordPress 菜單開發(fā) - 權(quán)限控制與加載指定JS

第五節(jié)： Vue3 開發(fā)WordPress設(shè)置選項 - 使用Vite打包JS資源