整理和总结微信小程序的高频知识点

前言

近期萌生了一些想法，感觉可以做一个小程序作为产出。

但小程序做得比较少，因此边做边复习。整理和总结了一些高频知识点和大家一起分享。

一、模板和组件

1.1模板（Template）

优势

• 简单灵活：模板定义和使用都较为简单，只需在 WXML 文件里定义好模板结构，然后在需要的地方引入并传入数据就行。不涉及复杂的生命周期管理和样式隔离等问题，使用起来更灵活。
• 轻量级复用：适合简单的代码片段复用，能快速实现页面中重复部分的展示，不会引入过多额外代码和复杂度。
• 数据传递直观：模板的数据传递通过属性绑定实现，数据流向清晰，易于理解和维护。

适用场景

• 简单重复结构：当页面中有多处相似的简单结构，像商品列表中的单个商品展示、评论列表中的单条评论等，使用模板能快速复用这些结构。
• 快速原型开发：在项目前期快速搭建页面原型时，模板可帮助开发者迅速复用代码，加快开发进度。

1.2组件（Component）

优势

• 高度封装：组件将结构、样式和逻辑封装在一起，具有良好的独立性和复用性。可以在不同页面甚至不同项目中复用，减少代码冗余。
• 生命周期管理：组件拥有自己的生命周期函数，如 created、attached、ready 等，能方便地在不同阶段执行特定操作，比如数据初始化、事件绑定等。
• 样式隔离：组件的样式默认是隔离的，不会影响到其他组件或页面，避免了样式冲突问题，提高了代码的可维护性。
• 事件系统完善：组件有自己独立的事件系统，可自定义事件并在组件内外进行传递和处理，方便实现复杂的交互逻辑。

适用场景

• 复杂交互模块：对于具有复杂交互逻辑和功能的模块，如弹窗、轮播图、下拉刷新等，使用组件可以更好地管理代码和状态。
• 团队协作开发：在多人协作开发项目中，组件可以将不同功能模块进行拆分，每个开发者负责不同的组件开发，提高开发效率和代码质量。
• 可维护性要求高的项目：当项目规模较大、需要长期维护时，使用组件可以使代码结构更加清晰，便于后续的修改和扩展。

1.3区别总结

• 封装程度：模板只是简单的代码片段复用，封装程度较低；组件则是高度封装的代码单元，包含结构、样式和逻辑。
• 数据和样式隔离：模板没有数据和样式隔离，使用时可能会受外部环境影响；组件默认有样式隔离，数据和逻辑也相对独立。
• 复杂度：模板使用简单，适合简单场景；组件相对复杂，需要处理生命周期、事件等，但能应对复杂需求。

 1.4示例代码

模板使用

定义模板

<!-- template.wxml -->
<template name="itemTemplate"><view><text>{{itemName}}</text><text>{{itemPrice}}</text></view>
</template>

使用模板

<!-- index.wxml -->
<import src="template.wxml" />
<template is="itemTemplate" data="{{itemName: '苹果', itemPrice: 5.0}}" />

组件使用

定义组件

// item-component.js
Component({properties: {itemName: String,itemPrice: Number},data: {// 组件内部数据},methods: {// 组件方法}
})

<!-- item-component.wxml -->
<view><text>{{itemName}}</text><text>{{itemPrice}}</text>
</view>

/* item-component.wxss */
view {border: 1px solid #ccc;
}

使用组件

<!-- index.wxml -->
<item-component itemName="苹果" itemPrice="5.0" />

比如我这里定义了一个contentScroll组件 

在index.html中使用该组件之前，需要在index.json中引用该组件

 

二、路由与导航

2.1路由

一个地图导航系统，知道每个页面的位置以及如何到达。在小程序中，路由负责管理页面之间的关系以及页面的加载/卸载等操作。页面都有路由路径，通过路径可以找到页面。 

注意：页面栈最多只能有十层！！！

2.2导航

用户在小程序中进行页面切换的操作过程和方式 

导航方式

• wx.navigateTo
  用于打开一个新的页面，并将当前页面入栈。比如，你在一个商品列表页面，点击某个商品进入详情页，就可以使用 wx.navigateTo。它会把商品列表页留在页面栈中，当你在详情页点击返回按钮时，就能回到商品列表页。
• wx.redirectTo
  这种方式会关闭当前页面，然后打开一个新的页面。例如，当用户完成一个订单支付流程后，从支付结果页面跳转到订单详情页面，使用 wx.redirectTo 可以避免用户通过返回按钮回到支付结果页面，保证页面流程的合理性。
• wx.switchTab
  用于切换到 tabBar 页面
  wx.switchTab 只能用于跳转到在 app.json 文件中配置好的 tabBar 页面，否则会报错。开发中要注意不要将其用于跳转到非 tabBar 页面的场景。
  ​
  • 页面重新加载
    每次使用 wx.switchTab 切换到一个 tabBar 页面时，该页面的 onLoad 函数会被重新调用。如果页面有一些初始化操作在 onLoad 中，可能会导致一些不必要的重复加载。可以将一些不依赖于页面切换的初始化操作放在 onShow 函数中，以避免重复执行。
• wx.navigateBack
  用于返回上一个页面。可以指定返回的页面层数，如果不指定，默认返回上一级页面。
  • 自定义返回层数
    `wx.navigateBack({
    delta: this.data.backDelta,
    success() {
    console.log('成功返回指定层数');
    },
    fail(err) {
    console.error('返回失败:', err);
    }
    });`

三、性能优化

3.1包体积优化

分包加载

配置app.json

在 app.json 中添加 subPackages 字段来配置分包信息。

页面跳转：

在代码中使用 wx.navigateTo 或其他导航方式跳转到分包页面时，小程序会自动下载对应的分包。

图片压缩

<image src="/images/placeholder.png" mode="aspectFit" bindload="onImageLoad">
onImageLoad() { // 图片加载完成后，替换为真实图片 this.setData({ imageUrl: this.data.realImageUrl }); }

代码分包

简单理解就是分包目录中有定义，然后在需要使用改组件的页面进行引入使用，
这里涉及“配置”“引用”

//配置
app.json中subPackages的components的设置

//引用组件页面的json
"usingComponents": { "custom-component": "/subPackages/componentPackage/components/customComponent/customComponent" }

//使用
<custom-component text="这是从页面传递的文本"></custom-component>
​

3.2渲染优化

• 减少wx:for嵌套
• 使用virtual-list优化长列表

3.3内存管理

及时销毁定时器、取消未完成的请求