How to create a widget in Magento2

需求：创建一个上传图片以及填写图片信息的widget

1、widget也相当于一个module，所以首先创建module必要的文件目录

2、创建registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_Company',
    __DIR__
);

3、创建etc\module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Company" setup_version="1.0.0"> </module>
 </config>

4、创建etc\widget.xml

 <?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="vendor_company" class="Vendor\Company\Block\Demo">
    <label translate="true">Hot recommend</label>
    <description>aaaaaaaaaaaaaaaaaaaaaaaaa</description>
    <parameters>
        <parameter name="title" xsi:type="text" required="true" visible="true">
            <label translate="true">Image title</label>
        </parameter>
        <parameter name="image" xsi:type="block" required="true" visible="true">
            <label translate="true">Upload image</label>
            <block class="Sanv\Widgetdemo\Block\Adminhtml\Widget\ImageChooser">
                <data>
                    <item name="button" xsi:type="array">
                        <item name="open" xsi:type="string">Choose Image...</item>
                    </item>
                </data>
            </block>
        </parameter>
        <parameter name="short_description" xsi:type="text" required="false" visible="true">
            <label translate="true">Short Description</label>
        </parameter>
        <parameter name="template" xsi:type="select" required="false" visible="true">
            <label translate="true">Template</label>
            <value>widget/demo.phtml</value>
            <options>
                <option name="default" value="widget/demo.phtml" selected="true">
                    <label translate="true">Hot Recommend Demo Template</label>
                </option>
                <option name="newtodaydemo" value="widget/advertisements.phtml">
                    <label translate="true">Advertisements Template</label>
                </option>
            </options>
        </parameter>
    </parameters>
</widget>
</widgets>

 5、创建Block\Widget\Demo

<?php
namespace Vendor\Company\Block\Widget;
class Demo extends \Magento\Framework\View\Element\Template
    implements \Magento\Widget\Block\BlockInterface
{
   
    protected $_shortdesc;
    protected $_title;
    protected $_src;
    protected $_description;

    public function getTitle() {
        if (!$this->_title) {
            if ($this->getData('title')) {
                $this->_title = $this->getData('title');
            }
        }
        return $this->_title;
    }

}

6、创建Block\Adminhtml\Widget\ImageChooser.php

<?php
namespace Vendor\Company\Block\Adminhtml\Widget;

class ImageChooser extends \Magento\Backend\Block\Template
{
    /**
     * @var \Magento\Framework\Data\Form\Element\Factory
     */
    protected $_elementFactory;
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\Form\Element\Factory $elementFactory,
        array $data = []
    ) {
        $this->_elementFactory = $elementFactory;
        parent::__construct($context, $data);
    }
    /**
     * Prepare chooser element HTML
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
     * @return \Magento\Framework\Data\Form\Element\AbstractElement
     */
    public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $config = $this->_getData('config');
        $sourceUrl = $this->getUrl('cms/wysiwyg_images/index',
            ['target_element_id' => $element->getId(), 'type' => 'file']);
        $chooser = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')
            ->setType('button')
            ->setClass('btn-chooser')
            ->setLabel($config['button']['open'])
            ->setOnClick('MediabrowserUtility.openDialog(\''. $sourceUrl .'\')')
            ->setDisabled($element->getReadonly());
        $input = $this->_elementFactory->create("text", ['data' => $element->getData()]);
        $input->setId($element->getId());
        $input->setForm($element->getForm());
        $input->setClass("widget-option input-text admin__control-text");
        if ($element->getRequired()) {
            $input->addClass('required-entry');
        }
        $element->setData('after_element_html', $input->getElementHtml() . $chooser->toHtml());
        return $element;
    }
}

7、创建模板view/frontend/templates/widget/demo.phtml 和 ......../widget/advertisements.phtml

<div class="col-xs-3">
    <div>
        <a href="<?php echo $this->getHref(); ?>" title="<?php echo $this->getTitle(); ?>">
            <img src="<?php echo $this->getSrc();  ?>">
        </a>
    </div>
</div>

8、php bin/magento cache:flush 刷新缓存

9、这时候就可以在创建widget的地方看见 Hot Recommend选项