README

为什么？

实验目标。在尽可能简化的工程环境中寻找最先进的技术解决方案。

安装

composer.json

    "repositories": [
        {
            "type": "git",
            "url": "https://github.com/proklung/bitrix.js.extensions"
        }
    ]

composer require proklung/bitrix.js.extensions

证明

https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=43&LESSON_ID=11981

功能

组件

一对包装器

proklung.extension.run

启动和初始化 JS 扩展。实际上是对 php \Bitrix\Main\UI\Extension::load('namespace.extension') 的包装

$APPLICATION->IncludeComponent('proklung:extension.run',
    '',
    [
        'EXTENSION' => 'proklung.bxui', // JS extension
        'SELECTOR' => 'uix'             // ID

    ],
    false
);

或（无模板）

$APPLICATION->IncludeComponent('proklung:extension.run',
    '',
    [
        'EXTENSION' => 'proklung.webpacked',
        'NO_TEMPLATE' => true

    ],
    false
);

proklung.app

$APPLICATION->IncludeComponent('proklung:app',
    '',
    [],
    false
);

将 Vue 绑定到 app 选择器（例如，页面的最顶层包装器）

JS 扩展

bxui

一组标准 Bitrix UI，包装成 js 扩展格式。来自 https://github.com/astrotrain55/vue-bitrix24 的分支。删除了不必要的部分，并针对本地需求进行了处理。

vueinvoker

"用于在页面上初始化 Vue 组件。它简化了在无法使用单个“根”Vue 实例的经典 Web 应用程序中使用 Vue 的过程。"

<div class="vue-component" data-component="DemoApp" data-initial='{"test": "data"}'></div>

打包在 extension 中，调用方式

$APPLICATION->IncludeComponent('proklung:extension.run',
    '',
    [
        'EXTENSION' => 'proklung.vueinvoker',
        'NO_TEMPLATE' => true

    ],
    false
);

webpacked

为使用 Webpack 完全构建的“扩展”开发模板。

ui-select

包装了“选择实体对话框”的 Bitrix24。

调用示例（通过组件包装器）

              $APPLICATION->IncludeComponent('proklung:ui_select',
                    'bitrix24',
                    [
                        'SELECT_ID' => 'cities',
                        'DISABLED' => true,
                        'VALUES' => (array)$data["ALL_CITIES_LIST"],
                        'SELECTED_VALUE' => 'Москва',
                        'MULTIPLE' => false,
                        'PLACEHOLDER' => 'Города'
                    ],
                    false
                );