爱的叹息的专栏

微信小程序 mark 事件传参摘要 mark 是微信小程序中用于事件传参的特殊属性，相比传统 data-xxx 方式具有更灵活的特性： 特点优势： 保留原始命名（无驼峰转换） 支持复杂数据结构（对象/数组） 语法更简洁直观 典型用法： 列表项点击传递完整对象：mark:item="{{item}}" 传递多个关联参数：mark:userInfo="{{user}}" mark:index="{{index}}" 访问方式： 通过 event.mar

微信小程序事件传参驼峰处理机制详解：通过data-xxx属性传递参数时，框架会自动将短横线命名转换为驼峰格式（如data-user-name变为userName）。文中包含完整代码示例，展示WXML绑定、JS接收参数的方法，并分析注意事项（大小写敏感、值类型限制等）。还对比了不同传参方式，提供复杂对象处理和命名风格建议，推荐使用kebab-case统一命名，通过event.currentTarget.dataset获取参数。该机制简化了组件与逻辑层的数据交互，提升开发效率。

微信小程序页面传参时会自动将短横线或下划线命名的参数转为驼峰命名。在onLoad(options)接收参数时，如user-name会自动变为userName。本文详解了参数传递机制，提供完整代码示例，并总结注意事项：仅适用于页面跳转传参，组件通信需手动处理；建议URL中使用kebab-case或snake_case命名，避免特殊字符；同名参数仅保留最后一个值。文末还给出组件传参建议和手动转换工具函数。掌握这一特性可提高开发效率和代码可维护性。

微信小程序事件处理中的 currentTarget 和 target 微信小程序事件对象包含两个关键属性： currentTarget：指向绑定事件的组件（始终不变） target：指向触发事件的实际组件（可能因冒泡而改变） 典型区别： 当点击子组件时： currentTarget: 父组件信息 target: 子组件信息 直接点击绑定组件时：两者指向相同组件 使用场景： currentTarget: 获取绑定了事件的组件信息 target: 识别事件的实际触发源 合理使用这两个属性可以实现更精准的事件处理

微信小程序的事件分为冒泡事件和非冒泡事件两大类。冒泡事件（如tap、longpress等）通过bind绑定，会从子组件向父组件传播，可使用stopPropagation阻止冒泡；非冒泡事件（如catchtap）通过catch绑定，不会向上传播。此外小程序还支持捕获事件（capture-bind/capture-catch）用于处理事件流的不同阶段。事件对象包含type、target等属性及stopPropagation方法。开发者应根据实际交互需求选择合适的事件类型，bind适合协同操作，catch适合独立

微信小程序不同版本阶段（开发版本、体验版本和线上版本）对比

微信小程序的事件系统是实现用户交互的核心机制，支持点击、滑动、输入等操作。事件分为冒泡事件和非冒泡事件，通过 bind、catch 和 mut-bind 进行绑定。bind 允许事件冒泡，catch 阻止冒泡，mut-bind 用于互斥绑定。开发者可以通过 data-* 传递参数，并在事件处理函数中获取。常用事件包括 tap、input、scroll 等，不同组件支持的事件类型不同。合理使用事件绑定方式，可以提升用户体验。

Base64 是一种将二进制数据编码为 ASCII 字符串的方法，常用于在网络上传输或嵌入到文本格式中（如 HTML、CSS、JSON）。其原理是将每 3 个字节的二进制数据拆分为 4 组 6 位数据，并转换为对应的 Base64 字符。虽然 Base64 编码后的数据体积增大约 33%，但其兼容性好，适合小文件（如图标、验证码）的传输。Java 提供了 Base64 工具类，可以轻松将图片转换为 Base64 字符串，前端可直接通过 data URL 使用。然而，Base64 图片无法缓存，且不利于 SE

在微信小程序中，图片展示主要通过<image>标签、背景图（CSS中的background-image）以及图片路径（本地路径、网络路径、Base64编码）实现。<image>标签功能全面，支持本地、网络和Base64图片，适合页面插图和动态图；背景图主要用于组件装饰，但仅支持本地资源和内联Base64；本地路径适合静态资源，网络路径适合动态内容，但需配置域名白名单；Base64编码适合小图标，但需控制大小以避免性能问题。建议优先使用<image>标签，谨慎使用背景图，并

本文介绍了如何在微信小程序中使用 scroll-view 组件实现水平和垂直滚动功能。示例代码包括 WXML、WXSS、JS 和 JSON 文件，展示了如何配置 scroll-view 的基本属性，如 scroll-x 和 scroll-y。文章还总结了 scroll-view 的常用属性，如 scroll-top、scroll-left 和 scroll-into-view，并提供了使用时的注意事项。通过该示例，开发者可以快速掌握 scroll-view 的使用方法，实现灵活的滚动效果。

本文介绍了微信小程序中页面跳转的路径配置和使用 navigator 组件时的注意事项。在 app.json 中，页面路径需配置为 "pages/list/list" 等形式。使用 navigator 进行跳转时，路径可以写为绝对路径（以 / 开头，如 /pages/list/list）或相对路径（如 ../list/list）。绝对路径从项目根目录开始查找，相对路径则相对于当前页面路径。为确保跳转成功，路径必须严格与 app.json 中的配置一致，且使用绝对路径时需添加开头的 /。错误

微信小程序的页面生命周期涵盖了页面从加载到卸载的全过程，开发者可以通过生命周期钩子函数在合适的时机执行初始化、数据请求、资源释放等操作。主要生命周期函数包括 onLoad（页面加载）、onReady（初次渲染完成）、onShow（页面显示）、onHide（页面隐藏）和 onUnload（页面卸载）。每个函数在特定时机触发，开发者可以根据需求进行相应操作，如初始化数据、操作 DOM、刷新数据或清理资源。合理利用这些生命周期函数有助于提升小程序的性能和用户体验。

微信小程序采用双线程架构，由逻辑层（JS）和视图层（WXML/WXSS）组成，两者通过小程序框架的通信机制进行数据同步和交互。逻辑层负责处理业务逻辑和数据更新，视图层负责页面渲染和事件绑定。小程序启动时，通过 App.onLaunch 进行初始化，页面加载时触发 Page.onLoad 和 Page.onShow。数据更新通过 setData 方法实现，触发脏值检查并更新视图。原生组件如 <map> 和 <video> 由客户端渲染，与 WebView 分离。开发者应优化性能，避免频

微信小程序的自定义组件生命周期函数分为组件本身生命周期和父子组件通信相关生命周期。组件的生命周期包括created、attached、ready、detached等，分别对应组件的创建、插入页面节点树、布局完成和移除等阶段。此外，show和hide用于监听页面显示和隐藏，updated在组件数据更新并重新渲染后触发。properties中的observer函数用于监听属性变化。合理使用这些生命周期函数，可以优化组件性能、实现复杂交互逻辑，并确保资源在组件销毁时得到清理。通过官方文档和代码示例，开发者可以更好

微信小程序的生命周期分为全局生命周期和页面生命周期两类。全局生命周期在 app.js 中定义，监听整个小程序的启动和显示状态，主要包括 onLaunch（小程序初始化）、onShow（小程序显示）、onHide（小程序隐藏）和 onError（全局错误处理）。页面生命周期在每个页面的 JS 文件中定义，控制页面的加载、显示、卸载等行为，主要包括 onLoad（页面加载）、onShow（页面显示）、onReady（页面渲染完成）、onHide（页面隐藏）和 onUnload（页面卸载）。通过合理使用这些生命周

微信小程序提供了六种页面跳转方式，分别通过 open-type 属性实现。navigate 保留当前页面跳转，redirect 关闭当前页面跳转，switchTab 跳转到 tabBar 页面并关闭其他页面，reLaunch 关闭所有页面并跳转，navigateBack 返回上一页或多级页面，exit 退出小程序。每种方式对应不同的 API，适用于不同的场景。开发者可以根据需求选择合适的跳转方式，提升用户体验。

微信小程序页面数据来源主要包括五种方式：页面参数传递、全局变量、本地缓存、接口请求和组件间通信。页面参数传递适用于简单参数传递，但安全性较低；全局变量适合跨页面共享数据，但刷新后数据丢失；本地缓存用于持久化存储，但容量有限；接口请求适合动态数据获取，但依赖网络；组件间通信用于页面与组件交互，但不适合跨页面通信。开发者应根据需求选择合适方式，以提升小程序性能和用户体验。

微信小程序的 <text> 组件是用于展示文本的基础组件，支持富文本内容、动态数据绑定和点击事件。它不会自动换行，适合用于标题、段落、按钮文字等场景。主要属性包括 selectable（是否可选中文本）、space（控制空格渲染方式）、decode（是否解码 HTML 实体字符）和 bindtap（点击事件）。通过 decode 属性可以安全地展示 HTML 转义字符，space 属性可以精确控制空格显示效果，而 selectable 则增强了用户的交互体验。开发时需注意 <text&gt

微信小程序的 <view> 组件是基础的视图容器，类似于 HTML 中的 <div>，用于布局和样式控制。它默认为块级元素，支持 Flex 布局，并提供了多种属性和事件处理功能。通过 hover-class 可以实现点击反馈，scroll-top 控制滚动位置，disable-scroll 阻止滚动事件冒泡。示例代码展示了 <view> 的基本使用、Flex 布局和事件处理。开发时需注意 <view> 的默认行为和属性设置，合理使用其功能可以提升用户体验。建议

微信小程序的 image 组件是用于展示图片的核心组件，支持本地和网络资源。该组件不继承父容器样式，需单独设置宽高。image 组件的主要属性包括 src（图片资源地址）、mode（图片裁剪和缩放模式）、lazy-load（懒加载）、fade-in（淡入效果）、bindtap（点击事件）和 show-menu-by-longpress（长按识别小程序码菜单）。mode 属性有16种模式，分为缩放和裁剪两类，如 scaleToFill、aspectFit、widthFix 等。使用 image 组件时，建议结

微信小程序的 swiper 组件用于实现图片或内容的滑动展示，支持多种自定义配置。通过 autoplay、interval、duration 等属性，可以控制自动播放、滑动动画时长等行为。circular 属性实现循环滑动，vertical 支持纵向滑动，bindchange 和 bindtap 分别用于处理滑块切换和点击事件。开发者可以通过 current 属性设置初始显示的滑块，并通过 wx:for 动态绑定数据。swiper 组件的高度需显式设置，且 swiper-item 中的内容应使用固定宽高或

在 Sass 中，& 是一个特殊符号，用于嵌套选择器中表示父选择器，常见于伪类、伪元素、BEM 命名规范、组合选择器等场景。通过 &，可以简化代码并提高可读性。例如，&:hover 表示父选择器的悬停状态，&__item 用于 BEM 风格的类名修饰符，&.external 用于组合多个类名。& 还支持子选择器和相邻兄弟选择器，如 & > .title 和 & + .next。通过合理使用 &，可以编写更结构化和模块化的 Sass

微信小程序提供了丰富的内置组件库，用于构建页面结构、交互逻辑和样式展示。这些组件在WXML中使用，并通过WXSS进行样式控制。常见的组件包括基础组件（如view、text、scroll-view）、表单组件（如input、button、checkbox）、媒体组件（如image、video）、导航与布局组件（如navigator、swiper）以及工具类组件（如loading、rich-text）。每个组件都有其特定的功能和属性，支持不同的交互方式。通过合理使用这些组件，开发者可以快速构建功能丰富的小程序页

在微信小程序中，px 和 rpx 是两种常用的样式单位，分别适用于不同的场景。px 是固定像素单位，不具备自适应能力，适合用于需要精确控制的元素，如边框或图标尺寸。而 rpx 是微信小程序特有的响应式单位，默认以 iPhone6 屏幕宽度为基准（750rpx = 375px），能够自动适配不同设备，适合用于页面布局、组件尺寸和字体大小等。微信小程序推荐使用 750rpx 作为设计稿宽度，便于标准化设计和响应式适配。开发者可以通过 rpx 简化开发流程，避免手动换算。在实际开发中，可以根据需求混合使用 px

entryPagePath 是微信小程序 app.json 配置文件中的一个可选配置项，用于指定小程序的启动页面路径。如果不设置，默认使用 pages 数组中的第一个页面作为启动页。该配置项适用于自定义启动页、多入口或分包项目，以及提高代码的可读性和维护性。配置时需确保 entryPagePath 的值已在 pages 中声明，并且路径正确存在。与 pages[0] 相比，entryPagePath 更适用于复杂项目，能够明确指定启动页，避免因数组顺序导致的混淆。

微信小程序的 sitemap.json 文件是用于优化搜索引擎抓取和收录的关键配置文件。通过该文件，开发者可以指定哪些页面允许被搜索引擎抓取、设置页面的优先级和更新频率，从而提升小程序在微信搜索、百度、Google 等搜索引擎中的曝光度。sitemap.json包含多个配置项，如version、siteindex、autoIndex和defaultConfig，开发者需根据页面路径和需求进行合理配置。文件需放置在项目根目录下，并在 app.json中指定sitemapLocation。正确配置 sitema