第一節(jié)：WordPress 通過 REST API 和 Vue3 開發(fā)設(shè)置選項(xiàng) - PHP傳數(shù)據(jù)給JS
書接上回，我們使用 Vue3 技術(shù)撰寫前端，為了與后臺(tái)進(jìn)行交互，包括從前端加載的開始獲取初始設(shè)置數(shù)據(jù)等，都需要從 PHP 中獲取數(shù)據(jù)，但我們開發(fā)的項(xiàng)目打包后，只有 JS 文件，因此，開發(fā)的第一件事就是解決 PHP 傳值給 JS 的問題。
為了方便我們的功能實(shí)現(xiàn)，我們開發(fā)一個(gè)簡(jiǎn)單的插件。簡(jiǎn)單介紹下軟件環(huán)境，都是三平臺(tái)通用的，大家能都用
編輯器：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)建后，如下所示，
左側(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)后臺(tái)
我們先在 WordPress 站點(diǎn)的wp-content/plugins目錄下新建文件夾 vue-spa ，我們?cè)谶@里撰寫代碼，實(shí)現(xiàn)我們的功能。
準(zhǔn)備插件信息并啟用
現(xiàn)在，我們?cè)?vue-spa 文件夾下添加新文件“vue-spa.php”文件，寫入以下內(nèi)容
//vue-spa.php
<?php
/*
Plugin Name: Vue - SPA
Plugin URI: https://www.npc.ink
Description: 將vue構(gòu)建的頁面嵌入WordPress 中并產(chǎn)生交互
Author: Muze
Author URI: https://www.npc.ink
Version: 1.0.0
*/
分別代表：
插件名
插件介紹網(wǎng)址
插件功能介紹
插件作者
插件作者介紹網(wǎng)站
插件版本
現(xiàn)在，我們的插件準(zhǔn)備好了，點(diǎn)擊 WP Admin 即可進(jìn)入站點(diǎn)后臺(tái)，進(jìn)入插件頁面，選擇 Vue - SPA 插件啟用吧
準(zhǔn)備菜單
Dashicons | WordPress 圖標(biāo)
為了驗(yàn)證我們準(zhǔn)備的數(shù)據(jù)，需要一個(gè)地方來展示，方便驗(yàn)證，就做個(gè)菜單出來。承接上文，添加以下代碼
//創(chuàng)建一個(gè)菜單
function vuespa_create_menu_page()
{
? ?add_menu_page(
? ? ? ?'VueSpa選項(xiàng)', ? ? ? ? ? ? ? ? ? // 此菜單對(duì)應(yīng)頁面上顯示的標(biāo)題
? ? ? ?'VueSpa', ? ? ? ? ? ? ? ? ? ? ?// 要為此實(shí)際菜單項(xiàng)顯示的文本
? ? ? ?'administrator', ? ? ? ? ? ? ? // 哪種類型的用戶可以看到此菜單
? ? ? ?'vuespa_id', ? ? ? ? ? ? ? ? ? // ?此菜單項(xiàng)的唯一ID（即段塞）
? ? ? ?'vuespa_menu_page_display', ? ?// 呈現(xiàn)此頁面的菜單時(shí)要調(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 后臺(tái)創(chuàng)建一個(gè)菜單，并展示一段話。
其中的 class 樣式
class="wrap"是 WordPress 自帶的，有利于頁面的一致性。其中的圖標(biāo)，可在本節(jié)的開始提供的網(wǎng)址中獲取，是 WordPress 的自帶圖標(biāo)
現(xiàn)在，我們刷新 WordPress 后臺(tái)，可以找到 VueSpa 菜單，點(diǎn)擊打開即可。
若沒有此菜單，請(qǐng)檢查是否啟用了 Vue - SPA 插件
準(zhǔn)備JS文件接收數(shù)據(jù)
為了確定 PHP 傳給 JS 的數(shù)據(jù)是成功的，我們需要在 JS 文件中進(jìn)行驗(yàn)證。
我們?cè)诓寮募A下新建文件夾 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 暫時(shí)不寫
現(xiàn)在，我們需要在 vue-spa.php 文件中載入 index.js 文件，我們?cè)?vue-spa.php 文件中添加以下代碼
//載入所需 JS 和 CSS 資源
function vuespa_load_vues($hook)
{
? ?//判斷當(dāng)前頁面是否是指定頁面，是則繼續(xù)加載
? ?if ('toplevel_page_vuespa_id' != $hook) {
? ? ? ?return;
? ?}
? ?//版本號(hào)
? ?$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);
}
//樣式加載到后臺(tái)
add_action('admin_enqueue_scripts', 'vuespa_load_vues');
現(xiàn)在，我們只有打開 VueSpa 菜單才會(huì)有彈窗。此時(shí)，我們就加載了 JS 文件。
準(zhǔn)備數(shù)據(jù)
我們通過PHP準(zhǔn)備數(shù)據(jù)，在JS文件中通過彈窗顯示出來。
我們?cè)?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;
? ?}
? ?//版本號(hào)
? ?$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'), //驗(yàn)證標(biāo)記
? ? ? ?'data' => vuespa_data(), ? ? ? ? ? ? ? //自定義數(shù)據(jù)
? ?);
? ?wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項(xiàng)目
}
//樣式加載到后臺(tái)
add_action('admin_enqueue_scripts', 'vuespa_load_vues');
再修改我們的 index.js 文件，將拿到的數(shù)據(jù)打印出來
//vite/dist/index.js
console.table(dataLocal);
在WordPress 中，點(diǎn)擊VueSpa菜單，使用瀏覽器的開發(fā)者工具，即可在控制臺(tái)中看到傳遞的數(shù)據(jù)
其中，各個(gè)數(shù)據(jù)的用途可見注釋
? ?'route' => esc_url_raw(rest_url()), ? ? //路由
? ?'nonce' => wp_create_nonce('wp_rest'), //驗(yàn)證標(biāo)記
? ?'data' => vuespa_data(), ? ? ? ? ? ? ? //自定義數(shù)據(jù) ? nonce: "82711b7680"
? route: "http://localhost:10004/wp-json/"
我們通過傳來的路由，知道要發(fā)出 POST 請(qǐng)求的網(wǎng)址
我們通過傳來的驗(yàn)證標(biāo)記，在發(fā)出 POST 請(qǐng)求時(shí)進(jìn)行身份驗(yàn)證
我們通過傳來的data數(shù)據(jù)，在 JS 文件中進(jìn)行進(jìn)一步的操作
補(bǔ)充
vue-spa.php 本節(jié)完整代碼
<?php
/*
Plugin Name: Vue - SPA
Plugin URI: https://www.npc.ink
Description: 將vue構(gòu)建的頁面嵌入WordPress 中并產(chǎn)生交互
Author: Muze
Author URI: https://www.npc.ink
Version: 1.0.0
*/
//創(chuàng)建一個(gè)菜單
function vuespa_create_menu_page()
{
? ?add_menu_page(
? ? ? ?'VueSpa選項(xiàng)', ? ? ? ? ? ? ? ? ? // 此菜單對(duì)應(yīng)頁面上顯示的標(biāo)題
? ? ? ?'VueSpa', ? ? ? ? ? ? ? ? ? ? ?// 要為此實(shí)際菜單項(xiàng)顯示的文本
? ? ? ?'administrator', ? ? ? ? ? ? ? // 哪種類型的用戶可以看到此菜單
? ? ? ?'vuespa_id', ? ? ? ? ? ? ? ? ? // ?此菜單項(xiàng)的唯一ID（即段塞）
? ? ? ?'vuespa_menu_page_display', ? ?// 呈現(xiàn)此頁面的菜單時(shí)要調(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;
? ?}
? ?//版本號(hào)
? ?$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'), //驗(yàn)證標(biāo)記
? ? ? ?'data' => vuespa_data(), ? ? ? ? ? ? ? //自定義數(shù)據(jù)
? ?);
? ?wp_localize_script('vite', 'dataLocal', $pf_api_translation_array); //傳給vite項(xiàng)目
}
//樣式加載到后臺(tái)
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');
最新文章
后續(xù)文章持續(xù)撰寫中，點(diǎn)個(gè)關(guān)注，獲取平臺(tái)最新文章推送。
技術(shù)有限，還望諸位協(xié)助勘誤，于評(píng)論區(qū)指出，
常一文多發(fā)，最新勘定和增補(bǔ)文章于下方鏈接給出
https://www.npc.ink/277254.html
