微信小程序自定义头部设计与实现

本文还有配套的精品资源，点击获取

简介：在微信小程序开发中，自定义头部是提供个性化用户体验的常见需求。通过使用 wxml 和 wxss ，开发者可以自由设计页面顶部的样式和功能。本指南详细介绍了自定义头部的实现方法，涉及的技术点，以及优化策略。通过组件创建、样式设置、事件处理、动态更新、适配与性能优化、全局配置等方面，开发者可以实现功能丰富、样式统一的自定义头部，并根据具体需求进行调整和优化。

1. 微信小程序自定义头部概述

微信小程序的用户界面通常由一系列页面组成，而每个页面的顶部往往需要一个自定义的头部，它不仅包含了页面的名称，还可能包括返回按钮、搜索框、下拉刷新控件等。自定义头部是构建用户友好界面不可或缺的部分，它提升了用户体验，同时也让小程序的内容展示更加丰富和灵活。

本章首先介绍自定义头部在微信小程序中的基础概念，以及它在小程序整体布局中扮演的角色。接下来，我们将深入探讨实现自定义头部的各种技术手段，包括WXML和WXSS的布局和样式定义，以及如何通过JavaScript进行交互和动态数据更新。通过本章的内容，读者将对微信小程序的自定义头部有一个全面的认识，并为后续的详细实践章节打下坚实的基础。

2. wxml和wxss在自定义头部中的应用

微信小程序的自定义头部是小程序界面的重要组成部分，其中wxml和wxss扮演着关键的角色。wxml是微信小程序的标记语言，类似HTML，用于构建小程序的结构；wxss是基于WXSS（WeiXin Style Sheets）的样式表，类似CSS，负责小程序的样式设计。在本章节中，我们将深入探讨wxml和wxss如何在自定义头部中发挥作用，并通过实践应用来展示它们的具体操作和效果。

2.1 wxml在自定义头部的作用和实践

2.1.1 wxml的基本语法和元素

wxml使用标签来定义页面结构，这些标签有其特定的属性和事件。wxml的基本元素包括view、text、button等。例如：

<view class="container">
  <text class="title">自定义头部</text>
</view>

在这个简单的例子中，view标签定义了一个容器，text标签则用于显示文字“自定义头部”。wxml还支持条件渲染（如wx:if）、列表渲染（如wx:for）、事件绑定（如bindtap）等高级功能。

2.1.2 wxml在自定义头部的具体应用

在自定义头部中，wxml可用于创建动态的内容区域和交互元素。例如，我们可能需要在头部显示用户的头像和名字，并且当用户点击头像时，跳转到个人资料页面。

<view class="header">
  <image src="{{userInfo.avatarUrl}}" bindtap="goToProfile"></image>
  <text>{{userInfo.nickName}}</text>
</view>

这段代码将显示一个头像和用户名。当头像被点击时，会触发名为"goToProfile"的函数，从而实现页面的跳转。这里使用了数据绑定，将wxml与小程序的js逻辑部分连接起来。

2.2 wxss在自定义头部的作用和实践

2.2.1 wxss的基本语法和样式

wxss用于定义小程序的样式，包括设置尺寸、颜色、布局等。它的语法基本上与CSS相同，但也包含了一些特殊的属性和单位，例如rpx（可适应屏幕宽度的单位）。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
  background-color: #f8f8f8;
}

这段代码定义了头部的布局为flex布局，并在水平和垂直方向上居中，同时设置了内边距和背景颜色。

2.2.2 wxss在自定义头部的具体应用

在自定义头部中，wxss可以帮助我们创建美观、响应式的用户界面。例如，根据屏幕大小或者用户的状态（如夜间模式），动态改变头部样式。

@media screen and (max-width: 320px) {
  .header {
    padding: 5rpx;
  }
}

上述代码中的@media查询允许我们为屏幕宽度小于320px的设备设置特殊的样式规则，比如减小内边距。

.header[night-mode="true"] {
  background-color: #333;
  color: #fff;
}

而这段代码则通过属性选择器来根据data属性"night-mode"的值决定背景颜色和文字颜色，实现夜间模式下的样式变化。

通过本章节的讨论，我们可以看出wxml和wxss在自定义头部设计中扮演的角色。它们提供了灵活的界面构建和样式设计手段，使得小程序的头部能够满足多样化的交互需求和视觉效果。接下来的章节将进一步介绍自定义头部组件的创建和样式设置，以及如何处理头部事件，实现动态更新，优化性能，并进行全局配置。

3. 自定义头部组件创建与样式设置

3.1 自定义头部组件的创建

3.1.1 组件的创建方法和步骤

在微信小程序中，自定义头部组件的创建是一个基础且关键的步骤。组件化开发有助于提升代码的复用性，并且便于后期维护和扩展。创建自定义头部组件，首先要遵循小程序组件的基本规范，包括创建组件对应的四个基本文件： .json 配置文件、 .wxml 结构文件、 .wxss 样式文件和 .js 逻辑处理文件。

创建步骤 如下：

1. 创建组件目录 ：首先在小程序项目的 components 目录下创建一个新的文件夹，例如命名为 custom-header 。

2. 创建组件的四个基础文件 ：

   • custom-header.json ：配置文件，声明组件的属性等信息。
   • custom-header.wxml ：结构文件，用于定义组件的布局。
   • custom-header.wxss ：样式文件，用于定义组件的样式。
   • custom-header.js ：逻辑文件，用于处理组件的数据和事件。

3. 组件配置文件 ：在 custom-header.json 文件中，声明组件的一些基本信息，如下：

{
  "component": true,
  "usingComponents": {}
}

其中 "component": true 表明这个文件夹是一个小程序组件。

1. 组件结构文件 ：在 custom-header.wxml 文件中定义头部的布局，例如：

<view class="header">
  <text class="title">这是标题</text>
</view>

1. 组件样式文件 ：在 custom-header.wxss 文件中定义头部的样式：

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background-color: #f8f8f8;
}
.title {
  color: #333;
  font-weight: bold;
}

1. 组件逻辑文件 ：在 custom-header.js 文件中，定义组件的数据和事件，如果需要：

Component({
  properties: {
    title: {
      type: String,
      value: '默认标题'
    }
  },
  methods: {
    // 这里可以添加事件处理函数等
  }
});

通过以上步骤，自定义头部组件的基本结构就创建完成了。开发者可以根据实际需求添加更多属性和事件处理逻辑。

3.1.2 组件的属性和事件

在自定义头部组件中，我们往往需要根据父组件传入的不同属性值（props）来展示不同的内容或执行不同的样式变化，同时也需要在内部定义一些事件来与外部进行交互。

属性（Props）的使用

为了使组件具有更好的灵活性和可复用性，我们可以在组件的 properties 中定义一些对外暴露的属性。例如，在 custom-header 组件中，我们可以定义一个 title 属性：

Component({
  properties: {
    title: {
      type: String,
      value: '默认标题'
    }
  },
  // ...
});

在父组件中，你可以像使用普通标签一样使用这个组件，并传入 title 属性：

<custom-header title="自定义标题"></custom-header>

这会使得子组件中的标题显示为 "自定义标题"。

事件（Events）的创建和绑定

在某些情况下，组件内部需要向外部发送消息，这时我们可以使用事件来完成。事件的创建和绑定在组件的 methods 中定义，然后通过 triggerEvent 方法触发。以下是一个点击事件的示例：

首先，在组件的逻辑文件 custom-header.js 中定义事件：

Component({
  methods: {
    onTitleTap: function () {
      this.triggerEvent('titleTap');
    }
  }
});

然后，在 custom-header.wxml 中为需要触发事件的元素绑定事件处理函数：

<view class="header" bindtap="onTitleTap">
  <text class="title">点击我</text>
</view>

最后，在使用组件的父页面或父组件中监听这个事件：

<custom-header bind:titleTap="handleTitleTap"></custom-header>

在父组件的逻辑文件中定义事件处理函数 handleTitleTap ：

Page({
  handleTitleTap: function() {
    console.log('标题被点击了！');
  }
});

这样就实现了自定义头部组件的属性和事件的基本使用，使得组件在不同场景下能够灵活展示内容，并与外部进行交互。

4. 自定义头部事件处理

4.1 自定义头部的事件类型和触发机制

4.1.1 常见的事件类型

微信小程序的自定义头部支持多种事件类型，常见的事件包括 touchstart （触摸开始）、 touchmove （触摸移动）、 touchend （触摸结束）、 tap （轻触）、 longpress （长按）等。通过这些事件，开发者可以为用户交互提供丰富的反馈和响应机制。例如， touchstart 和 touchend 可用于实现拖动效果，而 tap 可用于按钮点击事件。

4.1.2 事件的触发机制和处理方式

事件的触发机制是基于用户的交互动作，例如触摸屏幕、手指移动或者点击。当用户在自定义头部上触发一个事件时，小程序会根据事件类型和绑定的事件处理函数来响应用户的动作。事件处理函数通常通过在WXML中使用 bind 或 catch 关键字来绑定。使用 bind 关键字时，事件处理函数不会阻止事件冒泡，而 catch 关键字则会阻止事件继续向上冒泡。

<!-- WXML 示例 -->
<view bindtap="handleTap" catchtouchstart="handleTouchStart">点击我</view>

在JavaScript中，事件处理函数需要定义相应的逻辑：

// JavaScript 示例
Page({
  handleTap: function() {
    console.log("用户点击了自定义头部");
  },
  handleTouchStart: function() {
    console.log("用户开始触摸自定义头部");
  }
});

4.2 自定义头部事件的实践应用

4.2.1 事件处理在自定义头部的具体应用

在自定义头部中实现事件处理，通常涉及到响应用户的动作，并执行特定的逻辑。例如，可以在头部添加一个搜索按钮，当用户点击该按钮时，可以触发一个搜索框的显示。

<!-- WXML 示例 -->
<view>
  <button bindtap="toggleSearch">搜索</button>
  <view wx:if="{{isSearchBoxVisible}}">
    <!-- 搜索框内容 -->
  </view>
</view>

// JavaScript 示例
Page({
  data: {
    isSearchBoxVisible: false
  },
  toggleSearch: function() {
    this.setData({
      isSearchBoxVisible: !this.data.isSearchBoxVisible
    });
  }
});

4.2.2 实践中的常见问题及解决方案

在实际应用中，可能会遇到事件不触发或触发错误的问题。解决这些问题，首先需要检查是否正确绑定了事件处理器，并确认事件处理器的名称与定义的函数名称一致。其次，需要检查事件冒泡行为是否符合预期，有时可能需要在父级元素上阻止事件冒泡。此外，对于触摸事件，需要考虑到设备的触摸响应时间和用户操作的准确性，合理设计事件触发条件和反馈。

// 检查和调试事件
Page({
  onReady: function() {
    const view = wx.createSelectorQuery().select('#myView').node();
    view.on('tap', (e) => {
      console.log('按钮被点击', e);
    });
  }
});

以上示例中，通过 wx.createSelectorQuery().select() 方法定位页面中的视图元素，并通过 .on() 方法为元素添加事件监听器进行调试，有助于开发者更好地理解事件触发机制和调试过程。

在使用自定义头部时，合理地处理和响应用户事件，可以极大地提升用户的交互体验和操作流畅度。从基本的事件类型到复杂的交互逻辑，每一步都需要开发者精心设计和测试，以确保最终的应用效果和用户体验。

5. 自定义头部动态更新

5.1 自定义头部动态更新的原理和方法

动态更新是自定义头部不可或缺的功能之一，它允许根据用户的操作或数据的变化实时地更新头部内容。在微信小程序中，动态更新涉及到小程序的数据绑定、生命周期函数、组件属性更新等多个方面的知识。

5.1.1 动态更新的原理和应用场景

在小程序中，页面是由多个组件构成的，自定义头部作为页面的一个组成部分，通常会涉及到数据的动态绑定和组件属性的实时更新。动态更新的原理是利用小程序的数据绑定机制，将数据对象绑定到WXML模板上，当数据对象变化时，模板会自动更新，反映到界面上。

应用场景包括： - 根据网络请求返回的数据实时更新头部信息。 - 在用户交互过程中，如点击按钮，触发头部信息的变化。 - 根据当前页面状态显示或隐藏某些头部元素。

5.1.2 动态更新的实现方法和步骤

在微信小程序中，动态更新可以通过以下步骤实现： 1. 在页面的 .js 文件中定义数据对象。 2. 在 .wxml 文件中使用 {{}} 语法将数据对象绑定到组件属性上。 3. 使用小程序的API如 setData 方法来更新数据对象。 4. 小程序框架会在数据变化时自动调用 setData 更新页面。

示例代码

// index.js
Page({
  data: {
    headerTitle: '欢迎使用'
  },
  onLoad: function() {
    // 页面加载时执行的初始化操作
    this.setData({
      headerTitle: '首页'
    });
  },
  updateHeaderTitle: function(newTitle) {
    // 更新头部标题的方法
    this.setData({
      headerTitle: newTitle
    });
  }
});

<!-- index.wxml -->
<view>
  <custom-header title="{{headerTitle}}"></custom-header>
</view>

上述示例代码展示了如何在小程序页面中动态更新自定义头部的标题。 headerTitle 数据对象存储了标题内容，在页面加载时通过 onLoad 函数初始化，并且定义了一个 updateHeaderTitle 函数来更新标题。

5.2 自定义头部动态更新的实践应用

5.2.1 动态更新在自定义头部的具体应用

动态更新在自定义头部中的应用非常广泛，例如在电商小程序中，用户购物车的数量可能随时在变化，头部就需要动态地显示购物车中商品的数量。

示例场景

假设我们有一个电商小程序，用户的购物车图标需要显示当前的购物车商品数量。我们可以通过监听购物车数据变化来实现这一功能。

// cart.js
Component({
  data: {
    cartCount: 0
  },
  onLoad: function() {
    // 获取当前购物车商品数量
    this.setData({
      cartCount: getCurrentCartCount()
    });
  },
  methods: {
    onCartChange: function() {
      // 购物车内容发生变化时触发
      this.setData({
        cartCount: getCurrentCartCount()
      });
    }
  }
});

<!-- cart.wxml -->
<view class="cart-icon">
  <text>购物车</text>
  <text class="count">{{cartCount}}</text>
</view>

在这个例子中， getCurrentCartCount 是一个假定的函数，用于获取当前购物车的商品数量。每当购物车数据发生变化时， onCartChange 方法会被调用，更新 cartCount 数据，从而触发页面的更新。

5.2.2 实践中的常见问题及解决方案

在实际开发中，可能会遇到动态更新不生效或更新延迟的问题，以下是一些常见的问题及解决方案：

问题1：数据更新后页面没有响应

解决方案 ：检查是否正确使用了 setData 方法更新数据。确保在数据对象中指定的字段是正确的，并且在 setData 方法中使用了冒号 : 作为分隔符。

问题2：性能问题，页面更新导致卡顿

解决方案 ：当需要更新大量数据时，只更新发生变化的那部分数据，避免使用空对象 {} 作为 setData 的参数，这样可以减少不必要的DOM操作。另外，合理使用节流（throttle）和防抖（debounce）技术，减少更新频率。

问题3：事件监听混乱，导致数据更新错误

解决方案 ：合理管理事件监听器，特别是在页面组件卸载时及时移除监听器，避免垃圾回收不彻底或内存泄漏。在 onUnload 生命周期函数中清理相关事件监听。

通过以上的实践应用和解决方案，开发者可以更高效地在小程序中实现自定义头部的动态更新功能，提升用户的交互体验。

6. 自定义头部适配性与性能优化

随着微信小程序的广泛使用，开发者越来越多地关注于小程序的用户体验和性能表现。自定义头部是小程序中与用户交互最多的部分之一，它的适配性和性能优化对于整个应用的质量有着直接的影响。本章节将深入探讨自定义头部的适配性问题及其解决方案，以及性能优化的方法和实践。

6.1 自定义头部的适配性问题和解决方案

6.1.1 适配性问题的产生原因和影响

在微信小程序中，由于不同设备屏幕尺寸和分辨率的多样性，自定义头部的适配性问题十分突出。开发者在设计时往往难以兼顾所有设备，这会导致头部在某些设备上出现布局错乱、文本溢出或按钮无法点击等问题。这些问题不仅会影响用户的视觉体验，还可能影响到操作的可用性，降低用户满意度。

6.1.2 解决适配性问题的方法和技巧

为了解决自定义头部的适配性问题，开发者可以采取以下几种方法：

6.1.2.1 使用微信小程序提供的布局单位

微信小程序提供了 rpx （responsive pixel）单位，可以根据屏幕宽度进行自适应。使用 rpx 单位可以较好地解决不同屏幕尺寸下布局自适应的问题。

.header {
  width: 375rpx; /* 在不同设备上自动缩放宽度 */
}

6.1.2.2 利用CSS媒体查询调整样式

CSS的媒体查询可以根据不同的屏幕条件加载不同的样式。通过媒体查询，开发者可以为不同尺寸的屏幕定制合适的样式，从而提高头部的适配性。

@media (max-width: 375px) {
  .header {
    padding: 10rpx;
  }
}
@media (min-width: 375px) and (max-width: 768px) {
  .header {
    padding: 15rpx;
  }
}

6.1.2.3 使用flex布局优化响应式设计

Flex布局是一种更加灵活的布局方式，它可以让头部组件的子元素在空间允许的情况下自动伸缩。通过合理地设置flex属性，开发者可以确保头部组件在不同屏幕尺寸下都保持良好的布局和比例。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

6.1.3 适配性问题的实践应用

适配性的优化不仅涉及理论知识，还需要通过实践进行检验。开发者可以通过以下步骤将理论应用到实际项目中：

6.1.3.1 设计适配方案

• 制定布局策略：确定头部的布局方式和容器宽度。
• 设计不同屏幕尺寸下的布局方案：为常见的设备屏幕尺寸设计相应的布局方案。

6.1.3.2 编写适配代码

• 将布局单位转换为 rpx 。
• 使用媒体查询添加特定设备的样式规则。
• 利用flex布局进行响应式设计。

6.1.3.3 测试和调整

• 在多种设备上测试头部的显示效果。
• 根据测试结果调整布局和样式。
• 重复测试和调整，直到达到理想的效果。

6.2 自定义头部的性能优化方法和实践

6.2.1 性能优化的方法和意义

性能优化是确保小程序快速响应和高效运行的关键。对于自定义头部而言，性能优化主要是减少渲染成本和提高响应速度。例如，减少DOM操作，使用数据绑定来减少不必要的页面刷新等。性能优化不仅可以提升用户体验，还能减少服务器的压力。

6.2.2 性能优化在自定义头部的具体应用

在自定义头部的性能优化中，以下方法是常见的实践：

6.2.2.1 使用条件渲染减少不必要的渲染

条件渲染可以根据实际情况决定是否渲染某个元素。在头部中，如果某些元素只在特定条件下显示，使用条件渲染可以避免不必要的渲染操作，从而优化性能。

<!-- 使用wx:if进行条件渲染 -->
<view wx:if="{{showHeaderItem}}">
  <!-- 头部组件内容 -->
</view>

6.2.2.2 优化图片资源

图片是小程序中常见的资源，但在不同网络环境下加载图片可能导致性能问题。可以使用微信小程序提供的图片懒加载技术，提高加载效率。

<!-- 图片懒加载 -->
<image data-src="{{imgUrl}}" lazy-load="true"></image>

6.2.2.3 使用WXS优化数据处理

WXS是微信小程序的脚本语言，运行在小程序客户端，相比于JavaScript，它在小程序中执行性能更优。在进行一些轻量级的数据处理时，使用WXS可以提高数据处理的速度。

// WXS数据处理示例
var util = require('./utils.js');
module.exports = {
  formatTime: function(time) {
    return util.formatTime(time);
  }
}

6.2.2.4 减少全局变量的使用

全局变量在小程序中可能会导致命名冲突和性能问题。建议使用组件的data属性和事件通信来管理状态，这样可以提高数据的可控性和小程序的性能。

// 在组件内部使用data属性管理状态
Page({
  data: {
    headerTitle: '小程序首页'
  },
  onLoad: function() {
    this.setData({
      headerTitle: '新标题'
    });
  }
});

6.2.3 性能优化的实践应用

性能优化的实践应用需要综合考虑小程序的具体需求和运行环境。以下是一个性能优化实践应用的示例：

6.2.3.1 评估性能瓶颈

• 分析小程序的运行数据，找出性能瓶颈。
• 了解用户主要使用的设备类型和网络环境。

6.2.3.2 制定优化策略

• 根据性能瓶颈，制定针对性的优化策略。
• 优先考虑对用户体验影响最大的优化点。

6.2.3.3 实施和测试

• 在代码中实施优化策略。
• 进行多轮性能测试，确保优化效果。

6.2.3.4 持续监控和迭代

• 将性能监控纳入持续集成流程。
• 根据用户反馈和监控数据持续进行优化迭代。

通过上述方法和步骤，开发者可以逐步提升自定义头部的性能表现，从而改善整个小程序的用户体验。

在第六章的探讨中，我们首先介绍了自定义头部适配性问题的产生原因和影响，并提供了解决方案。接着，我们探讨了性能优化的意义和方法，并通过实际的实践应用，向开发者展示了如何在小程序中优化自定义头部。本章节内容旨在帮助开发者在实践中应用理论知识，解决实际问题，提高小程序的整体品质。

7. 自定义头部的全局配置

自定义头部的全局配置是管理微信小程序中自定义头部行为的重要手段，它允许开发者定义一些默认行为和外观，以保证自定义头部在不同页面和组件中的一致性和可复用性。全局配置能够带来更加一致的用户体验和更高效的开发过程。

7.1 自定义头部的全局配置方法和步骤

7.1.1 全局配置的作用和意义

全局配置对于微信小程序来说，相当于制定了一系列的"规则"，这些规则决定了自定义头部的表现形式以及其交互逻辑。合理地使用全局配置，可以减少重复代码的编写，提高小程序的可维护性。

例如，当需要为小程序中所有页面的头部添加相同的返回按钮，而不是在每个页面的wxml文件中单独编写按钮代码，可以通过全局配置来实现。

7.1.2 全局配置的具体方法和步骤

要配置自定义头部的全局设置，首先需要打开项目的根目录下的 app.json 文件。在这个JSON文件中，你可以定义小程序的全局配置，包括自定义头部的一些设置。

举个例子，如果想要设置所有页面的头部背景色为蓝色，可以在 app.json 的 window 属性中添加如下配置：

{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0000FF",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "全局配置示例"
  }
}

这样配置后，小程序中所有页面的头部背景都会变为蓝色。除了颜色，还可以设置其他属性，如头部的高度、标题颜色和位置等。

7.2 自定义头部全局配置的实践应用

7.2.1 全局配置在自定义头部的具体应用

全局配置允许开发者针对自定义头部的多个方面进行设置。例如，如果你希望小程序的所有页面都能够响应用户点击返回按钮时的事件，可以在 app.js 中设置全局事件处理函数。

App({
  onLaunch: function() {
    // 小程序启动之后 触发
  },
  onShow: function() {
    // 小程序打开之后 触发
  },
  onHide: function() {
    // 小程序从前台进入后台时触发
  },
  globalData: {
    userInfo: null
  },
  onNavigationBarButtonTap: function(e) {
    // 用户点击自定义头部按钮时触发
    console.log(e)
  }
})

此外，如果你需要针对特定页面进行自定义头部的个性化设置，可以单独在该页面的 .json 配置文件中进行覆盖。

7.2.2 实践中的常见问题及解决方案

在进行全局配置时，开发者可能会遇到一些问题。比如，如果全局配置与页面级别的配置发生冲突，通常页面级别的配置会覆盖全局配置。因此，建议在配置时要明确优先级。

另外，全局配置的修改可能需要小程序发布新的版本才能生效。如果开发者希望快速查看全局配置的效果，可以尝试清空缓存或在微信开发者工具中进行预览。

全局配置是提高开发效率和维护性的重要工具，通过合理使用全局配置，可以减少不必要的重复工作，使得小程序的头部更加一致且易于管理。

本文还有配套的精品资源，点击获取

简介：在微信小程序开发中，自定义头部是提供个性化用户体验的常见需求。通过使用 wxml 和 wxss ，开发者可以自由设计页面顶部的样式和功能。本指南详细介绍了自定义头部的实现方法，涉及的技术点，以及优化策略。通过组件创建、样式设置、事件处理、动态更新、适配与性能优化、全局配置等方面，开发者可以实现功能丰富、样式统一的自定义头部，并根据具体需求进行调整和优化。

本文还有配套的精品资源，点击获取