创建OWL组件

需要用到带有基础字段和视图的 Amos_Demo 的模块，可以在 Gitee 里的 DTCloud 开源社区/DTCloudv1.0/appstore 目录中找到 Amos_demo 模块。

1. 添加一个 JavaScript 文件/Amos_demo/static/src/js/component.js，定义新模块命名空间：

dtcloud.define('my.component', function (require) {
    "use strict";
 #::::::::::定义OWL工具类   
  const { Component } = owl;
  const { xml } = owl.tags;
 #::::::::::添加OWL组件及其基础模板
  class MyComponent extends Component {
    static template = xml`
        <div class="bg-info text-center p-2">
            <b> Welcome to dtcloud </b>
        </div>`
  }
#::::::::::初始化该组件并添加至网页客户端
   owl.utils.whenReady().then(() => {
        const app = new MyComponent();
        app.mount(document.body);
    });
});

2. 添加 XML 文件/Amos_demo/views/amos_demo.xml，并在资源中加载 JavaScript 组件如下：

<template id="assets_end" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script src="/Amos_Demo/static/src/js/component.js" type="text/javascript" />
    </xpath>
</template>

3. 安装/升级 Amos_demo 模块来应用所做的修改。在 DTCloud 中加载了我们的模块后，就可以看到下图所示的竖栏：