微信小程序开发：微信小程序组件应用研究

暮雨哀尘2025-03-30 23:22

微信小程序组件应用研究

摘要 ：本文深入探讨了微信小程序各类组件的应用，包括基础组件、表单组件、导航组件、媒体组件等。通过详细分析各组件的属性、事件、使用场景，并结合大量示例代码，阐述了如何灵活运用这些组件构建功能丰富、交互流畅的微信小程序页面，同时探讨了组件性能优化技巧，为微信小程序开发者提供全面的参考指南。

一、引言

微信小程序作为移动互联网时代重要的应用开发模式，凭借其无需安装、即用即走的特点，受到了广泛欢迎。组件是微信小程序构建用户界面和实现功能的核心元素，掌握各类组件的应用对于开发高质量的小程序至关重要。本文将系统研究微信小程序的组件应用，涵盖基础组件、表单组件、导航组件、媒体组件等多个方面，旨在为开发者提供深入、全面的技术指导。

二、基础组件的详细学习与灵活运用

（一）常见基础组件介绍

  1. 视图容器组件

    • <view>：最基本的容器组件，用于布局，可设置样式、绑定事件等。

    • <scroll-view>：可实现内容滚动效果，通过设置 scroll-x、scroll-y 属性控制横向或纵向滚动，scroll-into-view 属性可使指定元素滚动到可视区域等。

  2. 文本组件

    • <text>：用于显示普通文本，可通过 selectable 属性设置是否可选中，space 属性处理空格显示等。

    • <rich-text>：用于富文本展示，可解析 HTML 样式的标签，实现图文混排等复杂文本效果。

  3. 图像组件

    • <image>：用于显示图片，src 属性指定图片路径，mode 属性控制图片缩放模式，如 aspectFit、aspectFill 等，lazy-load 属性实现图片懒加载。

（二）基础组件属性与使用方法详解

表 1 常见基础组件关键属性

组件 属性名 描述 取值范围示例
<view> class 用于定义样式类，通过在对应的 wxss 文件中定义样式来控制外观，如布局、颜色、字体等 'container'、'item' 等自定义类名
<view> style 内联样式，直接设置样式属性，如 'width: 200px; height: 100px;' 合法的 CSS 样式字符串
<scroll-view> scroll-x 是否启用横向滚动 true、false
<scroll-view> scroll-y 是否启用纵向滚动 true、false
<text> selectable 文本是否可选 true、false
<rich-text> nodes 富文本节点，可包含文本、标签等，如 <rich-text nodes="&lt;div&gt;&lt;p&gt;示例文本&lt;/p&gt;&lt;/div&gt;"></rich-text> HTML 格式的字符串或节点数组
<image> mode 图片缩放模式 'aspectFit'、'aspectFill'、'widthFix' 等
<image> lazy-load 图片懒加载，当滚动到一定位置再加载图片，节省流量和性能 true、false

（三）基础组件组合使用实践

  1. 图文混排示例

    <view class="content"> <rich-text class="article" nodes="{{richTextNodes}}"></rich-text> <view class="image-container"> <image class="article-image" src="{{imageSrc}}" mode="aspectFit"></image> <text class="image-caption">{{imageCaption}}</text> </view> <view class="text-section"> <text class="section-title">{{sectionTitle}}</text> <text class="section-content">{{sectionContent}}</text> </view> </view>

    .content {
    padding: 20rpx;
    font-size: 32rpx;
    }
    .article {
    margin-bottom: 20rpx;
    }
    .image-container {
    margin: 20rpx 0;
    text-align: center;
    }
    .article-image {
    width: 100%;
    height: 300rpx;
    object-fit: cover;
    }
    .image-caption {
    font-size: 24rpx;
    color: #888;
    margin-top: 10rpx;
    }
    .text-section {
    margin-bottom: 30rpx;
    }
    .section-title {
    font-weight: bold;
    font-size: 36rpx;
    margin-bottom: 10rpx;
    }
    .section-content {
    line-height: 1.6;
    }

    Page({
    data: {
    richTextNodes: '

    这是一段富文本内容，包含粗体、斜体等格式。

    ',
    imageSrc: 'https://example.com/image.jpg',
    imageCaption: '示例图片说明',
    sectionTitle: '文本段落标题',
    sectionContent: '这里是文本段落内容，详细阐述相关主题。'
    }
    });

  2. 可滚动的内容区域示例

    <view class="container"> <scroll-view class="scroll-content" scroll-y="true" scroll-into-view="{{scrollToId}}"> <view id="section1" class="section"> <text class="section-heading">第一部分</text> <text class="section-text">这里是第一部分的内容...</text> </view> <view id="section2" class="section"> <text class="section-heading">第二部分</text> <text class="section-text">这里是第二部分的内容...</text> </view> <view id="section3" class="section"> <text class="section-heading">第三部分</text> <text class="section-text">这里是第三部分的内容...</text> </view> </scroll-view> <view class="scroll-nav"> <button class="nav-btn" bindtap="scrollToSection" data-id="section1">跳转到第一部分</button> <button class="nav-btn" bindtap="scrollToSection" data-id="section2">跳转到第二部分</button> <button class="nav-btn" bindtap="scrollToSection" data-id="section3">跳转到第三部分</button> </view> </view>

    .container {
    display: flex;
    height: 100vh;
    }
    .scroll-content {
    flex: 1;
    height: 100%;
    background-color: #f7f7f7;
    }
    .section {
    padding: 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    }
    .section-heading {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    }
    .section-text {
    font-size: 32rpx;
    line-height: 1.6;
    }
    .scroll-nav {
    width: 200rpx;
    background-color: #eee;
    padding: 20rpx;
    }
    .nav-btn {
    display: block;
    width: 100%;
    margin-bottom: 20rpx;
    padding: 10rpx;
    background-color: #ccc;
    border: none;
    border-radius: 5rpx;
    text-align: center;
    }

    Page({
    data: {
    scrollToId: ''
    },
    scrollToSection(e) {
    const sectionId = e.currentTarget.dataset.id;
    this.setData({
    scrollToId: sectionId
    });
    // 延迟重置，避免滚动过程中重复触发
    setTimeout(() => {
    this.setData({
    scrollToId: ''
    });
    }, 500);
    }
    });

（四）基础组件样式设置与数据绑定实现动态效果

  1. 图片懒加载示例

    <view class="image-list"> <block wx:for="{{imageList}}" wx:key="index"> <image class="lazy-image" src="{{item.placeholderSrc}}" data-src="{{item.src}}" bindload="imageLoad" mode="aspectFill"></image> </block> </view>

    .image-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx;
    }
    .lazy-image {
    width: 33.33%;
    height: 200rpx;
    margin-bottom: 10rpx;
    background-color: #f0f0f0;
    }

    Page({
    data: {
    imageList: [
    { placeholderSrc: 'https://example.com/placeholder1.jpg', src: 'https://example.com/image1.jpg' },
    { placeholderSrc: 'https://example.com/placeholder2.jpg', src: 'https://example.com/image2.jpg' },
    { placeholderSrc: 'https://example.com/placeholder3.jpg', src: 'https://example.com/image3.jpg' },
    // 更多图片对象
    ]
    },
    imageLoad(e) {
    const image = e.currentTarget;
    const realSrc = image.dataset.src;
    // 替换图片源为真实图片
    image.src = realSrc;
    // 移除 load 事件监听，避免重复加载
    image.unbindload(this.imageLoad);
    }
    });

  2. 文本折叠展开示例

    <view class="text-wrapper"> <text class="display-text">{{isFolded ? (textContent.substring(0, 100) + '...') : textContent}}</text> <view class="fold-control" bindtap="toggleFold"> <text class="fold-text">{{isFolded ? '展开' : '收起'}}</text> </view> </view>

    .text-wrapper {
    padding: 20rpx;
    position: relative;
    }
    .display-text {
    font-size: 32rpx;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }
    .fold-control {
    position: absolute;
    bottom: 10rpx;
    right: 10rpx;
    color: #1aad19;
    font-size: 28rpx;
    cursor: pointer;
    }

    Page({
    data: {
    textContent: '这是一段较长的文本内容，用于演示文本折叠展开效果。小程序组件在实际开发中有着广泛的应用场景，通过合理的组件选择和组合，可以构建出丰富多样的用户界面和交互功能。掌握各组件的属性和事件，能够帮助开发者更高效地进行小程序开发。',
    isFolded: true
    },
    toggleFold() {
    this.setData({
    isFolded: !this.data.isFolded
    });
    }
    });

（五）基础组件性能优化技巧

  1. 合理设置图片尺寸与格式

    • 根据页面布局和显示需求，精确裁剪图片尺寸，避免使用过大尺寸的图片导致加载缓慢和内存占用过高。

    • 选择合适的图片格式，如对于照片类图片，JPEG 格式在保证质量的同时文件较小；对于包含大量透明度的图片，PNG 格式更合适。

  2. 优化滚动区域的内容渲染

    • 对于长列表滚动，采用虚拟列表技术，仅渲染可视区域内的列表项，减少渲染节点数量，提高滚动流畅度。

    • 避免在滚动内容中使用复杂的样式和动画，如过多的盒阴影、渐变背景、3D 变换等，这些会增加渲染计算量，影响性能。

三、表单组件的深入应用与用户输入处理

（一）常见表单组件介绍

  1. 输入框组件

    • <input>：用于单行文本输入，通过 type 属性设置输入类型（如 text、number、idcard 等），placeholder 属性设置占位符提示，maxlength 属性限制输入最大长度等。

    • <textarea>：用于多行文本输入，auto-height 属性可使高度自动适应内容，fixed 属性控制光标是否在输入框内固定位置等。

  2. 按钮组件

    • <button>：用于触发事件，通过 bindtap 绑定点击事件，hover-class 属性设置点击时的样式类，disabled 属性控制是否禁用按钮等。

  3. 复选框组件

    • <checkbox>：用于多选操作，通过 value 属性设置复选框的值，checked 属性控制是否默认选中，bindchange 绑定选中状态改变事件等。

  4. 单选框组件

    • <radio>：用于单选操作，value 属性设置单选框的值，checked 属性控制是否默认选中，bindchange 绑定选中状态改变事件等。

（二）表单组件属性与事件详解

表 2 常见表单组件关键属性与事件

组件 属性名 描述 取值范围示例
<input> type 输入类型 'text'、'number'、'idcard' 等
<input> placeholder 占位符提示 文本字符串
<textarea> auto-height 高度是否自动适应内容 true、false
<button> hover-class 点击时的样式类 自定义类名
<checkbox> value 复选框的值 字符串
<radio> value 单选框的值 字符串
表单组件通用 bindchange 选中状态改变事件，对于复选框和单选框，事件对象的 detail 值包含当前选中项的 value 和所有选中项的 values 自定义事件处理函数

（三）表单数据提交与处理流程实践

复制代码 
<form class="form-container" bindsubmit="formSubmit">
  <view class="form-section">
    <view class="form-label">用户名：</view>
    <input class="form-input" name="username" placeholder="请输入用户名" maxlength="10" />
  </view>
  <view class="form-section">
    <view class="form-label">密码：</view>
    <input class="form-input" name="password" type="password" placeholder="请输入密码" maxlength="16" />
  </view>
  <view class="form-section">
    <view class="form-label">性别：</view>
    <radio-group class="radio-group" name="gender">
      <label class="radio-label">
        <radio value="male" /> 男
      </label>
      <label class="radio-label">
        <radio value="female" /> 女
      </label>
    </radio-group>
  </view>
  <view class="form-section">
    <view class="form-label">爱好：</view>
    <checkbox-group class="checkbox-group" name="hobbies">
      <label class="checkbox-label">
        <checkbox value="read" /> 阅读
      </label>
      <label class="checkbox-label">
        <checkbox value="sport" /> 运动
      </label>
      <label class="checkbox-label">
        <checkbox value="music" /> 音乐
      </label>
    </checkbox-group>
  </view>
  <view class="form-section">
    <view class="form-label">个人简介：</view>
    <textarea class="form-textarea" name="introduction" placeholder="请输入个人简介" auto-height />
  </view>
  <button class="submit-btn" formType="submit">提交</button>
</form>

.form-container {
  padding: 30rpx;
  background-color: #fff;
}
.form-section {
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-start;
}
.form-label {
  width: 120rpx;
  font-weight: bold;
}
.form-input {
  flex: 1;
  border: 1px solid #ddd;
  padding: 10rpx;
  border-radius: 5rpx;
}
.radio-group, .checkbox-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.radio-label, .checkbox-label {
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}
.form-textarea {
  flex: 1;
  border: 1px solid #ddd;
  padding: 10rpx;
  border-radius: 5rpx;
  height: 200rpx;
}
.submit-btn {
  width: 100%;
  padding: 20rpx 0;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
}

Page({
  formSubmit(e) {
    const formData = e.detail.value;
    console.log('表单数据：', formData);
    // 这里可以将表单数据发送到后台服务器进行处理
    // 模拟数据验证和提交结果反馈
    if (formData.username && formData.password) {
      wx.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
      });
    } else {
      wx.showToast({
        title: '用户名和密码为必填项',
        icon: 'none',
        duration: 2000
      });
    }
  }
});

（四）表单组件交互效果实现

  1. 按钮点击反馈示例

    <view class="button-demo"> <button class="normal-btn" bindtap="buttonClick" data-type="normal">普通按钮</button> <button class="special-btn" bindtap="buttonClick" data-type="special">特殊按钮</button> </view>

    .button-demo {
    display: flex;
    justify-content: center;
    margin-top: 50rpx;
    }
    .normal-btn, .special-btn {
    margin: 0 20rpx;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    font-size: 32rpx;
    }
    .normal-btn {
    background-color: #1aad19;
    color: white;
    }
    .normal-btn.active {
    background-color: #008000;
    }
    .special-btn {
    background-color: #ff4757;
    color: white;
    }
    .special-btn.active {
    background-color: #c23647;
    }

    Page({
    buttonClick(e) {
    const buttonType = e.currentTarget.dataset.type;
    const button = e.currentTarget;
    // 添加点击激活类
    button.classList.add('active');
    // 模拟点击后的处理逻辑
    setTimeout(() => {
    wx.showToast({
    title: ${buttonType === 'normal' ? '普通' : '特殊'}按钮点击,
    icon: 'none',
    duration: 1500
    });
    // 移除点击激活类
    button.classList.remove('active');
    }, 300);
    }
    });

  2. 输入框聚焦状态样式变化示例

    <view class="input-demo"> </view>

    .input-demo {
    padding: 30rpx;
    }
    .input-box {
    width: 100%;
    padding: 20rpx;
    border: 1px solid #ddd;
    border-radius: 10rpx;
    font-size: 32rpx;
    transition: border-color 0.3s, box-shadow 0.3s;
    }
    .input-box.focused {
    border-color: #1aad19;
    box-shadow: 0 0 10px rgba(26, 173, 25, 0.3);
    }

    Page({
    inputFocus(e) {
    const input = e.currentTarget;
    input.classList.add('focused');
    },
    inputBlur(e) {
    const input = e.currentTarget;
    input.classList.remove('focused');
    }
    });

四、导航组件、媒体组件等的综合应用

（一）导航组件使用方法与实践

  1. <navigator> 组件介绍

    • <navigator> 组件用于实现页面跳转和导航功能，通过 url 属性指定目标页面路径，open-type 属性控制跳转方式（如 switchTab、redirect、reLaunch 等）。

  2. 导航组件使用示例

    <view class="navigation-demo"> <navigator class="nav-item" url="/pages/home/home" open-type="switchTab"> <view class="nav-icon home-icon"></view> <text class="nav-text">首页</text> </navigator> <navigator class="nav-item" url="/pages/category/category" open-type="switchTab"> <view class="nav-icon category-icon"></view> <text class="nav-text">分类</text> </navigator> <navigator class="nav-item" url="/pages/cart/cart" open-type="switchTab"> <view class="nav-icon cart-icon"></view> <text class="nav-text">购物车</text> </navigator> <navigator class="nav-item" url="/pages/user/user" open-type="switchTab"> <view class="nav-icon user-icon"></view> <text class="nav-text">我的</text> </navigator> </view>

    .navigation-demo {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    background-color: #fff;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    }
    .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .nav-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 5rpx;
    }
    .home-icon {
    background-image: url('https://example.com/home-icon.png');
    background-size: cover;
    }
    .category-icon {
    background-image: url('https://example.com/category-icon.png');
    background-size: cover;
    }
    .cart-icon {
    background-image: url('https://example.com/cart-icon.png');
    background-size: cover;
    }
    .user-icon {
    background-image: url('https://example.com/user-icon.png');
    background-size: cover;
    }
    .nav-text {
    font-size: 24rpx;
    color: #666;
    }

（二）媒体组件应用与实践

  1. <video> 组件介绍

    • <video> 组件用于播放视频，通过 src 属性设置视频地址，controls 属性控制是否显示默认播放控件，autoplay 属性设置是否自动播放等。

  2. 视频播放示例

    <view class="video-container"> </view>

    .video-container {
    padding: 20rpx;
    }
    .video-player {
    width: 100%;
    height: 400rpx;
    }

    Page({
    onPlay() {
    console.log('视频开始播放');
    },
    onPause() {
    console.log('视频暂停播放');
    },
    onEnded() {
    console.log('视频播放结束');
    }
    });

（三）其他常用组件功能与使用场景

  1. 地图组件 <map>

    • 用于显示地图，通过 latitude、longitude 属性设置中心坐标，markers 属性添加标记点，polyline 属性绘制路线等。

    • 常用于地图导航、位置展示、轨迹追踪等应用场景。

  2. 画布组件 <canvas>

    • 用于绘制图形、图像等，通过 canvas-id 属性标识画布，使用 wx.canvas 绘图 API 进行绘制操作。

    • 常用于图表绘制、签名板、自定义图形界面等场景。

（四）组件间组合与协同实践

复制代码 
<view class="complex-page">
  <!-- 导航栏 -->
  <view class="navbar">
    <navigator class="nav-back" open-type="navigateBack" delta="1">
      <text class="nav-back-text">返回</text>
    </navigator>
    <text class="nav-title">综合页面</text>
    <view class="nav-menu">
      <button class="menu-btn" bindtap="showMenu">菜单</button>
    </view>
  </view>
  <!-- 内容区 -->
  <view class="content-area">
    <!-- 文本介绍 -->
    <view class="intro-section">
      <text class="intro-title">欢迎使用综合页面</text>
      <text class="intro-content">这里是综合页面的内容介绍，包含文本、图片、视频等多种元素。</text>
    </view>
    <!-- 图片轮播 -->
    <view class="slider-section">
      <swiper class="swiper" indicator-dots autoplay interval="3000">
        <block wx:for="{{sliderImages}}" wx:key="index">
          <swiper-item>
            <image class="slider-image" src="{{item}}" mode="aspectFill"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <!-- 视频播放 -->
    <view class="video-section">
      <text class="video-title">视频演示</text>
      <video
        class="video-demo"
        src="https://example.com/demo-video.mp4"
        controls
        poster="https://example.com/video-poster.jpg"
      >
        您的设备不支持视频播放
      </video>
    </view>
    <!-- 表单反馈 -->
    <view class="form-section">
      <text class="form-title">意见反馈</text>
      <input class="form-input" placeholder="请输入您的意见或建议" />
      <button class="submit-form-btn" bindtap="submitFeedback">提交</button>
    </view>
  </view>
</view>

.complex-page {
  height: 100vh;
  background-color: #f5f5f5;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.nav-back {
  padding: 10rpx;
}
.nav-back-text {
  font-size: 32rpx;
}
.nav-title {
  font-size: 36rpx;
  font-weight: bold;
}
.nav-menu {
  padding: 10rpx;
}
.menu-btn {
  background-color: #f0f0f0;
  border: none;
  border-radius: 5rpx;
  padding: 5rpx 10rpx;
  font-size: 28rpx;
}
.content-area {
  padding: 20rpx;
}
.intro-section {
  margin-bottom: 30rpx;
}
.intro-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.intro-content {
  font-size: 32rpx;
  line-height: 1.6;
}
.slider-section {
  margin-bottom: 30rpx;
}
.swiper {
  height: 300rpx;
  border-radius: 10rpx;
  overflow: hidden;
}
.slider-image {
  width: 100%;
  height: 100%;
}
.video-section {
  margin-bottom: 30rpx;
}
.video-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.video-demo {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
}
.form-section {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}
.form-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.form-input {
  width: 100%;
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.submit-form-btn {
  width: 100%;
  padding: 20rpx 0;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
}

Page({
  data: {
    sliderImages: [
      'https://example.com/slider1.jpg',
      'https://example.com/slider2.jpg',
      'https://example.com/slider3.jpg'
    ]
  },
  showMenu() {
    wx.showToast({
      title: '菜单已展开',
      icon: 'none',
      duration: 1000
    });
    // 实际开发中可在此处实现菜单展开逻辑
  },
  submitFeedback() {
    wx.showToast({
      title: '反馈提交成功',
      icon: 'success',
      duration: 1500
    });
  }
});

五、结论

本文系统研究了微信小程序组件的应用，从基础组件、表单组件到导航组件、媒体组件等多个方面进行了深入探讨。通过详细分析各组件的属性、事件、使用场景，并结合大量示例代码，展示了如何灵活运用这些组件构建功能丰富、交互流畅的微信小程序页面。同时，本文还探讨了组件性能优化技巧，对于提高小程序的加载速度与流畅度具有重要意义。在实际开发中，开发者应根据具体项目需求，合理选择和组合使用各类组件，不断优化用户体验，开发出高质量的微信小程序。

相关推荐
nqqcat~40 分钟前
STL常用算法
开发语言·c++·算法
_GR1 小时前
2022年蓝桥杯第十三届C&C++大学B组真题及代码
c语言·数据结构·c++·算法·蓝桥杯·动态规划
Matlab光学1 小时前
MATLAB仿真：Ince-Gaussian光束和Ince-Gaussian矢量光束
开发语言·算法·matlab
Stardep2 小时前
算法学习11——滑动窗口——最大连续1的个数
数据结构·c++·学习·算法·leetcode·动态规划·牛客网
双叶8362 小时前
（C语言）学生信息表（学生管理系统）（基于通讯录改版）（正式版）（C语言项目）
c语言·开发语言·c++·算法·microsoft
AQin10122 小时前
【Leetcode·中等】如何初始化（583.两个字符串的删除操作·Delete Operation for Two Strings）
java·算法·leetcode·动态规划
green5+12 小时前
LeetCode1两数之和
算法·哈希算法·散列表
hnsqls2 小时前
LeetCode 精简75 题
算法·leetcode·职场和发展
石去皿2 小时前
力扣hot100 31-40记录
java·算法·leetcode
不吃元西2 小时前
leetcode 118. 杨辉三角
算法·leetcode·职场和发展
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04苍穹外卖面试总结05RAG 实践- Ollama+RagFlow 部署本地知识库06如何在WPS和Word/Excel中直接使用DeepSeek功能07HTML项目一键打包工具：HTML2EXE 最新版08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10论文笔记：交替单模态适应的多模态表征学习