Openharmony开发实战：分类组件规范-UICategory

于 2024-07-21 21:21:19 发布
阅读量321 收藏 7
点赞数 4
分类专栏： HarmonyOS 鸿蒙开发 OpenHarmony 文章标签： 前端 harmonyos 鸿蒙系统 华为 鸿蒙 鸿蒙开发 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/v_maniu110/article/details/140593849
版权

 简介

UICategory是基于open harmony基础组件开发的分类组件，支持单级分类、多级分类。

快速开始

安装

ohpm install @hw-agconnect/ui-base
ohpm install @hw-agconnect/ui-category

使用

// 在应用的入口文件进行初始化，比如说EntryAbility.ets
import { UIBase } from '@hw-agconnect/ui-base';

onWindowStageCreate(windowStage: window.WindowStage): void {
  UIBase.init(windowStage);
}

// 引入组件
import { UICategory } from '@hw-agconnect/ui-category';

UICategory({
  title: '标题',
  type: TypeCategory.SINGLE,
  options: [this.options],
  isLayoutFullScreen: true,
  buildContentParam: () => {
    this.buildContent()
  },
})

约束与限制

  1. 支持设备：手机、pad和pc
  2. API：兼容API12、API11

子组件

无

接口

UICategory(options: UICategoryOptions)

UICategoryOptions对象说明

参数名

类型

必填

说明

typeTypeCategory否分类类别，默认是一级分类，TypeCategory.SINGLE
titlestring/Resource是页面标题
backIconResource否自定义返回图标
searchIconResource否自定义搜索图标
customSelectedColorResourceColor否自定义按钮选中后的文字颜色
customSelectedBgColorResourceColor否自定义按钮选中后的背景色
btnMinWidthLength否单个按钮最小宽度，默认值80，限制不可小于40
btnMaxWidthLength否单个按钮最大宽度，默认值130，限制不可大于200
optionsCategoryList[]是按钮数据
isLayoutFullScreenboolean是当前窗口是否为沉浸式，默认值true
showBackIconboolean否是否展示返回按钮，默认值true
showSearchIconboolean否是否展示搜索按钮，默认值true
defaultSelectFirstboolean否是否默认选择第一个选项，默认值true
briefLabelWithParentInfoboolean否缩略label是否含有父类信息，默认值false，只对多级分类生效
customBriefLabelstring/Resource否自定义简化的label，只对多级分类生效
enableBriefLabelboolean否是否启用简化label，只对多级分类生效，默认值true
buildTitleBar() => void;否自定义标题栏
buildContentParam() => void;是自定义内容区

TypeCategory枚举说明

名称

描述

SINGLE单级分类
MULTIPLE多级分类

CategoryList类型说明

参数名

参数类型

必填

参数描述

idstring是分类id，唯一索引
labelstring/Resource是分类文字描述
itemsCategoryItem[]是分类所包含的条目

CategoryItem类型说明

参数名

参数类型

必填

参数描述

idstring是每个子分类的id，唯一索引
labelstring/Resource是每个子分类的文字展示
disabledboolean否是否禁选，默认值false
handler() => void否每个子分类点击后的onClick事件

使用限制

针对多级分类，当启用展示缩略信息时，即enableBriefLabel设置为true时，自定义内容区仅支持Scroll、List容器组件。

事件

名称

功能描述

onSelected(callback: (selected: Map<string, CategoryItem>) => void点击分类后触发该事件，参数为当前所选择的分类
onSearch(callback: () => void)搜索按钮的onClick事件
onBack(callback: () => void)顶部标题栏中返回按钮的onClick事件

示例

示例1

import { UICategory, CategoryList, CategoryItem, TypeCategory } from '@hw-agconnect/ui-category';

@Entry
@Component
struct Index {
  @State options: CategoryList = new CategoryList('itemA', 'itemA', [
    new CategoryItem('itemA1', 'AAAAA'),
    new CategoryItem('itemA2', 'AAAAA'),
    new CategoryItem('itemA3', 'AAAAA'),
    new CategoryItem('itemA4', 'AAAAA'),
    new CategoryItem('itemA5', 'AAAAA'),
    new CategoryItem('itemA6', 'AAAAA'),
    new CategoryItem('itemA7', 'AAAAA'),
    new CategoryItem('itemA8', 'AAAAA'),
    new CategoryItem('itemA9', 'AAAAA'),
    new CategoryItem('itemA10', 'AAAAA'),
  ]);
  @State contentList: string[] = ['1', '2', '3'];

  @Builder
  buildContent() {
    Column({ space: 10 }) {
      ForEach(this.contentList, (item: string) => {
        Text(item)
          .width('100%')
          .height(200)
          .backgroundColor(Color.White)
          .textAlign(TextAlign.Center)
          .borderRadius(12)
      })
    }.padding(16)
  }

  build() {
    Row() {
      Column() {
        UICategory({
          title: '单级分类',
          type: TypeCategory.SINGLE,
          showBackIcon: true,
          showSearchIcon: true,
          isLayoutFullScreen: false,
          options: [this.options],
          buildContentParam: () => {
            this.buildContent()
          },
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

示例2

import { UICategory, CategoryList, CategoryItem, TypeCategory, CategoryListArray } from '@hw-agconnect/ui-category';

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller();
  @State options: CategoryListArray = [
    new CategoryList('itemA', 'itemA', [
      new CategoryItem('itemA1', 'AAAAA'),
      new CategoryItem('itemA2', 'AAAAA'),
      new CategoryItem('itemA3', 'AAAAA'),
      new CategoryItem('itemA4', 'AAAAA'),
      new CategoryItem('itemA5', 'AAAAA'),
      new CategoryItem('itemA6', 'AAAAA'),
      new CategoryItem('itemA7', 'AAAAA'),
      new CategoryItem('itemA8', 'AAAAA'),
      new CategoryItem('itemA9', 'AAAAA'),
      new CategoryItem('itemA10', 'AAAAA'),
    ]),
    new CategoryList('itemB', 'itemB', [
      new CategoryItem('itemB1', 'BBBBB'),
      new CategoryItem('itemB2', 'BBBBB'),
      new CategoryItem('itemB3', 'BBBBB'),
      new CategoryItem('itemB4', 'BBBBB'),
      new CategoryItem('itemB5', 'BBBBB'),
      new CategoryItem('itemB6', 'BBBBB'),
      new CategoryItem('itemB7', 'BBBBB'),
      new CategoryItem('itemB8', 'BBBBB'),
      new CategoryItem('itemB9', 'BBBBB'),
      new CategoryItem('itemB10', 'BBBBB'),
    ]),
    new CategoryList('itemC', 'itemC', [
      new CategoryItem('itemC1', 'CCCCC'),
      new CategoryItem('itemC2', 'CCCCC'),
      new CategoryItem('itemC3', 'CCCCC'),
      new CategoryItem('itemC4', 'CCCCC'),
      new CategoryItem('itemC5', 'CCCCC'),
      new CategoryItem('itemC6', 'CCCCC'),
      new CategoryItem('itemC7', 'CCCCC'),
      new CategoryItem('itemC8', 'CCCCC'),
      new CategoryItem('itemC9', 'CCCCC'),
      new CategoryItem('itemC10', 'CCCCC'),
    ]),
  ];
  @State contentList: string[] = ['1', '2', '3', '4', '5', '6', '7'];

  @Builder
  buildContent() {
    Scroll(this.scroller) {
      Column({ space: 10 }) {
        ForEach(this.contentList, (item: string) => {
          Text(item)
            .width('100%')
            .height(300)
            .backgroundColor(Color.White)
            .textAlign(TextAlign.Center)
            .borderRadius(12)
        })
      }.padding(16)
    }
    .width('100%')
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST,
    })
    .align(Alignment.Top)
    .edgeEffect(EdgeEffect.Spring)
    .scrollBar(BarState.Off)
  }

  build() {
    Row() {
      Column() {
        UICategory({
          title: '多级分类',
          type: TypeCategory.MULTIPLE,
          options: this.options,
          buildContentParam: () => {
            this.buildContent()
          },
          onSelected: () => {
            this.scroller.scrollTo({ xOffset: 0, yOffset: 0, animation: { duration: 0 } })
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

示例3

import { UICategory, CategoryList, CategoryItem, TypeCategory, CategoryListArray } from '@hw-agconnect/ui-category';

class Singer {
  name: string = '';
  followers: number = 0;
  langId: string = '';
  genderId: string = '';
  typeId: string = '';

  constructor(name: string, followers: number, langId: string, genderId: string, typeId: string) {
    this.name = name;
    this.followers = followers;
    this.langId = langId;
    this.genderId = genderId;
    this.typeId = typeId;
  }
}


@Entry
@Component
struct Index {
  @State customBtnBgColor: ResourceColor = '#E84026';
  @State selected: Map<string, CategoryItem> = new Map();
  @State options: CategoryListArray = [
    new CategoryList('111', $r('app.string.music_lang'), [
      new CategoryItem('itemA0', $r('app.string.label_total')),
      new CategoryItem('itemA1', $r('app.string.music_lang_chinese')),
      new CategoryItem('itemA2', $r('app.string.music_lang_english')),
      new CategoryItem('itemA3', $r('app.string.music_lang_hk')),
      new CategoryItem('itemA4', $r('app.string.music_lang_japan')),
      new CategoryItem('itemA5', $r('app.string.music_lang_Korea')),
      new CategoryItem('itemA6', $r('app.string.music_lang_other')),
    ]),
    new CategoryList('222', $r('app.string.music_gender'), [
      new CategoryItem('itemB0', $r('app.string.label_total')),
      new CategoryItem('itemB1', $r('app.string.music_gender_male')),
      new CategoryItem('itemB2', $r('app.string.music_gender_female')),
      new CategoryItem('itemB3', $r('app.string.music_gender_couple')),
    ]),
    new CategoryList('333', $r('app.string.music_type'), [
      new CategoryItem('itemC0', $r('app.string.label_total')),
      new CategoryItem('itemC1', $r('app.string.music_type_pop')),
      new CategoryItem('itemC2', $r('app.string.music_type_elec')),
      new CategoryItem('itemC3', $r('app.string.music_type_yao')),
      new CategoryItem('itemC4', $r('app.string.music_type_gu')),
      new CategoryItem('itemC5', $r('app.string.music_type_qing')),
      new CategoryItem('itemC6', $r('app.string.music_type_rap')),
      new CategoryItem('itemC7', $r('app.string.music_type_duli')),
    ]),
  ];
  @State contentList: Singer[] = [
    new Singer('陈奕迅', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('林俊杰', 200, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('周深', 100, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('王菲', 300, 'itemA1', 'itemB2', 'itemC1'),
    new Singer('孙燕姿', 150, 'itemA1', 'itemB2', 'itemC1'),
    new Singer('毛不易', 170, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('郭顶', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('陈粒', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('许嵩', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('方大同', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('莫文蔚', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('陈楚生', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('周传雄', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('徐佳莹', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('胡彦斌', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('蔡依林', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('王心凌', 217, 'itemA1', 'itemB1', 'itemC1'),
    new Singer('唐朝乐队', 217, 'itemA1', 'itemB3', 'itemC3'),
    new Singer('新裤子乐队', 217, 'itemA1', 'itemB3', 'itemC3'),
    new Singer('Justin Bieber', 217, 'itemA2', 'itemB1', 'itemC1'),
    new Singer('Alan Walker', 217, 'itemA2', 'itemB1', 'itemC1'),
  ];
  private scroller: Scroller = new Scroller();

  onSelect(selected: Map<string, CategoryItem>) {
    this.selected = selected;
    this.scroller.scrollTo({ xOffset: 0, yOffset: 0, animation: { duration: 0 } })
  }

  getList() {
    return this.contentList.filter((item) => {
      const langIdSelected = this.selected.get('111')?.id;
      const genderIdSelected = this.selected.get('222')?.id;
      const typeIdSelected = this.selected.get('333')?.id;

      return (item.langId === langIdSelected || 'itemA0' === langIdSelected)
        && (item.genderId === genderIdSelected || 'itemB0' === genderIdSelected)
        && (item.typeId === typeIdSelected || 'itemC0' === typeIdSelected);
    })
  }

  @Builder
  buildContent() {
    Column() {
      List({ space: 10, scroller: this.scroller }) {
        ForEach(this.getList(), (item: Singer) => {
          ListItem() {
            Row() {
              Row({ space: 12 }) {
                Image($r('app.media.ic_user_portrait')).width(50).height(50)
                Column({ space: 4 }) {
                  Text(item.name).fontSize($r('sys.float.ohos_id_text_size_body1'))
                  Text($r('app.string.music_followers', item.followers.toString()))
                    .fontSize($r('sys.float.ohos_id_text_size_body2'))
                    .fontColor(Color.Grey)
                }.constraintSize({ maxWidth: '80%' }).alignItems(HorizontalAlign.Start)
              }

              Button() {
                Row({ space: 4 }) {
                  Image($r('app.media.ic_public_add')).width(16).height(16).fillColor(this.customBtnBgColor)
                  Text('关注').fontSize($r('sys.float.ohos_id_text_size_button3')).fontColor(this.customBtnBgColor)
                }.width(70).height(30).justifyContent(FlexAlign.Center)
              }.backgroundColor($r('sys.color.ohos_id_color_background'))
            }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          }
          .stateStyles({
            pressed: { .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
            },
          })
        })
      }
      .width('100%')
      .padding(16)
      .divider({ strokeWidth: 0.5, color: Color.Grey, startMargin: 10, endMargin: 10 })
      .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
      .scrollBar(BarState.Off)
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST,
      })
    }
    .width('100%')
  }

  build() {
    Row() {
      Column() {
        UICategory({
          type: TypeCategory.MULTIPLE,
          title: $r('app.string.music_title'),
          options: this.options,
          isLayoutFullScreen: true,
          customSelectedBgColor: this.customBtnBgColor,
          showSearchIcon: false,
          buildContentParam: () => {
            this.buildContent()
          },
          onSelected: (selected) => {
            this.onSelect(selected);
          },
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

​

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

四、大厂面试必问面试题

​

五、鸿蒙南向开发技术

​

六、鸿蒙APP开发必备

​


完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

HarmonyOS开发群众
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenHarmony开发实战：image、image-animator组件的使用（JS）(1)
2401_84871470的博客
05-17 923
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
OpenHarmony开发实战：深入了解开发板-Hi3516，系统工程师面试问题
m0_60388419的博客
04-10 847
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
OpenHarmony开发实战：深入了解开发板-Hi3861
shudaoshanQAQ的博客
04-02 1417
支持，并配套提供开放、易用的开发和调试运行环境。
OpenHarmony应用开发：移动端组件-easyui
最新发布
v_maniu110的博客
07-20 634
该框架适用大部分 OpenHarmony 应用的开发 ，能够更加完善OpenHarmony 的应用开发能力，使我们的应用开发更简单。
2024年鸿蒙最全OpenHarmony开发实战：深入了解开发板-Hi3861(3)，2024华为HarmonyOS鸿蒙面试真题解
2401_84862025的博客
05-15 872
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
OpenHarmony（ohcommandline-tools-windows-2.0.0.2.zip）
11-08
`ohcommandline-tools-windows-2.0.0.2.zip`是针对OpenHarmony开发的命令行工具集，特别为Windows平台设计，帮助开发者在命令行环境下进行项目构建、编译、调试等操作。 该压缩包包含的主要文件`oh-command-line-...
OpenHarmony（ohcommandline-tools-linux-2.0.0.2.zip）
11-08
这些工具是OpenHarmony开发过程中的重要组成部分，它们允许开发者通过命令行界面执行各种任务，如编译源代码、安装应用程序、查看设备状态、运行测试用例等。对于熟悉Linux环境的开发者来说，这些工具能够提高工作...
OpenHarmony（ohcommandline-tools-mac-2.0.0.2.zip）
11-08
OpenHarmony命令行工具（oh-command-line-tools）是一个集合，其中包括了以下关键组件： 1. **构建工具**：这部分工具允许开发者构建OpenHarmony应用程序和系统镜像。它可能包括编译器、链接器和其他必要的工具链，...
openharmony-for-imx6ull-master.zip
03-06
"openharmony-for-imx6ull-master.zip" 是针对NXP i.MX6ULL系列开发板优化的鸿蒙系统补丁集合，旨在为该系列硬件提供更好的驱动支持，从而实现更高效、稳定的运行环境。 i.MX6ULL是NXP半导体公司推出的一款基于ARM ...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 340
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1126
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 587
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1590
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 408
【代码】博客前端项目学习day03——框架页。
前端性能优化--懒加载
weixin_43799793的博客
07-19 149
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 213
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 410
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 252
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值