1 menu菜单
2 search搜索框
3 select下拉选择按钮
4 toolbar工具栏
5 divider分隔器
一 menu菜单
提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。HML中的菜单不会直接显示在界面中，需要调用其show(x, y)方法才会弹出显示，该方法有两个参数指定菜单弹窗的位置，x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。
菜单中某个项被点击选中时触发selected（value）事件，返回的value值为option子组件的value属性。
示例
<!-- menupage.hml --><div class="container"> <text class="title" @click="showPopupMenu"> Hello {{ title }} </text> <menu id="menu" @selected="menuSelected"> <option value="item1">菜单一</option> <option value="item2">菜单二</option> <option value="item3">菜单三</option> </menu></div>
/* menupage.css */.container { flex-direction: column; justify-content: center; align-items: center;}.title { font-size: 30px; text-align: center; width: 200px; height: 100px;}
// menupage.jsimport prompt from '@system.prompt';export default { data: { title: 'World' }, menuSelected(e) { prompt.showToast({ message: e.value }); }, showPopupMenu() { this.$element('menu').show({x:280, y:180}); }}
二 search搜索框
提供搜索框组件，用于提供用户搜索内容的输入区域。通过常用属性hint设置搜索提示文字，value设置搜索文本值，searchbutton设置搜索框末尾搜索按钮文本值。
search支持的事件很多，chang(text:newText):输入内容发生变化时触发，submit(text:submitText):点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。
示例
<!-- searchpage.hml --><div class="container"> <search id="search" hint="请输入搜索内容" searchbutton="搜索" @submit="submit" @change="change"></search></div>
/* searchpage.css */.container { display: flex; justify-content: center; align-items: center; left: 0px; top: 0px; width: 454px; height: 454px;}
// searchpage.jsimport prompt from '@system.prompt';export default { submit(e) { prompt.showToast({ message: e.value }); }, change(e) { prompt.showToast({ message: e.value }); }}
三 select下拉选择按钮
下拉选择按钮，可让用户在多个选项之间选择。
下拉选择新值后触发该事件change(newValue)，newValue的值为子组件option的value属性值。
示例
<!-- selectpage.hml --><div class="container"> <select @change="changeItem"> <option value="选项一">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select></div>
// selectpage.jsimport prompt from '@system.prompt';export default { changeItem(e) { prompt.showToast({ message: e.value }); }}
注：搜索框的事件search(e)和select的事件change(e)中用e.value没有获取到值，不知道是什么原因。
四 toolbar工具栏
工具栏。放在界面底部，用于展示针对当前界面的操作选项。子组件为toolbar-item。
示例
<!-- toolbarpage.hml --><div class="container"> <toolbar style="position: fixed; bottom: 0px;"> <toolbar-item value="选项一"></toolbar-item> <toolbar-item value="选项二"></toolbar-item> <toolbar-item value="选项三"></toolbar-item> <toolbar-item value="选项四"></toolbar-item> <toolbar-item value="选项五"></toolbar-item> <toolbar-item value="选项六"></toolbar-item> </toolbar></div>
五 divider分隔器
提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。
示例
<!-- selectpage.hml --><div class="container"> <select @change="changeItem"> <option value="选项一">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select> <divider class="divider" vertical="false"></divider> <select @change="changeItem"> <option value="选项一">选项一</option> <option value="选项二">选项二</option> <option value="选项三">选项三</option> </select></div>
.container { flex-direction: column; justify-content: center; align-items: center; margin: 20px; width: 100%; height: 100%;}.divider { color: red; stroke-width: 3px; line-cap: round;}
关于基础组件的介绍到这章就结束了，还有几个组件，不是很常用，就不介绍了，大家可以去鸿蒙开发官网去查询文档https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791
最后，还是要说，学写程序就是要多敲代码，多动手，用本系列中的这些组件已经可以组合出一些应用程序了，大家可以尝试一下。