Освободите производительность переднего плана и создайте собственный генератор кода формы

Element Vue.js

Цель этой статьи: научить вас создавать плагин VS Code, поддерживающий встроенные веб-страницы, реализовать автоматическую генерацию кода внешнего интерфейса для проектов Vue и как можно скорее реализовать свободу рыбалки.

Показать результаты

Без лишних слов, давайте посмотрим на окончательные результаты работы:

image


Освежает после просмотра анимация? Идём работать~~343665c082dccb3918d3210edc2a1882.jpeg

Шаг 1

Во-первых, нам нужен开源,拖拽式设计Визуальный конструктор, GitHub, поиск в облаке кода в один проход, уже много готовых продуктов, различные формы-создание, форма-дизайн, vue-форма, форма-генератор и т.д.;

Во-вторых, отфильтровать те, которые поддерживают генерацию кода от вышеперечисленных дизайнеров.Конечно, если нет генерации кода, то можно реализовать самому.Ведь они же все с открытым исходным кодом, верно?

Я выбрал конструктор VForm с открытым исходным кодом здесь:VForm GitHub
Зачем? Ха-ха. . . Выглядит знакомо, но так много функций~~Поверьте мне, нажмите на ссылку выше, и она вам снова понравится

Шаг 2/Шаг 2

Установите комплект разработки плагина VS Code:

npm install -g yo generator-code

После успешной установки запуститеyo codeСоздайте новый проект плагина:

quick-coder-first.png

Дайте ему простое и приятное имя — quick-coder, добавьте простое описание и выберите другие параметры по мере необходимости.

Давай, взглянем на сгенерированный проект плагина:

quick-coder-2.png

Здесь нужно сосредоточиться только на двух файлах:extension.js,package.json

extension.js, файл описания точки расширения плагина
package.json, свойства проекта, зависимости и файлы конфигурации плагинов

Второй шаг подошёл к концу, а затем начнётся третий шаг реализации кодирования плагина.

Шаг 3

Измените package.json, чтобы добавить команды запуска плагина, которые можно запустить из командной панели и проводника слева.

"activationEvents": [
    "onCommand:extension.openVFormMaker"
],
"contributes": {
    "commands": [{
        "command": "extension.openVFormMaker",
        "title": "打开VForm设计器"
    }],
    "menus": {
        "explorer/context": [{
            "command": "extension.openVFormMaker",
            "group": "navigation"
        }]
    }
},

Измените метод включения плагина для extension.js, только одну строку:

function activate(context) {
    require('./src/vform-loader')(context)
}

На данный момент мы еще не объяснили, как работает весь плагин генератора кода, но пришло время это сделать.
Мы надеемся, что при запуске плагина открывается панель WebView, и панель WebView загружает веб-страницу VForm через параметры конфигурации URL.Когда VForm генерирует код, он связывается с VS Code через postMessage, а VS Code отвечает за сохранение сгенерированный код как локальный файл.Ключевой код для достижения вышеуказанных требований находится в файле vform-loader.js..

Здесь есть еще два небольших вопроса:

  1. Может ли WebView напрямую загружать удаленные веб-страницы?
    ответне может, можно загружать только локальные файлы HTML.
  1. Так вот вопрос? Как WebView загружает HTML удаленной веб-страницы?
    Ответ такжеПростой, это встраивание фреймов в локальные файлы HTML, фреймы всемогущи - YYDS!

После решения вышеуказанных мелких кейсов давайте взглянем на код души всего плагина.

src\view\index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no"
    />
    <title>Quick Coder</title>
  </head>

  <body>
    <iframe id="frame" width="100%" height="100%" frameborder="0"></iframe>
    <script>
      window.onload = function () {
        const vscode = acquireVsCodeApi();
        const cmds = {
          setSrc: function (message) {
            var frame = document.getElementById("frame");
            frame.src = message.data.src;
          },
          writeFile: function (message) {
            vscode.postMessage(message);
          },
          openUrl: function (message) {
            vscode.postMessage(message);
          },
          setStorageItem: function (message) {
            vscode.postMessage(message);
          },
        };

        window.addEventListener("message", (event) => {
          const message = event.data;
          if (message && message.cmd) cmds[message.cmd](message);
        });
      };
    </script>
  </body>
</html>

src\vform-loader.js

const vscode = require('vscode')
const fs = require('fs')
const path = require('path')
const open = require('open')
const DB_PATH = path.join(__dirname,'./data/db.json')

function getExtensionFileAbsolutePath(context, relativePath) {
    return path.join(context.extensionPath, relativePath)
}

/**
 * 从某个HTML文件读取能被Webview加载的HTML内容
 * @param {*} context 上下文
 * @param {*} templatePath 相对于插件根目录的html文件相对路径
 */
function getWebViewContent(context, templatePath) {
    const resourcePath = getExtensionFileAbsolutePath(context, templatePath)
    const dirPath = path.dirname(resourcePath)
    let html = fs.readFileSync(resourcePath, 'utf-8')
    // vscode不支持直接加载本地资源，需要替换成其专有路径格式，这里只是简单的将样式和JS的路径替换
    html = html.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
        return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString() + '"'
    })
    return html
}

const methods = {
    writeFile: function (message, vscode, dirPath) {
        let { fileName, code } = message.data
        let filePath = path.join(dirPath, fileName)
        fs.writeFileSync(filePath, code)
        vscode.window.showInformationMessage(`文件${fileName}创建成功`)
    },
    openUrl: function (message, vscode, dirPath) {
        open(message.data.url)
    },
    setStorageItem: function(message, vscode, dirPath) {
        const { key, val } = message.data
        const str = fs.readFileSync(DB_PATH).toString()
        let json = {}
        if (str) {
            json = JSON.parse(str)
        }
        json[key] = val
        fs.writeFileSync(DB_PATH, JSON.stringify(json))
    },
}

module.exports = function (context) {
    context.subscriptions.push(vscode.commands.registerCommand('extension.openVFormMaker', (uri) => {
        if (uri) {
            let dirPath = uri.fsPath,
                stat = fs.lstatSync(dirPath)
            if (stat.isFile()) dirPath = path.dirname(dirPath)

            let pclintBar = vscode.window.createStatusBarItem()
            pclintBar.text = `目标文件夹：${dirPath}`
            pclintBar.show()

            const panel = vscode.window.createWebviewPanel(
                'vFormMaker',
                "VForm表单设计器",
                vscode.ViewColumn.One,
                {
                    enableScripts: true, // 启用JS，默认禁用
                    retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置
                }
            )
            panel.onDidChangeViewState(e => {
                if (panel.visible) {
                    pclintBar.show()
                } else {
                    pclintBar.hide()
                }
            })
            panel.webview.html = getWebViewContent(context, 'src/view/index.html')
            panel.webview.postMessage({
                cmd: 'setSrc',
                data: {
                    src: vscode.workspace.getConfiguration().get('VFormMaker.url') + '&t=' + new Date(),
                    db: JSON.parse(fs.readFileSync(DB_PATH).toString() || '{}')
                }
            })
            panel.webview.onDidReceiveMessage(message => {
                if (message.cmd && message.data) {
                    let method = methods[message.cmd]
                    if (method) method(message, vscode, dirPath)
                } else {
                    vscode.window.showInformationMessage(`没有与消息对应的方法`)
                }
            }, undefined, context.subscriptions)
            panel.onDidDispose(e => {
                pclintBar.dispose()
            })
        } else {
            vscode.window.showInformationMessage(`无法获取文件夹路径`)
        }
    }))
}

ОК~ Очень хорошо, я аплодирую большим парням, которые увидели это здесь 👏👏👏, я скоро увижу эффект запуска плагина! !

Наконец, измените файл package.json.contributesсвойства, добавьте конфигурацию параметра URL, готово! !

"contributes": {
    "configuration": {
        "type": "object",
        "title": "VForm设计器配置",
        "properties": {
            "VFormMaker.url": {
                "type": "string",
                "default": "http://120.92.142.115/?vscode=1",
                "description": "VForm设计器远程URL"
            }
        }
    },

Спешите нажать клавишу F5 в VS Code для отладки плагина и приятной работы 😤😤~~~

Шаг 4/Упаковка и выпуск

Установите инструмент для упаковки vsce

npm install -g vsce

запустить в проекте плагинаvsce packageкоманду, вы можете создать файл .vsix (вам будет предложено изменить файл README.md и добавить введение и инструкции по использованию плагина)

vsce package

Зарегистрируйте учетную запись VS Marketplace, загрузите файл .vsix и откройте его для всех пользователей VS Code:
VS marketplace

Позже/Наконец

Вкратце, мы встраиваем удаленную веб-страницу VForm через WebView и реализуем ожидаемые требования к общей генерации внешнего кода формы Vue (поддерживает Vue2 и Vue3), поскольку сам VForm является проектом с открытым исходным кодом и имеет хорошую масштабируемость. свободно расширяйте функции VForm, дополнительно реализуйте автоматическую генерацию внешнего кода для большего количества компонентов, таких как el-table, и реализуйте свободу рыбалки как можно скорее 🍺🍺🍺

последний из последних

Большие ребята, которые немного устали от написания плагинов, могут искать прямо в расширении VS Code.vform-makerилиvformAdmin

Наконец, прикрепите ссылку VForm крупнейшей в мире сети однополых знакомств:GitHub
Облако внутренних кодов синхронизации:Gitee

Исходный код всего проекта плагина для быстрого кодирования был отправлен, и большие ребята, которым он нужен, подберут его сами (не забудьте поставить звезду):GitHub

Категории