微信原生小程序

[app.json 中配置](#app.json 中配置)
[project.config.json 中配置](#project.config.json 中配置)
[project.private.config.json 中配置](#project.private.config.json 中配置)
[sitemap.json 中配置](#sitemap.json 中配置)
[index.json 中配置](#index.json 中配置)
常用全局配置
常用页面配置
WXML
[navigator 组件](#navigator 组件)
- 基本用法
- 常用属性
- 事件
[scroll-view 组件](#scroll-view 组件)
- 基本用法
[1. 创建可垂直滚动的区域](#1. 创建可垂直滚动的区域)
[2. 创建可水平滚动的区域](#2. 创建可水平滚动的区域)
事件
[1. 事件类型](#1. 事件类型)
[2. 事件绑定](#2. 事件绑定)
[3. 事件对象](#3. 事件对象)
[4. 使用事件传递参数](#4. 使用事件传递参数)
[1. 数据绑定的基础](#1. 数据绑定的基础)
- [2. 如何工作](#2. 如何工作)
- [3. 动态绑定的优势](#3. 动态绑定的优势)
- [4. 复杂的动态绑定](#4. 复杂的动态绑定)
[this.setData() 更新变量](#this.setData() 更新变量)
过程分析
- 更新策略与防抖

app.json 中配置

json 复制代码

{
  // 定义应用包含的页面列表
  "pages": [
    "pages/index/index" // 这里指定了一个页面，通常是首页
  ],

  // 窗口配置，设置导航栏等属性
  "window": {
    
    "navigationBarTextStyle": "black", // 设置导航栏文字颜色为黑色
    "navigationStyle": "custom" // 设置导航栏样式为自定义
  },

  // 应用的样式版本，"v2" 可能表示使用第二版的样式规范
  "style": "v2",

  // 指定使用的渲染引擎
  "renderer": "skyline",

  // 渲染引擎的详细选项配置
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true, // 设置为 true，表示默认组件为块级显示
      "disableABTest": true, // 禁用 A/B 测试功能
      "sdkVersionBegin": "3.0.0", // 指定渲染的 SDK 版本起始为 3.0.0
      "sdkVersionEnd": "15.255.255" // 指定渲染的 SDK 版本结束为 15.255.255
    }
  },

  // 使用的组件框架
  "componentFramework": "glass-easel", // 指定使用的 UI 组件框架为 "glass-easel"

  // 站点地图文件的位置，定义页面的关系与结构
  "sitemapLocation": "sitemap.json", // 指定站点地图路径为 sitemap.json

  // 懒加载策略配置
  "lazyCodeLoading": "requiredComponents" // 只有在需要时加载特定组件，以提高性能
}

project.config.json 中配置

json 复制代码

{
    // 小程序的唯一标识符
    "appid": "XXXXXXXXXXXX",
    
    // 编译类型，表示当前项目为小程序
    "compileType": "miniprogram",
    
    // 小程序的库版本，表示使用的开发工具版本
    "libVersion": "3.6.0",
    
    // 打包选项配置
    "packOptions": {
        "ignore": [], // 指定在打包时需要忽略的文件或目录列表
        "include": [] // 指定在打包时需要包含的文件或目录列表
    },
    
    // 设置项配置
    "setting": {
        "coverView": true, // 是否支持覆盖视图（由 cover-view 组件创建的视图）
        "es6": true, // 是否开启 ES6 语法支持
        "postcss": true, // 是否开启 PostCSS 支持
        "minified": true, // 是否开启代码压缩
        "enhance": true, // 是否增强编译功能（例如支持一些新特性）
        "showShadowRootInWxmlPanel": true, // 是否在 WXML 面板中显示 Shadow DOM
        "packNpmRelationList": [], // 包含 NPM 关系的列表，通常用于跟踪依赖关系
        "babelSetting": {
            "ignore": [], // Babel 转换时需要忽略的文件列表
            "disablePlugins": [], // 不启用的 Babel 插件列表
            "outputPath": "" // Babel 转换的输出路径
        }
    },
    
    // 条件配置，通常用于描述不同平台或版本的特定配置
    "condition": {},
    
    // 编辑器设置
    "editorSetting": {
        "tabIndent": "insertSpaces", // 设置使用空格插入缩进，而不是制表符
        "tabSize": 4 // 设置每个缩进级别的空格数量为 4
    }
}

project.private.config.json 中配置

json 复制代码

{
    // 项目的描述信息，说明此文件的作用
    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
    
    // 项目的名称
    "projectname": "testDemo",
    
    // 设置项配置
    "setting": {
        // 是否启用编译热重载功能
        "compileHotReLoad": true // 设置为 true，表示在修改代码后自动刷新，提升开发效率
    }
}

sitemap.json 中配置

json 复制代码

{
    // 文件说明，提供关于此文件的更多信息
    "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
    
    // 规则数组，定义页面访问权限
    "rules": [{
        // 允许的操作类型，这里是允许
        "action": "allow",
        
        // 指定适用的页面，"*" 表示所有页面
        "page": "*"
    }]
}

index.json 中配置

json 复制代码

{
  // 使用的组件配置
  "usingComponents": {
    // 自定义组件的名称与路径映射
    "navigation-bar": "/components/navigation-bar/navigation-bar" // 这里定义了一个名为 navigation-bar 的组件，其路径为 /components/navigation-bar/navigation-bar
  }
}

常用全局配置

json 复制代码

{
  // 定义小程序的页面路径，必须以 "/pages/" 开头
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  // 全局窗口相关配置
  "window": {
    // 导航条标题
    "navigationBarTitleText": "我的小程序",
    // 导航条背景颜色
    "navigationBarBackgroundColor": "#ffffff",
    // 导航条文字颜色，取值为 "black" 或 "white"
    "navigationBarTextStyle": "black",
    // 滚动条背景色（iOS 10.0 以上版本支持）
    "backgroundColor": "#eeeeee",
    // 窗口背景色
    "backgroundTextStyle": "light",
    // 透明状态栏，取值为 "true" 或 "false"
    "transparentTitle": "auto"
  },
  
  // TabBar 配置，支持底部导航
  "tabBar": {
    // 配置项列表
    "list": [
      {
        "pagePath": "pages/index/index",  // 页面路径
        "text": "首页",                    // Tab 标题
        "iconPath": "icon/home.png",      // 未选中时的图标路径
        "selectedIconPath": "icon/home-active.png" // 选中时的图标路径
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icon/logs.png",
        "selectedIconPath": "icon/logs-active.png"
      }
    ],
    // 未选中时文字颜色
    "color": "#999999",
    // 选中时文字颜色
    "selectedColor": "#1c1c1c",
    // TabBar 背景颜色
    "backgroundColor": "#ffffff",
    // TabBar 边框颜色，仅支持 "black" 和 "white"
    "borderStyle": "black"
  },

  // 网络请求超时设置
  "networkTimeout": {
    // 请求超时时间，单位为毫秒
    "request": 10000,
    // WebSocket 连接超时时间
    "connectSocket": 10000,
    // 文件上传超时时间
    "uploadFile": 10000,
    // 文件下载超时时间
    "downloadFile": 10000
  },

  // 全局配置的窗口表现
  "style": "v2", // 使用 v2 的小程序样式，默认为 v1

  // 设备适配
  "deviceOrientation": "portrait", // 设备方向，取值为 "portrait" 或 "landscape"

  // 聊天会话消息配置
  "chat": {
    "useExtendedFile": true // 是否使用扩展文件
  },

  // 小程序的功能权限设置
  "permission": {
    // 设置小程序的权限范围
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序提供定位服务"
    }
  },

  // 使用的语言，默认为 "zh_CN"
  "language": "zh_CN",

  // 小程序的背景色
  "backgroundColor": "#ffffff",

  // 小程序的密钥，在小程序上线后可用
  "appId": "your-app-id"
}

常用页面配置

json 复制代码

{
  // 页面标题
  "navigationBarTitleText": "首页",
  
  // 页面窗口背景色
  "backgroundColor": "#ffffff",
  
  // 页面窗口背景图
  "backgroundImage": "url_to_background_image",
  
  // 页面使用的导航栏样式
  "navigationBarBackgroundColor": "#ffffff",
  
  // 导航栏文本颜色，取值为 "black" 或 "white"
  "navigationBarTextStyle": "black",
  
  // 页面下拉背景色
  "backgroundTextStyle": "light",
  
  // 是否启用下拉刷新
  "enablePullDownRefresh": true,

  // 页面上拉触底事件的处理函数
  "onReachBottomDistance": 50,

  // 是否开启分享功能（分享转发）
  "enableShareAppMessage": true
}

WXML

WXML（WeiXin Markup Language）是微信小程序的标记语言，用于描述小程序的页面结构。这种语言与 HTML 非常相似，但有一些独特的特性和标签，专为微信小程序的开发所设计。

基本标签

<template>：模板标签，用于定义模板，可以将一些公共代码抽象成模板，在不同的页面中复用。
<import>：导入标签，用于导入其他 WXML 文件，可以将公共组件抽象成单独的 WXML 文件，在不同的页面中引用。
<block>：块标签，用于定义一个可复用的代码块，可以将一些公共代码抽象成块，在不同的位置引用。
<if>：条件标签，用于判断条件，当条件成立时才渲染该块内容。
<for>：循环标签，用于循环渲染某些内容。
<switch>：分支标签，用于根据条件渲染不同内容。
<case>：分支条件标签，用于指定某个分支条件。
<default>：默认分支标签，用于指定默认分支。
<script>：脚本标签，用于编写 JavaScript 代码。
<style>：样式标签，用于编写样式代码。
<navigator>：导航器标签，用于实现页面间的跳转。
<redirect>：重定向标签，用于实现页面间的跳转。
<slot>：插槽标签，用于定义页面的可插拔区域。
<form>：表单标签，用于收集用户输入。
<button>：按钮标签，用于触发事件。
<checkbox>：复选框标签，用于选择多个选项。
<radio>：单选框标签，用于选择单个选项。
<slider>：滑动条标签，用于调节值。
<view>：视图容器，用于容纳其他组件，并提供上下左右四个方向的边距。
<text>：文本标签，用于显示文本内容。
<image>：图片标签，用于显示图片。
<input>：输入框标签，用于获取用户输入。
<scroll-view>：滚动视图容器，用于滚动显示内容。
<swiper>：轮播图容器，用于显示多张图片。
<movable-view>：可移动视图容器，用于实现拖拽、滑动操作。
<cover-view>：覆盖视图容器，用于覆盖在页面上的内容。
<icon>：图标标签，用于显示小程序内置的图标。
<progress>：进度条标签，用于显示进度。
<rich-text>：富文本标签，用于显示富文本内容。
<picker>：选择器标签，用于选择不同的数据。
<camera>：相机标签，用于拍照或从相册中选择照片。
<live-player>：直播播放器标签，用于播放实时视频流。
<live-pusher>：直播推流器标签，用于推送本地视频流到微信小程序直播间。
<map>：地图标签，用于显示地图。
<canvas>：画布标签，用于绘制图形。
<ad>：广告标签，用于显示广告。
<official-account>：微信官方账号标签，用于显示微信官方账号。
<open-data>：开放数据标签，用于获取微信小程序的开放数据。
<web-view>：网页标签，用于显示网页内容。

事件绑定

<view>：view 组件支持的事件有：touchstart、touchmove、touchend、touchcancel、tap、longpress、longtap、panstart、panmove、panend、pinchstart、pinchmove、pinchend、rotate。
<scroll-view>：scroll-view 组件支持的事件有：scroll、touchstart、touchmove、touchend、touchcancel、tap、longpress、longtap。
<input>：input 组件支持的事件有：input、focus、blur、confirm。
<picker>：picker 组件支持的事件有：change。
<camera>：camera 组件支持的事件有：stop、error。
<live-player>：live-player 组件支持的事件有：play、pause、ended、error。
<live-pusher>：live-pusher 组件支持的事件有：start、stop、pause、resume、first-frame、error。
<map>：map 组件支持的事件有：regionchange、tap、markertap、controltap。
<canvas>：canvas 组件支持的事件有：touchstart、touchmove、touchend、touchcancel、tap、longpress、longtap、press、move、rotate、scale。
<ad>：ad 组件支持的事件有：load、error。
<official-account>：official-account 组件支持的事件有：bindload。
<web-view>：web-view 组件支持的事件有：bindload、binderror。
<button>：button 组件支持的事件有：tap、longpress、longtap。
<checkbox>：checkbox 组件支持的事件有：change。
<radio>：radio 组件支持的事件有：change。
<slider>：slider 组件支持的事件有：change。
<switch>：switch 组件支持的事件有：change。
<navigator>：navigator 组件支持的事件有：load、error、redirect。
<redirect>：redirect 组件支持的事件有：bindredirect。
<slot>：slot 组件支持的事件无。

样式设置

通用样式：
width：设置组件的宽度。
height：设置组件的高度。
margin：设置组件的外边距。
padding：设置组件的内边距。
border：设置组件的边框。
border-radius：设置组件的圆角。
background-color：设置组件的背景色。
background-image：设置组件的背景图。
opacity：设置组件的透明度。
display：设置组件的显示方式。
visibility：设置组件的可见性。
overflow：设置组件的溢出处理方式。
z-index：设置组件的层级。
flex：设置组件的弹性布局。
line-height：设置组件的行高。
font-size：设置组件的字体大小。
font-weight：设置组件的字体粗细。
text-align：设置组件的文本对齐方式。
text-decoration：设置组件的文本装饰。
color：设置组件的文本颜色。
white-space：设置组件的空白处理方式。
word-wrap：设置组件的单词换行方式。
word-break：设置组件的字体换行方式。
text-overflow：设置组件的文本溢出处理方式。
text-shadow：设置组件的文本阴影。
box-shadow：设置组件的盒子阴影。
background-size：设置组件的背景图尺寸。
background-position：设置组件的背景图位置。
background-repeat：设置组件的背景图重复方式。
background-clip：设置组件的背景裁剪方式。
background-origin：设置组件的背景定位方式。
background-blend-mode：设置组件的背景混合模式。
transform：设置组件的变换。
animation：设置组件的动画。
transition：设置组件的过渡。

navigator 组件

在微信小程序中，<navigator> 组件用于实现页面间的跳转和导航。它可以帮助用户在小程序的不同页面之间移动，通常用于菜单、按钮或链接等场景。

基本用法

<navigator> 组件可以通过设置 url 属性来指定跳转的目标页面。通常，它的使用方式如下：

xml 复制代码

<navigator url="/pages/next/next" open-type="navigate">
  跳转到下一页
</navigator>

常用属性

c 复制代码

    url：必须的属性，指定跳转的目标页面路径，路径必须以 /pages/ 开头。
    
    open-type：设置导航的打开方式，可取值如下：
            navigate：跳转到指定的页面，并且加入到页面栈中，可使用返回操作。
            redirect：跳转到指定页面，但不保留当前页面，无法返回。
            switchTab：跳转到指定的 tabBar 页面。
            reLaunch：关闭所有页面，打开到应用内的某个页面。
            navigateBack：返回上一级页面。
    
    delta：在使用 navigateBack 时生效，指定返回的层级。
    
    hover-class：设置用户点击时的反馈效果类名（hover），默认为 navigator-hover。
    
    target：用于指定当点击时的目标，例如在外部网页打开。

事件

bindtap：当用户点击 navigator 组件时触发的事件，可以绑定事件处理函数。

json 复制代码

<view>
  <navigator url="/pages/next/next" open-type="navigate">
    <text>点击跳转到下一页</text>
  </navigator>
</view>

注意事项:

路径要求：指定的 url 路径必须正确，并且相应的页面文件必须存在。
性能考虑：在频繁跳转的场景中，选择合适的 open-type，以优化用户体验。
嵌套：在多个嵌套的中，只有最顶层的 navigator 会生效，内层的 navigator 将会被忽略。

c 复制代码

在微信小程序中，当一个页面的 navigationStyle 设置为 custom 时，该页面将完全自定义导航栏，这意味着默认的 window 配置中的导航栏样式（如 navigationBarTextStyle、navigationBarTitleText 和 navigationBarBackgroundColor）将不会生效。

处理自定义导航栏的步骤
设置 navigationStyle: custom

在你的页面的配置文件中（例如 page.json），你需要将 navigationStyle 设置为 custom。
        
        {
          "navigationStyle": "custom"
        }

自定义导航栏

由于系统导航栏不再使用，你必须在页面的 WXML 文件中手动创建一个自定义的导航栏。例如：
        
        custom-navigation.wxml
        
        <view class="custom-header">
          <text class="title">自定义标题</text>
          <button bindtap="goBack">返回</button>
        </view>
        
        custom-navigation.wxss
        
        .custom-header {
          height: 50px;
          background-color: #ffffff; /* 自定义背景颜色 */
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
        }
        .title {
          font-size: 18px;
        }

添加返回功能

在对应的 JS 文件中，你需要添加返回页面的功能：

        custom-navigation.js
        
        Page({
          goBack: function() {
            wx.navigateBack();
          }
        });

scroll-view 组件

在微信小程序中，scroll-view 组件用于创建可滚动的区域，支持垂直或水平滚动。它对于需要展示大量内容或者允许用户在有限空间内浏览内容非常有用。

基本用法

属性
scroll-y: 设置为 true 时，允许垂直滚动。
scroll-x: 设置为 true 时，允许水平滚动。
scroll-top: 设置垂直滚动的初始位置。
scroll-left: 设置水平滚动的初始位置。
enable-back-to-top: 是否使用右上角浮动的"返回顶部"按钮。
bindscroll: 滚动时的事件回调。
bindscrolltoupper: 滚动到顶部的事件回调。
bindscrolltolower: 滚动到底部的事件回调。

1. 创建可垂直滚动的区域

<view>
  <scroll-view scroll-y="true" style="height: 300px;"> // 允许垂直滚动
    <view class="item" wx:for="{{items}}" wx:key="{{index}}"> // 循环生成内容
      {{item}}// 循环内容
      {{index}}// 循环内容
    </view> 
  </scroll-view>
</view>

.item {
  height: 100px;
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
}

Page({
  data: {// 定义数据
    items: Array.from({ length: 20 }, (v, k) => `Item ${k + 1}`)// 生成 20 条内容
  }
});

2. 创建可水平滚动的区域

horizontal.wxml

<view>
  <scroll-view scroll-x="true" style="white-space: nowrap;">
    <view class="item" wx:for="{{items}}" wx:key="{{index}}">
      {{item}}
    </view>
  </scroll-view>
</view>

horizontal.wxss

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin-right: 5px;
}

horizontal.js

Page({
  data: {
    items: Array.from({ length: 20 }, (v, k) => `Item ${k + 1}`)
  }
});

事件

在微信小程序中，事件是用户与界面交互的主要方式。小程序提供了一套完整的事件处理机制，允许开发者响应用户的操作，如点击、滑动、输入等。下面详细介绍微信小程序的事件。

1. 事件类型

微信小程序中常用的事件类型包括：

点击事件：如 tap、longtap、click。
键盘事件：如 input、focus、blur。
滚动事件：如 scroll、scrolltoupper、scrolltolower。
触摸事件：如 touchstart、touchmove、touchend。
载入事件：如 load、error。

2. 事件绑定

在 WXML 中，可以通过 bind 或 catch 关键字绑定事件。

bind 绑定事件：事件会冒泡。
catch 捕获事件：事件不会冒泡。

<view>
  <button bindtap="handleTap">点击我</button>
  <input bindinput="handleInput" placeholder="请输入文本" />
</view>


Page({
  handleTap: function() {
    wx.showToast({
      title: '按钮被点击了！',
      icon: 'success'
    });
  },
  
  handleInput: function(event) {
    console.log('输入的内容为：', event.detail.value);
  }
});

3. 事件对象

事件处理函数的参数是事件对象，可以通过 event 来获取详细信息。常用属性包括：

event.type: 事件类型
event.target: 事件源
event.currentTarget: 当前元素
event.detail: 事件相关信息（如输入框中的值）

4. 使用事件传递参数

可以通过自定义属性向事件处理函数传递参数。

index.wxml

<button bindtap="handleTap" data-id="123">点击我</button>

index.js

handleTap: function(event) {
  const id = event.currentTarget.dataset.id;
  wx.showToast({
    title: `你点击的按钮ID是：${id}`,
    icon: 'none'
  });
}

1. 数据绑定的基础

在微信小程序中，数据通常存储在页面的 data 对象中。通过在 WXML 中使用双大括号 {{}} 语法，可以将这些数据动态绑定到页面的元素中。

示例代码

index.js

    Page({
    data: {
    message: 'Hello, World!',
    count: 0
    },

    // 增加计数的函数
    increment: function() {
    this.setData({
    count: this.data.count + 1
    });
    }
    });

index.wxml

    <view>
      <text>{{message}}</text> <!-- 动态绑定消息 -->
      <text>计数: {{count}}</text> <!-- 动态绑定计数 -->
      <button bindtap="increment">增加计数</button> <!-- 绑定点击事件 -->
    </view>

2. 如何工作

数据定义：在页面的 data 对象中定义了两个变量 message 和 count。
动态绑定：使用 {{}} 语法在 WXML 中动态绑定这些数据。
事件处理：当用户点击"增加计数"按钮时，会调用 increment 方法。
更新数据：在 increment 方法中，使用 this.setData() 更新 count 的值。当 count 的值变化时，绑定到界面中的 count 的文本也会自动更新。

3. 动态绑定的优势

   自动更新：每当数据变化时，UI 会自动更新，无需手动处理。
   简化代码：通过数据绑定，减少了更新 DOM 的复杂性。
   提高可维护性：界面和数据逻辑分离，使得代码更易于维护和理解。

4. 复杂的动态绑定

动态绑定不仅限于简单的文本和数字，你可以绑定数组、对象等，甚至可以在数据变化时渲染不同的组件。

例如使用 wx:for 指令来动态渲染列表：

index.js

Page({
data: {
items: ['Item 1', 'Item 2', 'Item 3']
}
});

index.wxml

<view>
  <view wx:for="{{items}}" wx:key="index">
    {{item}} <!-- 动态绑定数组项 -->
  </view>
</view>

this.setData() 更新变量

在微信小程序中，更新变量通常是通过 this.setData() 方法来实现的。这是一个非常重要的特性，因为它允许开发者在代码中修改页面的数据，从而使得 UI 界面能够自动响应这些数据的变化。

使用 this.setData() 更新变量

基本语法

this.setData() 方法接受一个对象作为参数，这个对象的键是要更新的变量名，值是新的值。

示例代码

1. 页面数据和逻辑
index.js

Page({
  data: {
    count: 0 // 初始化 count 变量
  },

  // 增加计数的函数
  increment: function() {
    this.setData({
      count: this.data.count + 1 // 更新 count 变量
    });
  },

  // 减少计数的函数
  decrement: function() {
    this.setData({
      count: this.data.count - 1 // 更新 count 变量
    });
  }
});

2. 用户界面
index.wxml

<view>
  <text>当前计数: {{count}}</text> <!-- 显示当前计数 -->
  <button bindtap="increment">增加计数</button> <!-- 增加按钮 -->
  <button bindtap="decrement">减少计数</button> <!-- 减少按钮 -->
</view>

过程分析

数据初始化：在 data 对象中定义了一个 count 变量，并初始化为 0。

更新变量：通过 increment 和 decrement 方法，使用 this.setData() 更新 count 变量的值。

这是通过访问当前 this.data.count 的值，然后加 1 或减 1 来实现的。

自动更新 UI：当调用 setData 方法更新变量后，绑定到 UI 的内容会自动更新，因此页面上显示的计数值也会随之变化。

注意事项

异步更新：setData 方法是异步的，更新后的数据可能并不会立即反映到 this.data 中。

如果需要在更新后立即执行某个逻辑，建议在 setData 的回调函数中进行。

更新策略与防抖

在某些情况下（例如频繁触发的事件），可以考虑使用防抖技术来避免多次调用 setData。

通过设定延迟，确保在一定时间内只处理一次更新，从而提高性能。

let timeout;
function debounceIncrement() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    this.increment(); // 实际调用
  }, 300); // 300 毫秒防抖
}

api

微信小程序提供了丰富的API，涵盖了网络请求、数据缓存、媒体处理、设备信息、界面操作、位置服务等多个方面。以下是一些常用的微信小程序API的详细介绍：

1. 网络请求
wx.request(Object object)：发起网络请求。

    url：开发者服务器接口地址。
    
    data：请求的参数。
    
    header：设置请求的 header。
    
    method：HTTP 请求方法。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.uploadFile(Object object)：上传文件。
    
    url：开发者服务器地址。
    
    filePath：要上传文件资源的路径。
    
    name：文件对应的 key，开发者在服务器端通过这个 key 可以获取到文件二进制内容。
    
    formData：HTTP 请求中其他额外的 form data。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.downloadFile(Object object)：下载文件。
    
    url：下载资源的 url。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

2. 数据缓存
wx.setStorage(Object object)：将数据存储在本地缓存中指定的 key 中。
    
    key：本地缓存中指定的 key。
    
    data：需要存储的内容。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.getStorage(Object object)：从本地缓存中异步获取指定 key 的内容。
    
    key：本地缓存中指定的 key。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.removeStorage(Object object)：从本地缓存中移除指定 key。
    
    key：本地缓存中指定的 key。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.clearStorage(Object object)：清理本地数据缓存。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

3. 媒体处理
wx.chooseImage(Object object)：从本地相册选择图片或使用相机拍照。
    
    count：最多可以选择的图片张数。
    
    sizeType：original 原图，compressed 压缩图，默认二者都有。
    
    sourceType：album 从相册选图，camera 使用相机，默认二者都有。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.previewImage(Object object)：在新页面中全屏预览图片。
    
    urls：需要预览的图片链接列表。
    
    current：当前显示图片的链接，默认为 urls 的第一张。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

4. 设备信息
wx.getSystemInfo(Object object)：获取系统信息。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。
    
    wx.getNetworkType(Object object)：获取网络类型。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

5. 界面操作
wx.showToast(Object object)：显示消息提示框。
    
    title：提示的内容。
    
    icon：图标，有效值 "success", "loading", "none"。
    
    image：自定义图标的本地路径，image 的优先级高于 icon。
    
    duration：提示的延迟时间，单位毫秒，默认 1500。
    
    mask：是否显示透明蒙层，防止触摸穿透，默认 false。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.showModal(Object object)：显示模态对话框。
    
    title：提示的标题。
    
    content：提示的内容。
    
    showCancel：是否显示取消按钮，默认为 true。
    
    cancelText：取消按钮的文字，默认为"取消"，最多 4 个字符。
    
    cancelColor：取消按钮的文字颜色，默认为"#000000"。
    
    confirmText：确定按钮的文字，默认为"确定"，最多 4 个字符。
    
    confirmColor：确定按钮的文字颜色，默认为"#3CC51F"。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

6. 位置服务
wx.getLocation(Object object)：获取当前的地理位置、速度。
    
    type：默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

wx.openLocation(Object object)：使用微信内置地图查看位置。
    
    latitude：纬度，范围为-90~90，负数表示南纬。
    
    longitude：经度，范围为-180~180，负数表示西经。
    
    scale：缩放比例，范围5~18，默认为18。
    
    name：位置名。
    
    address：地址的详细说明。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

7. 用户信息
wx.getUserInfo(Object object)：获取用户信息。
    
    withCredentials：是否带上登录态信息。
    
    lang：指定返回用户信息的语言，默认为"en"。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

8. 支付
wx.requestPayment(Object object)：发起微信支付。
    
    timeStamp：时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间。
    
    nonceStr：随机字符串，长度为32个字符以下。
    
    package：统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***。
    
    signType：签名算法，默认为 MD5，支持 HMAC-SHA256 和 MD5。
    
    paySign：签名，具体签名方案参见微信支付官方文档。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

9. 分享
wx.showShareMenu(Object object)：显示当前页面的转发按钮。
    
    withShareTicket：是否使用带 shareTicket 的转发。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。
    
wx.hideShareMenu(Object object)：隐藏当前页面的转发按钮。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

10. 其他
wx.login(Object object)：调用接口获取登录凭证（code）。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。
    
wx.checkSession(Object object)：检查登录态是否过期。
    
    success：接口调用成功的回调函数。
    
    fail：接口调用失败的回调函数。
    
    complete：接口调用结束的回调函数（调用成功、失败都会执行）。

scroll-view

在微信小程序中，scroll-view 组件用于创建可滚动的视图。它可以包含子组件，并允许用户在内容溢出时进行滚动。

c 复制代码

<view>
  <scroll-view scroll-y="true" style="height: 300px;">
    <view style="height: 600px; background-color: lightblue;">
      <!-- 可滚动的内容 -->
      <text>这里是可滚动的内容</text>
    </view>
  </scroll-view>
</view>
属性说明
scroll-y: 是否支持垂直滚动，设为 true 可使内容垂直滚动。
scroll-x: 是否支持水平滚动，设为 true 可使内容水平滚动。
style: 通过设置样式来限制 scroll-view 的高度或宽度，当内容超出时即可滚动。
scroll-top: 设置滚动位置，单位为px。
scroll-left: 设置水平滚动位置，单位为px。
upper-threshold: 页面上方距离顶部的距离，单位为px，达到此距离时触发 bindscrolltoupper 事件。
lower-threshold: 页面下方距离底部的距离，单位为px，达到此距离时触发 bindscrolltolower 事件。
事件
bindscroll: 滚动时触发。
bindscrolltoupper: 达到上边界时触发。
bindscrolltolower: 达到下边界时触发。

自定义组件

在微信小程序中，自定义组件是一种将功能封装为独立的组件，以便复用和管理的方式。自定义组件可以包含自身的模板、样式和逻辑，帮助你保持代码的清晰和模块化。

创建自定义组件的步骤

创建组件目录：在小程序的 components 目录下创建一个新的文件夹，例如 my-component。

创建组件文件：

my-component.wxml：组件的模板文件。

my-component.wxss：组件的样式文件。

my-component.js：组件的逻辑文件。

my-component.json：组件的配置文件（可选）。