创作一款表情包生成微信小程序:功能详解与用户体验优化

一、引言

        在当今社交媒体充斥着各种趣味表情包的时代,表情包生成工具成为许多用户创作和分享创意的热门选择。为了迎合这一趋势,我设计并开发了一款功能丰富、用户友好的微信小程序,旨在让用户能够轻松而有趣地创作个性化的表情包。这篇博客将深入介绍我的微信小程序,详解其各项功能,以及为了提升用户体验而进行的设计和优化。无论是内置的上百种头像素材,还是支持自定义上传与编辑的功能,我将逐一展示这个小程序的强大之处,帮助读者更好地理解并使用这款创意工具。

二、背景

        在数字创意时代,表情包已经成为人们交流中不可或缺的一部分。然而,尽管微信推出了名为“微信创意表情”的小程序,我却发现它在素材数量和用户自定义方面存在一些限制。素材有限、用户无法自定义上传图片,这些限制让我看到了改进的空间,因此萌发了开发自己的表情包生成微信小程序的念头。

        我的小程序的背景正是在这样的需求和不足之下诞生的。通过深入研究用户反馈和市场调研,我决定打造一款更加强大、灵活且富有创意的表情包生成工具。我的初衷是为用户提供一个自由、个性化的创作空间,让他们能够尽情表达自己的创意,而不受素材和功能的限制。通过模仿并超越现有的小程序,我致力于打破创作的边界,让用户在表情包的世界中享受更多的乐趣和创意。这款小程序不仅仅是一款工具,更是我对创意自由和个性表达的热忱回应。

三、已实现功能

  • 1、内置上百种头像合成素材:

提供丰富多样的素材,包括脸、嘴、眼、身体、手、网络脸、挂架等,供用户选择和合成。

  • 2、可自定义上传图片:

允许用户自由上传个人照片或网络素材,拓展创作空间,让表情包更具个性。

  • 3、图片支持移动、缩放、旋转、批量选择:

提供直观的操作界面,用户可以自由调整图片的位置、大小、旋转角度,并支持批量选择多个元素进行统一操作。

  • 4、图层可以通过列表拖拽实现上下排序:

实现直观的图层管理,用户可通过简单的拖拽操作调整图层的顺序,灵活掌握表情包的层次结构。

  • 5、不同颜色、触点大小的涂鸦:

提供丰富的涂鸦工具,用户可以自由选择不同颜色和触点大小,为表情包添加更多创意元素。

  • 6、文字输入:

实现文字输入功能,用户可选择不同颜色的文字,自由添加文字表达情感或创意。

  • 7、图层自由调整透明度:

用户可以对每个图层进行透明度调整,实现更丰富的叠加效果。

  • 8、图层左右镜像:

提供左右镜像功能,增加表情包的变化和趣味性。

  • 9、图层复制:

允许用户复制已有的图层,方便创作时的重复元素使用。

  • 10、将合成的图片导出:

提供简便的导出功能,让用户能够保存和分享自己创作的表情包。

四、素材库设计

我定义了一个组件”EmojiCardPanel“,从网上搜罗了许多素材,然后获取到所有素材的宽、高。定义素材相对于图层左上角的坐标值。实现效果。

上层是tab,下层是 swiper+scroll-view

代码如下:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const emits = defineEmits<{
  //选择emoji
  (e: 'selectEmoji', x: number, y: number, w: number, h: number, url: string): void
}>()

/** Tab 选项 */
type TabOption = {
  id: number
  title: string
  details: TabDetail[]
}

/** Tab 明细 */
type TabDetail = {
  url: string
  x: number
  y: number
  w: number
  h: number
}

// 所有tab
const tabs = ref<TabOption[]>([])
// 当前选择Tab Index
const activeTabIndex = ref<number>(-1)
// 选择图片Id
const currentTouchImageId = ref<number>(-1)

onMounted(() => {
  tabs.value = [在这里填充tab数据]

  activeTabIndex.value = 0
})

// 选择tab
const onSelectTab = (index: number) => {
  activeTabIndex.value = index
}

// image touch start
const onImageTouchStart = (img: TabDetail, index: number) => {
  currentTouchImageId.value = index
}

// image tap
const onTap = (img: TabDetail, index: number) => {
  currentTouchImageId.value = index
  uni.downloadFile({
    url: img.url,
    success: (res) => {
      if (res.statusCode === 200) {
        emits('selectEmoji', img.x, img.y, img.w, img.h, res.tempFilePath)
        currentTouchImageId.value = -1
      } else {
        uni.showToast({
          title: '下载资源失败,状态码:' + res.statusCode,
        })
        currentTouchImageId.value = -1
      }
    },
    fail: (error) => {
      uni.showToast({
        title: '资源下载异常',
      })
      currentTouchImageId.value = -1
    },
  })
}

// image touch end
const onImageTouchEnd = () => {
  currentTouchImageId.value = -1
}
</script>
<template>
  <view class="emoji-card-panel">
    <view class="tabs">
      <text
        class="text"
        :class="{ select: index === activeTabIndex }"
        v-for="(tab, index) in tabs"
        :key="'tab_' + index"
        @tap="onSelectTab(index)"
        >{{ tab.title }}</text
      >
    </view>
    <swiper
      class="swiper"
      :current="activeTabIndex"
      @change="activeTabIndex = $event.detail.current"
    >
      <swiper-item v-for="(tab, index) in tabs" :key="'detail_' + index">
        <scroll-view class="tab-detail" scroll-y>
          <view class="images">
            <image
              class="image"
              :lazy-load="true"
              mode="widthFix"
              :class="{ touch: ix === currentTouchImageId }"
              @tap="onTap(img, ix)"
              @touchstart="onImageTouchStart(img, ix)"
              @touchend="onImageTouchEnd"
              v-for="(img, ix) in tab.details"
              :key="'img_' + ix"
              :src="img.url"
            ></image>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<style lang="scss" scoped>
.emoji-card-panel {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 5px;
  font-size: 13px;
  .tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40rpx;
    margin: 10px;
    .text {
      padding: 3px 10px;
      border-radius: 15px;
      &.select {
        background-color: #07c160;
        color: white;
        /* 过渡效果 */
        transition: all 0.4s;
      }
    }
  }
  .tab-detail {
    flex: 1;
    .images {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 10rpx 10rpx;
      .image {
        width: 40px;
        padding: 10px;
        border-radius: 12px;
        margin: 5px;
        &.touch {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      .image:last-child {
        margin-right: auto;
      }
    }
  }
}
</style>

五、自定义上传与编辑

这个就不用说了,选择图片,上传,然后图片绘制到最上层图层,并默认选中

六、图层管理

针对图层管理,是最复杂的,同样也增加了一个组件”CanvasDragPanel“,没有使用 2d版本的canvas ,虽然2d渲染速度更快,但是发现图层在移动、缩放时有闪烁,不管是用双缓冲还是requestAnimationFrame 都未能解决这个闪烁问题。因为要涂鸦,所以用了两个canvas,在涂鸦时将主canvas隐藏,涂鸦结束后,再调换过来。

这里的难点是,图层选择、移动、缩放、删除、并且我还设计了批量选择,这些都将是此小程序实现的难点。

<template>
  <view
    class="canvas-drag-panel"
    :style="{
      width: props.width + 'px',
      height: props.height + 'px',
    }"
  >
    <!--主canvas-->
    <canvas
      id="mainCanvasId"
      canvas-id="mainCanvasId"
      :class="{
        disabled: mainCanvasDisabled,
      }"
      class="canvas main-canvas"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      @error="touchError"
      @touchcancel="touchCancel"
      :disable-scroll="true"
    ></canvas>
    <!--涂鸦canvas、将文本转换图片canvas-->
    <canvas
      v-show="graffitiCanvasShow"
      canvas-id="graffitiCanvasId"
      @touchstart="graffitiTouchStart"
      @touchmove="graffitiTouchMove"
      @touchend="graffitiTouchEnd"
      :disable-scroll="true"
      class="canvas graffiti-canvas"
    ></canvas>
  </view>
</template>

七、涂鸦和文字输入

涂鸦和文字输入也是封装了两个组件分别是”GraffitiPanel“和”AddTextPanel“,至于选择涂鸦还是文字,因为是一个按钮组和后面的调节是一样的,封装了一个组件”ButtonGroupPanel

涂鸦面板效果:

代码如下:

<script setup lang="ts">
import { ref } from 'vue'
const emits = defineEmits<{
  // 取消
  (e: 'cancelGraffiti'): void
  // 完成
  (e: 'completeGraffiti'): void
  // 选择stroke
  (e: 'selectGraffitiStroke', index: number): void
  // 选择color
  (e: 'selectGraffitiColor', index: number): void
}>()

// 定义组件属性
const props = defineProps<{
  top: number
  height: number
  strokeDataList: number[]
  colorDataList: string[]
}>()

// 取消
const cancelGraffiti = () => {
  emits('cancelGraffiti')
}
// 完成
const endGraffiti = () => {
  emits('completeGraffiti')
}

// 选择 stroke
const selectGraffitiStroke = (index: number) => {
  currentGraffitiStrokeIndex.value = index
  emits('selectGraffitiStroke', index)
}

// 选择yanse
const selectGraffitiColor = (index: number) => {
  emits('selectGraffitiColor', index)
  currentGraffitiColorIndex.value = index
}

// 当前选择stroke
const currentGraffitiStrokeIndex = ref<number>(1)
// 当前选择颜色
const currentGraffitiColorIndex = ref<number>(1)
</script>
<template>
  <view
    class="graffiti-panel"
    :style="{
      top: props.top + 'px',
      height: props.height + 'px',
    }"
  >
    <view class="top">
      <text class="left" @tap="cancelGraffiti">取消</text>
      <text class="center">涂鸦</text>
      <text class="right" @tap="endGraffiti">完成</text>
    </view>
    <view class="main">
      <view class="title"><text>笔触</text></view>
      <view class="content">
        <view
          class="circle-view stroke-view"
          :class="{
            selected: index === currentGraffitiStrokeIndex,
          }"
          @tap="selectGraffitiStroke(index)"
          v-for="(item, index) in props.strokeDataList"
          :key="'stroke_' + index"
        >
          <view
            class="circle"
            :style="{
              width: item + 'px',
              height: item + 'px',
              'background-color': colorDataList[currentGraffitiColorIndex],
            }"
          ></view>
        </view>
      </view>
      <view class="title"><text>颜色</text></view>
      <view class="content">
        <view
          class="circle-view color-view"
          :class="{
            selected: index === currentGraffitiColorIndex,
          }"
          @tap="selectGraffitiColor(index)"
          v-for="(item, index) in props.colorDataList"
          :key="'color_' + index"
        >
          <view
            class="circle"
            :style="{
              'background-color': item,
            }"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.graffiti-panel {
  margin: 0px 5px;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(135, 131, 131, 0.4);
  position: absolute;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background-color: white;
  z-index: 998;
  .top {
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin: 5px 10px;
    text-align: center;
    .left,
    .right {
      flex: 0 0 50px;
      padding: 10px;
    }
    .center {
      flex: 1;
    }
  }
  .main {
    margin: 20px;
    .title {
      height: 40px;
      line-height: 40px;
      color: darkgrey;
    }
    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      .circle-view {
        border-radius: 50%;
        margin: 5px;
        &.stroke-view {
          width: 40px;
          height: 40px;
          display: flex;
          margin: 10px;
          align-items: center;
          justify-content: center;
          background-color: rgba(0, 0, 0, 0.1);
          &.selected {
            width: 48px;
            height: 48px;
            margin: 2px;
          }
        }
        &.color-view {
          width: 30px;
          height: 30px;
          margin: 4px;
          border: 4px solid rgba(0, 0, 0, 0.1);
          &.selected {
            width: 34px;
            height: 34px;
            margin: 2px;
            border: 8px solid rgba(0, 0, 0, 0.1);
          }
          .circle {
            height: 100%;
            width: 100%;
          }
        }
        .circle {
          border-radius: 50%;
        }
      }
    }
  }
}
</style>

文字输入效果如下,可以选择子颜色:

八、透明度、翻转、复制

透明度、翻转、复制同样用到了按钮组组件”ButtonGroupPanel“,只是如果未选择图层,三个按钮是置灰状态

因为我用的是非 2d canvas 所以 不支持 ”context.scale(-1, 1)“ ,但是水平翻转这行代码是关键,就用了”createOffscreenCanvas“ ,翻转后将canvas存入临时文件,放入图层列表。

九、图层上下顺序调整、删除

此功能增加了一个单独组件”ListDragPanel“,可以删除图层、按住行尾图标可实现,图层上下顺序调整

代码如下:

<script setup lang="ts">
import { reactive, ref } from 'vue'
const emits = defineEmits<{
  //删除拖拽项
  (e: 'delDragItem', id: number): void
  //选择拖拽项
  (e: 'selectDragItem', id: number): void
  //拖拽项顺序调整
  (e: 'changeDragItemOrder', oneId: number, towId: number): void
}>()

/** 拖拽列表明细类型声明 */
type DragListItem = {
  id: number
  url: string
}

/** 状态类型声明 */
type StateType = {
  // 拖拽列表
  dragList: DragListItem[]
  // 初始化明细 左上角坐标
  initListTop: number[]
  // 最新明细  左上角坐标
  newListTop: number[]
  // 记录当前手指的垂直方向的坐标
  touchY: number
  // 记录当前操作的item数据
  currentItemTop: number
  // 当前操作的item的下标
  currentItemIndex: number
  // 当前选择item id
  currentSelectedId: number
  // 控制ScrollView 是否可滚动
  dragListContainerCanScroll: boolean
}

// 状态控制
const state = reactive<StateType>({
  dragList: [],
  initListTop: [],
  // 坐标数据
  newListTop: [],
  // 记录当前手指的垂直方向的坐标
  touchY: 0,
  currentItemTop: 0,
  // 当前操作的item的下标
  currentItemIndex: -1,
  // 当前选择item id
  currentSelectedId: -1,
  // 控制ScrollView 是否可滚动
  dragListContainerCanScroll: true,
})
// 拖拽项 每一项高度
const ITEM_HEIGHT = 55

// 获取所有项 top
const getDragItemTop = (): number[] => {
  return state.dragList.map((item, i) => {
    return i * ITEM_HEIGHT
  })
}

// 触摸开始
const onTouchStart = (event: any, index: number) => {
  state.currentSelectedId = state.dragList[index].id
  state.dragListContainerCanScroll = false
  const [{ pageY }] = event.touches
  state.currentItemIndex = index
  state.touchY = pageY
  state.currentItemTop = state.newListTop[index]
  uni.vibrateShort({
    type: 'heavy',
  })
}

// 触摸移动
const onTouchMove = (event: any) => {
  const [{ pageY }] = event.touches
  const current = state.newListTop[state.currentItemIndex]
  const prep = state.newListTop[state.currentItemIndex - 1]
  const next = state.newListTop[state.currentItemIndex + 1]
  // 获取移动差值
  state.newListTop[state.currentItemIndex] = current + (pageY - state.touchY)
  // 记录手指坐标
  state.touchY = pageY
  // 向下移动(超过下一个的1/2就进行换位)
  if (next && current > next - ITEM_HEIGHT / 2) {
    changePosition(state.currentItemIndex + 1)
  } else if (prep && current < prep + ITEM_HEIGHT / 2) {
    // 向上移动(超过上一个的1/2就进行换位)
    changePosition(state.currentItemIndex - 1)
  }
}

// 触摸结束
const onTouchEnd = () => {
  touchFinaly()
}

// 触摸异常关闭
const onTouchCancel = () => {
  touchFinaly()
}

// 触摸最终执行
const touchFinaly = () => {
  // 将拖拽的item归位
  state.newListTop[state.currentItemIndex] = state.initListTop[state.currentItemIndex]
  state.currentItemIndex = -1
  state.dragListContainerCanScroll = true
}

// 交换位置
const changePosition = (index: number) => {
  // 记录当前拖拽的item数据
  const tempItem = state.dragList[state.currentItemIndex]
  const oneId: number = tempItem.id
  const twoId: number = state.dragList[index].id
  // 设置原来位置的item
  state.dragList[state.currentItemIndex] = state.dragList[index]
  // 将临时存放的数据设置好
  state.dragList[index] = tempItem

  emits('changeDragItemOrder', oneId, twoId)

  // 调整位置item
  state.newListTop[index] = state.newListTop[state.currentItemIndex]
  state.newListTop[state.currentItemIndex] = state.currentItemTop
  // 改变当前操作的的下标
  state.currentItemIndex = index

  // 记录新位置的数据
  state.currentItemTop = state.initListTop[state.currentItemIndex]
  uni.vibrateShort({
    type: 'heavy',
  })
}

// 删除拖拽明细
const onDelDragItem = (index: number) => {
  const delItem: DragListItem = state.dragList[index]
  state.dragList.splice(index, 1)
  state.currentSelectedId = -1
  state.initListTop = getDragItemTop()
  state.newListTop = getDragItemTop()
  emits('delDragItem', delItem.id)
}

// 选择拖拽项
const onSelectDragItem = (index: number) => {
  const selectedItem: DragListItem = state.dragList[index]
  state.currentSelectedId = selectedItem.id
  emits('selectDragItem', selectedItem.id)
}

// 添加拖拽项
const addDragItem = (id: number, url: string) => {
  state.dragList.splice(0, 0, {
    id: id,
    url: url,
  })
  const top: number = (state.dragList.length - 1) * ITEM_HEIGHT
  state.initListTop = getDragItemTop()
  state.newListTop = getDragItemTop()
  state.currentSelectedId = id
}

// 删除拖拽项
const delDragItem = (id: number) => {
  const index: number = state.dragList.findIndex((item) => item.id === id)
  state.dragList.splice(index, 1)
  state.initListTop = getDragItemTop()
  state.newListTop = getDragItemTop()
}

// 选择拖拽项
const selectDragItem = (id: number) => {
  state.currentSelectedId = id
}

// 暴露函数
defineExpose({
  addDragItem,
  delDragItem,
  selectDragItem,
})
</script>

<template>
  <view class="list-drag-panel">
    <scroll-view
      class="drag-list-scroll"
      :scroll-y="state.dragListContainerCanScroll"
      :style="{ height: '100%' }"
    >
      <view
        class="drag-list-item"
        :class="{ selected: state.currentSelectedId === item.id }"
        v-for="(item, index) in state.dragList"
        :style="{
          top: state.newListTop[index] + 'px',
        }"
        :key="'drag-list-item_' + index"
      >
        <view class="drag-list-item-item drag-list-item-left" @tap="onDelDragItem(index)">
          <image class="remove-icon" lazy-load src="/static/images/del.png" mode="widthFix"></image>
        </view>
        <view class="drag-list-item-item drag-list-item-center" @tap="onSelectDragItem(index)">
          <image class="layer-img" lazy-load :src="item.url" mode="aspectFit" />
          <text>图层{{ index + 1 }}</text>
        </view>
        <view
          class="drag-list-item-item drag-list-item-right"
          @touchstart="onTouchStart($event, index)"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
          @touchcancel="onTouchCancel"
        >
          <image class="drag-icon" lazy-load src="/static/images/drag.png" mode="widthFix"></image>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.list-drag-panel {
  height: 100%;
  .drag-list-scroll {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: relative;
    .drag-list-item {
      display: flex;
      position: absolute;
      left: 0;
      right: 0;
      justify-content: space-between;
      align-items: center;
      padding-right: 5px;
      margin: 0px 5px;
      &.selected {
        background-color: #f0fff0;
        border-radius: 10px;
      }
      .drag-list-item-left {
        padding: 5px 10px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        .remove-icon {
          width: 20px;
          height: 20px;
          padding-right: 5px;
        }
      }
      .drag-list-item-center {
        width: 100%;
        padding: 5px 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        .layer-img {
          width: 40px;
          height: 40px;
          margin: 2px 15px 2px 0px;
        }
      }
      .drag-list-item-item:last-child {
        margin-left: auto;
      }
      .drag-list-item-right {
        padding: 0px 10px;
        height: 55px;
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        justify-content: center;
        align-items: center;
        .drag-icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>

 这里的问题点是 要动态控制”scroll-view“ 是否可滚动,在移动图层顺序时,是不允许滚动的。

十、导出与分享

将主canvas导出,这里的问题是,因为在选中和居中时,会有特殊线条,希望在导出时,重新绘制图层,可发现有时候重新绘制图层位置会偏移,未找到问题。

十一、未来发展和优化方向

当前这个小程序已上线,有兴趣的可以搜索进去看看,有疑问的大家可以留言交流。

目前此小程序未实现 2d canvas,后续可以研究下2d

后续继续增加undo 效果。

比较鸡肋的是,不能直接将制作的表情加入微信聊天中(腾讯是真坑,自家小程序可以,未开放其他人)。

好了,大家有疑问的可以留言沟通哈。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/175599.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

南京数字孪生赋能工业制造,加速推进制造业数字化转型

随着南京信息技术的迅猛发展和工业管理的不断演进&#xff0c;传统的工业管理方式已经无法满足企业对高效、智能和可持续发展的需求。针对这一情况&#xff0c;数字孪生技术应运而生&#xff0c;为南京工业管理带来了全新的变革和机遇。以数字孪生为理念&#xff0c;三维可视化…

大模型创业“风投”正劲,AGI Foundathon 大模型创业松活动精彩看点

这是一场万众瞩目的大模型领域盛会。当来自世界各地的顶尖大模型开发者、创业者、投资人汇聚一堂&#xff0c;他们对大模型应用层的思考碰撞出了哪些火花&#xff1f;应运而生了哪些令人眼前一亮的AI-Native产品&#xff1f; 让我们一起来回顾吧&#xff5e;

C#核心笔记——(二)C#语言基础

一、C#程序 1.1 基础程序 using System; //引入命名空间namespace CsharpTest //将以下类定义在CsharpTest命名空间中 {internal class TestProgram //定义TestProgram类{public void Test() { }//定义Test方法} }方法是C#中的诸多种类的函数之一。另一种函数*&#xff0c;还…

算法-二叉树-简单-二叉树的直径、将有序数组转换成二叉搜索树

记录一下算法题的学习9 二叉树的直径 题目&#xff1a;给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。两节点之间路径的 长度 由它们之间边数表示 读完题目&…

如何打造适用的MES管理系统解决方案

在当前的制造业领域&#xff0c;项目型生产企业面临着独特的挑战。尽管国外的大型软件公司提供了某些解决方案&#xff0c;但由于地域、文化和制度的差异&#xff0c;这些方案并不完全满足企业的实际需求。为了解决这一难题&#xff0c;我们必须以客户为中心&#xff0c;围绕他…

机器学习中的特征选择:方法和 Python 示例

布拉加德什桑达拉拉詹 一、说明 特征选择是机器学习流程中至关重要且经常被低估的步骤。它涉及从数据集中的原始特征集中选择最相关的特征&#xff08;输入变量或属性&#xff09;的子集。特征选择的重要性怎么强调都不为过&#xff0c;因为它直接影响机器学习模型的质量、效率…

【C++】类与对象(中)

一、类的默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会自…

解析大型语言模型的训练、微调和推理的运行时性能

背景 这篇论文是截至目前为数不多的介绍大模型训练配套环境比对的论文&#xff0c;对于想要入门大模型训练同学是个不错的入门资料。比较了不同尺寸模型&#xff08;比较常用的7、13、70b&#xff09;&#xff0c;在不同型号gpu、训练框架、推理框架数据。结合自己实际工作需要…

华为认证 | HCIE考证流程详解!

HCIE&#xff08;Huawei Certified ICT Expert&#xff0c;华为认证ICT专家&#xff09;是华为认证体系中最高级别的ICT技术认证&#xff0c;旨在打造高含金量的专家级认证&#xff0c;为技术融合背景下的ICT产业提供新的能力标准&#xff0c;以实现华为认证引领ICT行业技术认证…

numpy报错:AttributeError: module ‘numpy‘ has no attribute ‘float‘

报错&#xff1a;AttributeError: module numpy has no attribute float numpy官网&#xff1a;NumPy 报错原因&#xff1a;从numpy1.24起删除了numpy.bool、numpy.int、numpy.float、numpy.complex、numpy.object、numpy.str、numpy.long、numpy.unicode类型的支持。 解决办法…

小程序Tab栏与页面滚动联动

小程序tab栏切换与页面滚动联动 tab栏与页面滚动联动点击tab栏页面跳到指定位置滚动页面时切换tab栏 tab栏与页面滚动联动 在进行小程序开发时&#xff0c;需要实现点击tab栏页面滚动到某一指定位置&#xff0c;并且滚动页面时&#xff0c;小程序的tab栏进行切换。 在一开始&a…

MP3音频文件体积怎么缩小?压缩的方法有哪些?

压缩音频文件可减小文件的大小&#xff0c;从而更轻松地上传到其他平台&#xff0c;或轻松的通过电子邮件进行分享。除此之外&#xff0c;压缩音频文件还可以节省硬盘上的储存空间。那MP3音频文件体积怎么缩小呢&#xff1f;继续阅读可查看压缩的详细流程。 什么是音频文件压缩…

开发上门按摩系统对技师如何管理,薪资结构怎么设计

开发完上门按摩系统平台上线之后&#xff0c;对技师的管理和薪资结构是非常重要的环节&#xff0c;关乎着平台的服务能力和服务质量&#xff0c;那么应该如何去管理和设计薪资结构呢 首先说技师管理&#xff1a; 一、培训和认证&#xff1a;平台应对技师进行全面的培训&#xf…

ArkTS声明式开发范式

装饰器 用来装饰类、结构体、方法以及变量&#xff0c;赋予其特殊的含义&#xff0c;如上述示例中 Entry 、 Component 、 State 都是装饰器。 Component 表示这是个自定义组件&#xff1b; Entry 则表示这是个入口组件&#xff1b; State 表示组件中的状态变量&#xff0c;…

CRM商机管理软件:构建客户为中心的管理理念

企业为什么选择CRM商机管理软件&#xff1f;1.CRM软件能够帮助企业建立以客户为中心的管理理念&#xff1b;2.CRM商机管理软件全面直观的展示客户数据&#xff1b;3.市场人员可以制订个性化的营销策略&#xff1b;4.移动应用为外出的销售带来的便利。 1.构建客户为中心的管理理…

AI 智能时代,如何快速搞懂向量数据库库?

▼最近直播超级多&#xff0c;预约保你有收获 今晚20点直播&#xff1a;《大模型向量数据库技术架构剖析以及应用实战》 —1— 向量数据库为什么如此重要&#xff1f; AI 智能时代&#xff0c;向量数据库是人人需要掌握的必备技能&#xff0c;为什么这么说&#xff1f; 对标移…

Qt程序的自定义安装卸载方案

前言 NSIS 是一个 Open Source 的 Windows 系统下安装程序制作程序&#xff1b; NSIS-UI-Plugin 是一个开源的NSIS UI插件&#xff1b; 0x0 环境搭建 https://www.cnblogs.com/NSIS/p/16581122.html https://github.com/sway913/NSIS-UI-Plugin 0x1 类图 0x2 二次开发 自定…

关键性进展! 小米造车露真容 预计明年上市

大家好,我是极智视界,欢迎关注我的公众号,获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 小米在各种不同的产品上都在不断打上自己的品牌,这绝对不止于智能手机,而是有智能…

梨花声音课堂,真诚和情感展现家庭生活场景,易使观众产生共鸣

在为家庭剧的配音工作时&#xff0c;配音员要能够传递出剧中角色在日常生活中所经历的情感波动&#xff0c;以及家庭关系中的温情、矛盾和解决问题的过程。家庭剧着重描绘亲情纽带和人物间的真挚交往&#xff0c;因此配音的真实感和情感表达尤为重要。以下是针对家庭剧配音的几…

毕业设计2049网上选课系统JSP【程序源码+文档+调试运行】

摘要 本文详细介绍了一个网上选课系统的设计与实现过程。该系统主要分为学生用户、管理员和教师用户三个模块&#xff0c;涵盖了用户登录、在线选课、信息管理、密码修改等功能。通过对系统功能的分析&#xff0c;进行了数据库设计和界面设计&#xff0c;并进行了测试和优化。…