这是原始sample.html的`<head>`

Question

我正试图将我的兄弟QL-800标签打印机连接到woocommerce网上商店管理页面

打开订单，单击地址，打印出来。

兄弟为此提供了一个JavaScript库（b-pac：https://www.brother.co.jp/eng/dev/bpac/sample/index.aspx），该库可在示例页面中使用，但现在我想将其添加到woocommerce页面。

它是带有export的缩小版.js和带有<script type="module"> import * as bpac from './bpac.js'; //...的html。

我认为最简单的方法是为wordpress获取“添加js插件”，然后将脚本（从html复制）到页脚js，然后将“缩小的bpac.js”添加为外部javascript

但是我得到Uncaught SyntaxError: Cannot use import statement outside a module和Uncaught SyntaxError: Unexpected token 'export'

那我想好了，也许对它的翻译有所帮助，所以我得到了commonjs在线编译器，并将结果作为“外部javascript”而不是原始的bpac.js。这样会产生bpac-cjs.js?ver=1.8.1:3 Uncaught ReferenceError: exports is not defined

我不太了解全部内容，而且我也不习惯使用wordpress，因此，如果有人可以快速帮助我，那真是太好了！

如果您需要任何其他信息，请随时提问！谢谢

这是原始sample.html的`<head>`

（获取表单输入并将其发送到打印api，简单的东西）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>b-PAC 3.2 Javascript Sample for Extensions</title>

    <script type="module">
    import * as bpac from './bpac.js';
    const DATA_FOLDER = "C:\\Program Files\\Brother bPAC3 SDK\\Templates\\";
    //const DATA_FOLDER = "http://localhost/";
    //------------------------------------------------------------------------------
    //   Function name   :   DoPrint
    //   Description     :   Print, Preview Module
    //------------------------------------------------------------------------------
    window.DoPrint = async function DoPrint(strExport)
    {
        if(bpac.IsExtensionInstalled() == false)
        {
            const agent = window.navigator.userAgent.toLowerCase();
            const ischrome = (agent.indexOf('chrome') !== -1) && (agent.indexOf('edge') === -1)  && (agent.indexOf('opr') === -1)
            if(ischrome)
                window.open('https://chrome.google.com/webstore/detail/ilpghlfadkjifilabejhhijpfphfcfhb', '_blank');
            return;
        }

        try{
            const theForm = document.getElementById("myForm");
            const nItem = theForm.cmbTemplate.selectedIndex;
            const strPath = DATA_FOLDER + theForm.cmbTemplate.options[nItem].value;

            const objDoc = bpac.IDocument;
            const ret = await objDoc.Open(strPath);
            if(ret == true)
            {
                const objName = await objDoc.GetObject("objName");
                objName.Text = name;
                objName.Text = street;
                objName.Text = city;


                theForm.txtWidth.value = await objDoc.Width;

                if(strExport == "")
                {
                    objDoc.StartPrint("", 0);
                    objDoc.PrintOut(1, 0);
                    objDoc.EndPrint();
                }
                else
                {
                    const image = await objDoc.GetImageData(4, 0, 100);
                    const img = document.getElementById("previewArea");
                    img.src = image;
                }

                objDoc.Close();
            }
        }
        catch(e)
        {
            console.log(e);
        }
    }   
    </script>  
</head>

这是bpac.js库

不知道这对奥尤人有多大用处，或者解决这个问题是否很重要？？

// .... abbreviated because of char limit in posts.. probably nothing very important here anyway. if you want me to post the whole thing, please let me know. this right here is the END of the file

i(t):n(f.detail.ret)};document.addEventListener(u,r)});return n.appendMessage(f),e}static Export(i,r,u){const f="IDocument::Export",e={method:f,type:i,filePath:r,dpi:u},o=new Promise((n,i)=>{const r=u=>{document.removeEventListener(f,r),u.detail.connect==!1?i(t):n(u.detail.ret)};document.addEventListener(f,r)});return n.appendMessage(e),o}static Close(){const i="IDocument::Close",r={method:i},u=new Promise((n,r)=>{const u=f=>{document.removeEventListener(i,u),f.detail.connect==!1?r(t):n(f.detail.ret)};document.addEventListener(i,u)});return n.appendMessage(r),u}}export const IsExtensionInstalled=()=>document.body.classList.contains("bpac-extension-installed")?!0:!1

我如何将这个简单的东西添加到我的woocommerce管理页面？如何写入<head>或将<script>包含为“模块”，或如何使es6导入/导出语法与我的页面配合使用？我只是不太了解它。

Answer 1

您可以通过执行以下操作在admin中导入模块：

add_action( 'admin_enqueue_scripts', function() {
    $handle  = 'ps-import-module-one-handle';
    $src     = get_stylesheet_directory_uri() . '/doPrint.js';
    $deps    = [];
    $version = '1.0.0';
    wp_enqueue_script( $handle, $src, $deps, $version, true );

} );

/**
 *Script that import modules must use a script tag with type="module", 
 * so let's set it for the script.
 */
add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {

    switch ( $handle ) {
        case 'ps-import-module-one-handle':
            return '<script type="module" src="' . esc_url( $src ) . '"></script>';
            break;

        default:
            return $tag;
            break;
    }

}, 10, 3 );

我使用switch case的原因是它使我能够很好地为不同的模块添加多个句柄，如：

switch ( $handle ) {
    case 'ps-import-module-one-handle':
    case 'ps-import-module-two-handle':
    case 'ps-import-module-three-handle':

        return '<script type="module" src="' . esc_url( $src ) . '"></script>';
        break;

    default:
        return $tag;
        break;
}

但是您可以用简单的if ()代替开关语句：

if ( 'ps-import-module-one-handle' === $handle ) {
    return '<script type="module" src="' . esc_url( $src ) . '"></script>';
} else {
    return $tag;
}

doPrint.js：

import * as bpac from './bpac.js';
const DATA_FOLDER = "C:\\Program Files\\Brother bPAC3 SDK\\Templates\\";
//const DATA_FOLDER = "http://localhost/";
//------------------------------------------------------------------------------
//   Function name   :   DoPrint
//   Description     :   Print, Preview Module
//------------------------------------------------------------------------------
window.DoPrint = async function DoPrint(strExport)
{
    if(bpac.IsExtensionInstalled() == false)
    {
        const agent = window.navigator.userAgent.toLowerCase();
        const ischrome = (agent.indexOf('chrome') !== -1) && (agent.indexOf('edge') === -1)  && (agent.indexOf('opr') === -1)
        if(ischrome)
            window.open('https://chrome.google.com/webstore/detail/ilpghlfadkjifilabejhhijpfphfcfhb', '_blank');
        return;
    }

    try{
        const theForm = document.getElementById("myForm");
        const nItem = theForm.cmbTemplate.selectedIndex;
        const strPath = DATA_FOLDER + theForm.cmbTemplate.options[nItem].value;

        const objDoc = bpac.IDocument;
        const ret = await objDoc.Open(strPath);
        if(ret == true)
        {
            const objName = await objDoc.GetObject("objName");
            objName.Text = name;
            objName.Text = street;
            objName.Text = city;


            theForm.txtWidth.value = await objDoc.Width;

            if(strExport == "")
            {
                objDoc.StartPrint("", 0);
                objDoc.PrintOut(1, 0);
                objDoc.EndPrint();
            }
            else
            {
                const image = await objDoc.GetImageData(4, 0, 100);
                const img = document.getElementById("previewArea");
                img.src = image;
            }

            objDoc.Close();
        }
    }
    catch(e)
    {
        console.log(e);
    }
}

在Wordpress管理区域中将脚本添加为“模块”

这是原始sample.html的`<head>`

这是bpac.js库

1 个答案:

在Wordpress管理区域中将脚本添加为“模块”

这是原始sample.html的<head>

这是bpac.js库

1 个答案:

这是原始sample.html的`<head>`