前言
近期萌生了一些想法，感觉可以做一个小程序作为产出。
但小程序做得比较少，因此边做边复习。整理和总结了一些高频知识点和大家一起分享。
一、模板和组件
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内存管理
及时销毁定时器、取消未完成的请求
