微信小程序开发从入门到实战 课件 第7-12章 本地数据和缓存管理- 小程序发布与运营

微信小程序本地数据和缓存管理目录1.微信小程序本地存储概述2.异步方式存取本地数据3.同步方式存取本地数据4.本地存储的应用场景微信小程序本地存储概述Part011本地存储对于提升移动端应用响应速度和用户体验至关重要。微信小程序通过提供本地存储能力，允许开发者高效管理用户数据，减少网络请求，提升用户满意度。01微信小程序的本地存储接口使得开发者能够轻松保存关键数据，如用户偏好设置、临时数据和应用状态，从而在用户重新打开小程序时迅速加载数据，提升应用启动速度。02本地存储的重要性本地存储相较于服务器存储，具有更快的读写速度和更低的延迟响应，支持离线访问和操作数据，减少对实时网络连接的依赖。数据存储在用户设备上，增强了数据的独立性和隐私保护，开发者可以通过数据加密等措施进一步增强数据安全性。0201本地存储的优势异步方式存取本地数据Part02在微信小程序中，使用wx.setStorage()可以通过异步方式将数据存储到本地缓存指定的key中，除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。基本用法：wx.setStorage({key:'key',data:'value',success:function(){console.log('数据存储成功');},fail:function(){console.error('数据存储失败');}});1.异步获取数据wx.getStorage()wx.setStorage()参数说明属性

类型

默认值

必填

说明key string 是

本地缓存中指定的keydata any 是

需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。encrypt Boolean false 否

是否开启加密存储。success function 否

接口调用成功的回调函数fail function 否

接口调用失败的回调函数complete function 否

接口调用结束的回调函数1.异步获取数据wx.getStorage()微信小程序中可以使用异步方法wx.getStorage()获取数据，传入保存数据的key值，在success回调函数的参数里就可得到数据。语法如下：wx.getStorage({key:'key',success(res){console.log(res.data)}})2.异步获取数据wx.getStorage()使用wx.removeStorage函数可以删除某一条数据，使用方式和wx.getStorage类似，在对象参数的属性里，传入需要删除的数据key即可.wx.removeStorage({key:'key',success(res){console.log(res.data)}})3.删除本地缓存数据如果要清空所有使用异步方式缓存的数据，可以使用wx.clearStorage()函数实现。//清空所有缓存（异步）wx.clearStorage({success:function(){console.log('所有数据已清空');}});4.清空本地缓存数据例7-1使用异步方式实现小程序存储、获取和删除数据例7-1使用异步方式实现小程序存储、获取和删除数据（1）在WXML文件中创建用户界面，包含一个输入框、两个按钮（保存和删除）以及一个显示区域。（2）在JS文件中实现存储和获取逻辑，在此处理用户输入、存储数据、获取数据和删除数据的功能。（3）样式文件（可选）可以在index.wxss中添加一些样式来美化界面：例7-1使用异步方式实现小程序存储、获取和删除数据程序说明：（1）输入数据：用户可以在输入框中输入用户名。（2）保存数据：点击“保存用户名”按钮会将输入的用户名保存到本地存储，并更新显示的内容。（3）获取数据：页面加载时，会自动从本地存储获取并显示用户名。（4）删除数据：点击“删除用户名”按钮会从本地存储中移除用户名，并清空显示结果。数据本地化注意事项在使用数据本地化存储技术时，需要注意以下问题：（1）数据大小限制：同一个微信用户，同一个小程序中可用的本地数据存储上限为10MB，单个key允许存储的最大数据长度为1MB。（2）异步操作：wx.setStorage()是异步的，因此如果需要在存储成功后执行某些操作，可以在success回调中处理。（3）错误处理：建议在fail回调中处理可能的错误，以便更好地管理异常情况。（3）数据存储是基于用户的，以用户维度隔离，同一台设备上，A用户无法读取到B用户数据，不同小程序之间也无法互相读写数据，保证了数据的安全性。同步方式存取本地数据Part03wx.setStorageSync()以同步方式存储数据到本地缓存，直接返回结果，无需通过回调函数处理。其中key是要存储的数据的键名（字符串），Value是要存储的数据内容（可以是任意类型，包括对象、数组等）。wx.setStorageSync()基本用法：try{wx.setStorageSync('key','value');console.log('数据存储成功');}catch(e){console.error('数据存储失败',e);1.同步存储数据wx.setStorage()wx.setStorageSync()参数说明参数

类型

说明key String 要存储数据的字段名（键），字符串类型。value Any 要存储的数据，可以是任何类型（如字符串、对象等）。1.同步存储数据wx.setStorage()要从本地存储中获取数据，可以使用wx.getStorageSync()方法。该方法接受一个参数key，表示要获取的值的键名（字符串）。返回值为存储在该键下的数据。如果没有找到对应的键，则会返回undefined。wx.getStorageSync()基本用法：constusername=wx.getStorageSync('key');2同步获取数据wx.getStorageSync()要从本地存储中删除数据，可以使用wx.removeStorageSync(key)方法。该方法只接受一个参数key，表示需要删除的值的键名（字符串）。wx.removeStorageSync()基本用法：wx.removeStorageSync('key');3删除数据wx.removeStorageSync()如果要清空所有缓存的数据，可以使用wx.clearStorageSync()函数实现。wx.clearStorageSync()函数用法：wx.clearStorageSync();//清空所有缓存（同步）4清空本地缓存数据wx.clearStorageSync()例7-2使用同步方式存储、获取和删除用户数据（1）在WXML文件中创建一个简单的用户信息展示界面，包含输入框用于输入用户信息、按钮用于保存数据，以及显示保存的信息。（2）在JS文件中实现存储和获取逻辑（3）样式文件（可选）可以在index.wxss中添加一些基本样式使用wx.setStorageSync()实现小程序中的数据存储和获取功能。由于是同步方法，存储和获取数据的过程会在同一线程下执行，因此相对简单易用。但需要注意应避免在小程序启动时进行过多的同步读写操作，以免影响启动速度。例7-2使用同步方式存储、获取和删除用户数据在微信小程序中，需要关注存储数据的有效期。通过设置定时器等方式来定期清理过期数据。（1）定时清理过期数据定时清理过期数据是一种常见的数据管理策略，用于自动删除不再需要的数据，以保持系统的整洁和性能。在微信小程序中，由于本地存储空间有限，合理管理存储数据尤为重要。（2）设置数据有效期在存储本地数据时，可以同时存储一个过期时间戳。在获取数据时，检查当前时间是否超过了这个时间戳，如果超过了则认为数据已过期。5.缓存数据的生命周期管理例7-3设置本地数据有效期和定时清理过期数据。实现：（1）在index.wxml中添加一个view用于显示username的值，两个按钮用于触发设置用户名有效期和定时清理过期数据。（2）在index.js文件中，单击“设置用户名有效期”可以向本地缓存一个变量，有效时间20秒，5秒后可以按“清理过期数据”按钮进行清理过期数据，也可以等待20秒后自动清除本地缓存。例7-3设置本地数据有效期和定时清理过期数据。6.同步与异步对比与选择特性wx.setStorageSync()wx.setStorage()存储方式同步存储异步存储返回值无（如果成功，不会返回任何结果，失败时抛出异常）返回一个Promise对象，可以通过.then()和.catch()处理结果阻塞行为会阻塞后续代码执行，直到存储完成不会阻塞后续代码，存储操作在后台进行使用场景需要立即确认的操作，例如读取配置、用户信息等数据量较大或不需要立即确认的操作，如批量数据存储等错误处理使用try-catch捕获异常可以使用Promise的.catch()方法处理错误本地存储的应用场景Part04本地存储常见应用场景：（1）用户偏好设置：保存用户的个性化设置，例如主题颜色、字体大小等，这样用户在每次打开小程序时都能获得一致的使用体验。（2）登录状态管理：存储用户的登录信息，以便在用户下次打开小程序时无须再次输入账号密码，从而提高用户体验。（3）缓存数据：在进行网络请求时，将获取到的数据缓存在本地，避免重复请求。例如，当用户浏览商品列表时，可以将已加载的商品信息存储下来，下次再查看时直接从本地读取，可用于实现购物车功能。（4）表单数据预填充：在用户填写表单时，可以临时保存用户的输入信息，避免因网络问题或用户误操作导致数据丢失。（5）游戏进度保存：对于小游戏开发者，可以利用本地存储保存玩家的游戏进度、分数等信息，让玩家在下次启动游戏时继续上次的进度。1.本地存储的应用场景通过合理运用本地存储的功能，开发者可以显著提升应用的性能和用户体验，同时减少对后端服务器的依赖。从而在保证数据安全性的前提下，为用户提供更加流畅的操作体验。2.缓存用户个性化设置实例(1)配置小程序页面路径（app.json）为保证程序的正常运行，需要在app.json文件中进行配置，在app.json中注册settingsPage和displayPage页面：{"pages":["pages/settingsPage/settingsPage","pages/displayPage/displayPage"],//其他配置...}例7-4实现用户字体颜色个性化设置并缓存该颜色设置。（2）配置颜色页面布局(settingsPage.wxml)设计一个配置字体颜色的页面，提供一个单选按钮组，其中有red、blue、green三种颜色，当选择颜色后将自动转到显示字体颜色页面displayPage，如图7-4所示。例7-4实现用户字体颜色个性化设置并缓存该颜色设置。（3）配置颜色页面逻辑(settingsPage.js)在配置颜色页面的逻辑页面settingsPage.js中，把选择的颜色借助wx.setStorageSync保存到本地。（4）显示颜色布局(displayPage.wxml)当在settingsPage颜色配置页面选择好颜色后，小程序将自动转到显示颜色displayPage页面（5）显示颜色逻辑(displayPage.js)displayPage页面上的文字颜色将通过wx.getStorageSync()从本地保存的key中读取出来例7-4实现用户字体颜色个性化设置并缓存该颜色设置。用户设置好颜色后，其他页面可以读取该颜色，实现页面颜色的统一设置，用户可以根据实际需求修改和扩展此示例。最终效果如图7-5所示：例7-4实现用户字体颜色个性化设置并缓存该颜色设置。1.数据加密策略：为确保敏感信息的安全性，应在存储前采用加密算法对数据进行加密处理，从而有效保护用户隐私。2.数据校验机制：在数据存入本地之前，可以附加版本号或生成校验码，这有助于后续验证数据的一致性和完整性，确保数据的有效性。3.空间管理规划：鉴于微信小程序本地存储存在空间限制，开发者需要合理规划存储的数据量，避免超出限制导致存储失败。4.异常处理方案：在利用异步存储API时，必须实现错误处理逻辑，以便在存储过程中遇到异常情况时能够妥善处理，提升应用的稳定性。5.性能优化措施：对于频繁访问的数据，推荐采用内存缓存技术，减少直接访问本地存储的次数，从而优化应用的运行性能。策略和技巧本章介绍了微信小程序同步和异步两种本地存储方式，分别使用wx.setStorageSync()和wx.setStorage()实现，在不同场景选择不同方式。当需要确保数据已被存储并且要立即处理后续逻辑时，使用wx.setStorageSync()；如果操作不依赖于存储结果，或者希望非阻塞地执行其他任务，则可以使用wx.setStorage()。由于wx.setStorageSync()是同步的，因此在大量数据存储时，可能会导致性能下降，而wx.setStorage()则可以更好地利用异步特性。根据具体需求选择合适的方法以优化性能和用户体验。总结：微信小程序用户认证与权限管理目录微信登录与用户信息获取用户授权和权限管理第三方登录集成和安全性考虑微信登录与用户信息获取Part01核心接口：wx.login()、wx.getUserInfo()。流程：调用wx.login()获取登录凭证（code）。使用code换取openid

和session_key。获取用户信息（如头像、昵称）。关键点：登录凭证有效期：5分钟。用户信息获取需用户授权。8.1微信登录与用户信息获取wx.login()参数说明8.1微信登录与用户信息获取–wx.login()接口属性类型默认值必填说明timeoutnumber

否超时时间限制，单位ms；设置好合理的退出机制是程序开发中的重要环节，能有效促进程序的运行效率，提升用户的使用体验。successfunction

否接口调用成功的回调函数，最关键的参数就是对象所返回的code参数，它可以被用来在服务器后台换取openid、unionid、session_key等关键信息。failfunction

否接口调用失败的回调函数，通常被用来返回errMsg和errno，分别代表造成调用失败的错误信息和错误代码。completefunction

否接口调用结束的回调函数，通常被用来放置后续的实际业务代码。无论本次调用是成功还是失败，plete回调的函数都会在接口调用结束后被执行。

一个常用的实现方法是先将显示头像的图片嵌入到页面上的一个<button>组件中，再设置此<button>组件的open-type属性为chooseAvatar。获取昵称则可以通过将<input>组件的type属性设置为nickname来实现。WXML部分示例如下：8.1微信登录与用户信息获取–获取用户头像和昵称<buttonopen-type="chooseAvatar"bindchooseavatar="WXAvatar"><imagesrc="{{avatarFile}}"/></button>JS部分示例如下：constdefaultPic=''//此处可插入未上传时的默认头像Page({data:{avatarFile:defaultPic},WXAvatar:function(e){//<button>中绑定的函数

const{avatarFile}=e.detail//在事件触发时

this.setData({avatarFile})//将新上传的图片动态渲染至页面上

}})在上述的代码中，我们通过bindchooseavatar绑定的自定义函数WXAvatar将事件对象中的e.detail动态更新至页面上<image>标签的src属性值，进而将获取到的用户微信头像设置为小程序的头像图片。wx.getUserInfo()参数说明8.1微信登录与用户信息获取–wx.getUserInfo()接口属性类型默认值必填说明withCredentialsboolean

否表示是否附带登录态信息；当本属性为true时，要求此前有调用wx.login且登录态尚未过期，此时返回的数据会包含encryptedData，iv等敏感信息；当本属性为false时，不要求有登录态，返回的数据不包含上述敏感信息。langstringen否显示用户的语言偏好信息，默认值未en，合法值还有zh_CN和zh_TW，分别代表简体中文和繁体中文。successfunction

否接口调用成功的回调函数。failfunction

否接口调用失败的回调函数。completefunction

否接口调用结束的回调函数，无论调用成功或失败都会执行。用户授权和权限管理Part02核心接口：wx.authorize()、wx.getSetting()、wx.openSetting()。流程：调用wx.authorize()申请权限。使用wx.getSetting()查询授权状态。通过wx.openSetting()管理权限。关键点：授权有效期：直到用户删除小程序。用户可随时调整授权状态。8.2用户授权和权限管理wx.authorize()参数说明8.2用户授权和权限管理–wx.authorize()接口属性类型默认值必填说明scopestring

是需要获取权限的scope，详细列表见表8-5successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数，无论成功或失败在开发人员可以利用的众多接口中，可能会有多个接口需要同一项授权来作为调用的先决条件，这一项授权的影响范围被称为它的scope。在调用wx.authorize()后开发者可以就某一个scope向用户发起授权申请，当用户通过该申请后，这个scope所对应的全部接口都可以被直接使用。以获取精确地理位置为例，申请授权并调用信息的代码如下：8.2用户授权和权限管理–wx.authorize()使用案例wx.authorize({scope:'scope.userLocation',//申请获得用户精确地理位置的授权success(){//在用户同意授权的条件下wx.getLocation()//调用用户精确地理位置接口}})wx.getSetting()参数说明8.2用户授权和权限管理–wx.getSetting()接口属性类型默认值必填说明withSubscriptionsBooleanfalse否是否同时获取用户订阅消息的订阅状态，默认不获取。注意：withSubscriptions只返回用户勾选过订阅面板中的“总是保持以上选择，不再询问”的订阅消息。successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数，无论成功或失败开发者可以通过调用此接口来查询用户是否已经授权了某个scope。通常可以在发起申请前事先调用以明确用户当前的授权状态，这样的设计可以有效增加程序的运行效率，确保只有在真正需要发起授权时再调用申请授权的接口。需要注意的是，wx.getSetting()的返回值中只会出现小程序已经向用户发起过了的授权申请。此接口的具体使用方法如下：8.2用户授权和权限管理–wx.getSetting()使用案例wx.getSetting({success(res){console.log(res.authSetting)if(!res.authSetting['scope.userLocation']){//此处判定通过则说明未申请过精确地理位置的授权，进而发起申请

wx.authorize({scope:'scope.record',success(){wx.getLocation()}})}}})wx.openSetting()参数说明8.2用户授权和权限管理–wx.openSetting()接口属性类型默认值必填说明withSubscriptionsBooleanfalse否是否同时获取用户订阅消息的订阅状态，默认不获取。注意：withSubscriptions只返回用户勾选过订阅面板中的“总是保持以上选择，不再询问”的订阅消息。successfunction

否接口调用成功的回调函数failfunction

否接口调用失败的回调函数completefunction

否接口调用结束的回调函数，无论成功或失败开发者可以通过此接口来弹出小程序设置界面并返回用户设置的操作结果。在弹出的设置界面上只会包含该小程序已经申请过的用户权限。用户同样可以在小程序设置选项中手动改写这些权限。

此接口的具体使用方法如下：8.2用户授权和权限管理–wx.openSetting()使用案例wx.openSetting({success(res){console.log(res.authSetting)}})上述代码通过调用wx.openSetting()弹出了小程序设置界面，并将返回结果输出在了控制台中。第三方登录集成和安全考虑Part03支持平台：QQ、微博等。流程：创建跳转页面，接入第三方平台接口。获取临时登录凭证，换取access_token

和openid。调用微信接口实现业务功能。注意事项：不同平台接入方式差异较大。需参考第三方平台开发文档。8.3第三方登录集成和安全考虑开发者可以通过集成第三方平台（如QQ）实现多账号登录。以下以QQ登录为例：注册QQ互联开放平台，获取AppID

和AppKey。下载QQ登录SDK并引入小程序。初始化QQ登录功能并绑定登录事件。开发者首先需要在微信小程序的app.js中进行设置：8.3第三方登录集成和安全考虑–QQ案例varQQLOGIN=require(‘./utils/sdk/qq_sdk.js’)//引入SDK文件路径App({onLaunch:function(){QQLOGIN.init({//QQ登录初始化

appId:'此处添加QQ互联平台的AppID',appKey:'此处添加QQ互联平台的AppKey',debug:true})}})在页面端的按钮或链接上绑定事件函数，用来触发用QQ登录的事件，并在此页面的JS文档中添加实现登录功能的自定义函数；其具体实现方法可以下面为例：8.3第三方登录集成和安全考虑–QQ案例Page({LoginWithQQ:function(){QQLOGIN.login({success:res=>{QQLOGIN.getUserInfo({success:res=>{getApp().saveUserInfo(res.userInfo).then(()=>{wx.navigateTo({url:'此处添加登录成功后跳转的页面路径'})}).catch(err=>{console.error(err)})}})}})}})确保微信小程序中用户数据的安全是一项复杂且多维的任务，涵盖了数据的加密传输与存储、权限管理与身份验证、防御恶意攻击等多个关键领域。以下是一些值得考虑的综合性的安全措施，旨在全面保障用户数据的安全性：加密传输与存储权限管理与身份验证数据校验与攻击预防数据备份与恢复合规存储与平台审核持续更新与安全审计用户指导与信息公示应急响应计划8.3第三方登录集成和安全考虑–安全措施微信小程序的用户认证与权限管理是开发中的核心环节。通过合理使用登录接口、授权管理及安全性设计，开发者可以在保护用户隐私的同时，提供优质的用户体验。用户信任是小程序成功的关键，开发者需始终以用户为中心，确保程序的透明性和安全性。总结：自定义组件与扩展功能目录自定义组件的开发与使用小程序插件的开发与集成Part01发送和接收HTTP请求9.1.1自定义组件的基本概念组件的定义与重要性

在微信小程序的开发框架中，自定义组件是一种将页面中的特定功能、样式和逻辑封装成独立模块的技术手段。这种模块化的设计思想使得开发者能够将复杂的页面拆解成多个简单、可复用的组件，从而提高开发效率，减少代码冗余，并增强代码的可读性和可维护性。

自定义组件的重要性在于它提供了一种高效、灵活且可复用的开发方式。通过将页面中的重复代码或功能封装成组件，开发者可以快速地构建出结构清晰、功能完善的微信小程序，同时降低维护成本，提升开发效率。9.1自定义组件的开发与使用9.1.1自定义组件的基本概念组件与页面的关系

在微信小程序中，组件与页面之间既相互独立又相互联系。一方面，组件作为页面的构成元素，可以被页面直接引入和使用。页面通过<component>标签或自定义标签的方式引入组件，并在需要的位置进行布局和展示。这使得页面能够灵活地组合和复用不同的组件，构建出复杂且多样的用户界面。

另一方面，组件也具有一定的独立性。每个组件都有自己的生命周期和数据绑定机制，可以独立于页面进行状态管理和事件处理。这种独立性使得组件可以更加灵活地应用于不同的页面中，实现功能的复用和扩展。同时，组件也可以接收来自页面的属性和事件，与页面进行交互和通信，从而实现更丰富的功能和交互效果。9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用创建自定义组件接下来我们看一下如何创建一个自定义组件。首先，我们需要在项目的components目录下创建一个新的组件目录。例如，我们创建一个名为my-button的自定义组件：components/└──my-button/├──my-button.js├──my-button.json├──my-button.wxml└──my-button.wxss9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用以下是一个简单的自定义按钮组件的示例代码：my-button.wxml：创建一个自定义按钮组件<viewclass="my-button-container"><buttonbindtap="handleClick">{{text}}</button></view>9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用my-button.wxss：设置按钮的样式.my-button-container{display:inline-block;margin:10px;}

button{padding:10px20px;background-color:#1aad19;color:#fff;border:none;border-radius:5px;}9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用my-button.js：设置按钮的点击事件Component({properties:{text:{type:String,value:'点击我'}},methods:{

handleClick(){

this.triggerEvent('click');//触发自定义事件}}});9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用my-button.json：自定义按钮的配置文件，声明组件的一些基本信息和配置。{"component":true,//声明这是一个自定义组件"componentGeneric":true,//如果希望这个组件支持泛化，可以设置为true（可选）"usingComponents":{},//如果当前组件需要引用其他组件，可以在这里声明（可选）"options":{"multipleSlots":true,//如果组件需要支持多插槽，可以设置为true（可选）"addGlobalClass":true//如果希望组件的样式可以受到全局样式的影响，可以设置为true（可选）}}9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用"component":true：这是必须的，用于声明这是一个自定义组件。"componentGeneric":true：这是可选的，用于声明这个组件是否支持泛化。泛化组件允许在父组件中通过slot插槽传递不同的内容。"usingComponents":{}：这是可选的，用于声明当前组件需要引用的其他组件。如果当前组件不需要引用其他组件，可以省略这个字段。"options"：这是可选的，用于配置组件的一些额外选项。"multipleSlots":true：允许组件支持多插槽。"addGlobalClass":true：允许组件的样式受到全局样式的影响。对于大多数简单的自定义组件来说，可能只需要设置"component":true即可。其他选项可以根据具体需求进行配置。9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用在前面的代码中，我们创建了一个简单的自定义按钮组件，它有一个text属性用于设置按钮上的文本，并且有一个handleClick方法用于处理按钮点击事件。当按钮被点击时，会触发一个名为click的自定义事件。接下来我们将通过把它引入一个页面来使用它。9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用使用自定义组件

最后，我们需要在页面的JSON文件中引用这个自定义组件，并在页面的WXML文件中使用它。部分代码如下：pages/index/index.json{"usingComponents":{"my-button":"/components/my-button/my-button"}}9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用pages/index/index.wxml<view><my-buttontext="自定义按钮"bind:click="onMyButtonClick"/></view>9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用pages/index/index.jsPage({

onMyButtonClick(){console.log('自定义按钮被点击了');}});

在这个示例中，我们在页面的JSON文件中引用了my-button组件，并在页面的WXML文件中使用了它。同时，我们为my-button组件的click事件绑定了一个处理函数onMyButtonClick。当自定义按钮被点击时，会在控制台打印一条消息。

通过以上步骤，我们就成功地创建了一个简单的自定义组件，并在页面中使用了它。9.1自定义组件的开发与使用9.1.2自定义组件的创建与使用当点击自定义按钮时，具体效果如图所示：9.1自定义组件的开发与使用9.1.3自定义组件的通信机制

在微信小程序中，自定义组件之间是可以相互通信的，它允许不同的组件相互协作，共同构建出复杂的应用界面。

自定义组件之间的通信主要有两种：1.父子组件间的通信2.兄弟组件间的通信9.1自定义组件的开发与使用9.1.3自定义组件的通信机制父子组件间的通信

在微信小程序中，父子组件间的通信是通过属性（prop）和事件来实现的。父组件可以通过属性向子组件传递数据，而子组件则可以通过触发事件向父组件发送消息。下面我们通过一个代码示例，展示了父子组件间的通信机制。9.1自定义组件的开发与使用9.1.3自定义组件的通信机制父组件的WXML文件：<view

class="parent-container">

<text>{{parentTitle}}</text>

<child-component

bind:updateTitle="handleUpdateTitle">

</child-component></view>9.1自定义组件的开发与使用9.1.3自定义组件的通信机制父组件的JS文件：Page({

data:

{

parentTitle:

'这是父组件的初始标题'

//

初始化父组件的标题

},

//

处理子组件触发的事件，更新父组件的标题

handleUpdateTitle(e)

{

const

newTitle

=

e.detail.newTitle;

//

从事件数据中获取新标题

this.setData({

parentTitle:

newTitle

//

更新父组件的标题

});

}});9.1自定义组件的开发与使用9.1.3自定义组件的通信机制子组件的WXML文件：<view

class="child-container">

<text>{{title}}</text>

<button

bindtap="sendMessageToParentAndUpdateTitle">发送新标题给父组件</button></view>9.1自定义组件的开发与使用9.1.3自定义组件的通信机制子组件的JS文件：Component({

properties:

{

title:

{

type:

String,

value:

''

}

},9.1自定义组件的开发与使用

methods:

{

//

子组件的方法，触发事件向父组件发送新标题

sendMessageToParentAndUpdateTitle()

{

const

newTitle

=

'这是更新后的标题来自子组件';

//

新标题

this.triggerEvent('updateTitle',

{

//

触发updateTitle事件，并传递新标题作为事件数据

newTitle:

newTitle

});

}

}});9.1.3自定义组件的通信机制具体效果如下图所示9.1自定义组件的开发与使用点击按钮前点击按钮后9.1.3自定义组件的通信机制注意事项在父组件的WXML文件中，我们通过bind:updateTitle="handleUpdateTitle"来监听子组件触发的自定义事件updateTitle。当子组件触发这个事件时，父组件的handleUpdateTitle方法会被调用。在子组件的JS文件中，我们通过this.triggerEvent(updateTitle,{newTitle:

newTitle})来触发自定义事件，并传递一个包含消息的对象作为事件的详情。父组件可以通过e.detail.newTitle访问到子组件传递的消息内容。父组件通过this.setData({parentTitle:

newTitle})设置新的标题，并在WXML中使用新的标题来渲染视图。9.1自定义组件的开发与使用9.1.3自定义组件的通信机制兄弟组件间的通信

在微信小程序中，兄弟组件间的直接通信并不被直接支持，因为它们没有直接的引用关系。不过，我们可以通过它们的共同父组件来做为中介，实现兄弟组件间的通信。下面是一个代码实例，展示了如何通过父组件来中转兄弟组件间的消息。因代码较多，这里仅展示部分代码，详细代码请参照代码示例ch9_3。9.1自定义组件的开发与使用9.1.3自定义组件的通信机制代码示例假设我们有两个兄弟组件：brother-a

和

brother-b，以及它们的共同父组件parent。1.父组件（parent）父组件的WXML文件：<view

class="container">

<brother-a

info="{{messageFromB}}"

bind:sendMessageToB="handleMessageFromA"></brother-a>

<brother-b

info="{{messageFromA}}"

bind:sendMessageToA="handleMessageFromB"></brother-b></view>9.1自定义组件的开发与使用9.1.3自定义组件的通信机制父组件的JS文件：Page({

data:

{

messageFromA:

'',

//用于存储来自组件A的消息

messageFromB:

''

//

用于存储来自组件B的消息

},

handleMessageFromA(e)

{

this.setData({

messageFromA:

e.detail.message

});

},9.1自定义组件的开发与使用handleMessageFromB(e)

{

this.setData({

messageFromB:

e.detail.message

});

}});9.1.3自定义组件的通信机制2.兄弟组件A（brother-a）兄弟组件A的WXML文件：<view

class="brother-a">

<text>A接收到的消息：{{info}}</text>

<button

bindtap="sendMessageToParent">发送消息给兄弟B</button></view>9.1自定义组件的开发与使用9.1.3自定义组件的通信机制兄弟组件A的JS文件：Component({

properties:

{

info:

{

type:

String,

value:

''

}

},

methods:

{

sendMessageToParent()

{

//

触发自定义事件，将消息发送给父组件

this.triggerEvent('sendMessageToB',

{

message:

'Hello

from

Brother

A!'

});

}

}});9.1自定义组件的开发与使用9.1.3自定义组件的通信机制兄弟组件B（brother-b）由于微信小程序不支持兄弟组件间的直接通信，组件B将通过监听父组件传递的属性变化来接收消息。兄弟组件B的WXML文件（这里不需要特殊处理，因为我们会通过属性来传递消息）：<view

class="brother-b">

<text>B接收到的消息：{{info}}</text>

<button

bindtap="sendMessageToParent">发送消息给兄弟A</button></view>9.1自定义组件的开发与使用9.1.3自定义组件的通信机制兄弟组件B的JS文件：Component({

properties:

{

info:

{

type:

String,

value:

''

}

},

methods:

{

sendMessageToParent()

{

this.triggerEvent('sendMessageToA',

{

message:

'Hello

from

Brother

B!'

});

}

}});9.1自定义组件的开发与使用9.1.3自定义组件的通信机制具体效果如图所示。9.1自定义组件的开发与使用发送消息给兄弟前发送消息给兄弟后9.1.3自定义组件的通信机制注意事项在父组件中，我们通过监听组件A的自定义事件来接收消息，并将其存储在父组件的数据中。然后，我们通过属性传递的方式将消息传递给组件B。当父组件的数据变化时，微信小程序会自动更新组件B的视图，反之亦然。这种方法利用了微信小程序的数据绑定和事件系统，实现了兄弟组件间的间接通信。虽然可以通过父组件的方法来直接调用兄弟组件的方法，但这通常不是最佳实践，因为它增加了组件间的耦合度，并可能导致维护问题。更好的做法是通过属性传递和事件监听来实现松散的组件间通信。9.1自定义组件的开发与使用9.1.4自定义组件的复用与优化组件的复用策略在软件开发中，复用是提高开发效率和降低维护成本的关键。自定义组件的复用同样遵循这一原则。以下是一些组件复用策略：模块化设计：将组件拆分成更小的、独立的模块，每个模块只负责一个特定的功能。这样可以提高组件的灵活性和可复用性。通用性设计：在设计组件时，考虑其通用性，使其能够适应不同的场景和需求。例如，一个按钮组件可以支持多种样式、大小、颜色等属性，以满足不同的UI需求。参数化配置：通过提供丰富的参数配置选项，使组件能够灵活地适应不同的使用场景。例如，一个列表组件可以支持分页、排序、筛选等功能，并通过参数进行配置。文档与示例：为组件提供详细的文档和示例代码，帮助开发者快速了解和使用组件。这有助于降低组件的学习成本，提高复用率。版本管理：对组件进行版本管理，确保不同版本的兼容性。同时，及时更新组件以修复已知问题并添加新功能。9.1自定义组件的开发与使用9.1.4自定义组件的复用与优化组件的性能优化技巧在开发过程中，性能优化是确保应用流畅运行的关键。以下是一些组件性能优化的技巧：减少不必要的渲染：通过条件渲染和懒加载等技术，减少不必要的组件渲染次数。这有助于降低CPU和内存的占用，提高应用性能。优化DOM操作：尽量避免频繁的DOM操作，如添加、删除或修改元素。可以使用虚拟DOM等技术来优化DOM操作，提高渲染效率。使用事件委托：通过事件委托技术，将事件处理器绑定到父元素上，而不是每个子元素上。这可以减少事件处理器的数量，提高事件处理效率。缓存数据：对于需要频繁访问的数据，可以使用缓存技术来减少数据访问的次数。例如，可以使用localStorage或内存缓存来存储数据。避免过度动画：虽然动画可以提高用户体验，但过多的动画会导致性能问题。因此，应合理使用动画，并避免同时使用过多的动画效果。9.1自定义组件的开发与使用9.1.4自定义组件的复用与优化组件库的管理随着项目规模的扩大，组件的数量也会不断增加。为了更好地管理和维护这些组件，可以搭建一个组件库。以下是一些组件库管理的建议：组件库架构设计：根据项目的需求，设计合理的组件库架构。这包括组件的分类、命名规范、参数配置等。组件库文档：为组件库提供详细的文档，包括每个组件的说明、用法、参数配置等。这有助于开发者快速了解和使用组件库。组件库版本管理：对组件库进行版本管理，确保不同版本的兼容性。同时，及时更新组件库以修复已知问题并添加新功能。组件库测试：为组件库编写测试用例，确保组件的可靠性和稳定性。这有助于及时发现和修复潜在的问题。组件库发布与更新：将组件库发布到代码仓库上，方便开发者进行安装和更新。同时，定期发布新版本以提供最新的功能和修复。9.1自定义组件的开发与使用小程序插件的开发与集成Part029.2.1小程序插件的概述

插件的定义与用途

小程序插件是由第三方开发者或官方提供的、具有特定功能的代码包。这些插件可以包含页面、组件、API接口等，旨在帮助开发者在不修改小程序本身代码的情况下，快速集成并扩展小程序的功能。通过插件，开发者可以轻松实现如地图服务、支付功能、客服系统等复杂且常用的功能模块。9.2小程序插件的开发与集成9.2.1小程序插件的概述

插件与组件的区别

虽然插件和组件在小程序开发中都具有重要的复用价值，但它们之间存在显著的差异。组件通常用于封装可复用的界面元素，如按钮、输入框等，它们更侧重于UI层面的复用。而插件则更注重于功能的扩展和复用，可能包含多个页面、组件和复杂的业务逻辑。此外，插件的开发和集成过程相对独立，可以单独进行版本管理和更新，这使得插件在功能扩展和升级方面更加灵活。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

创建插件项目1.打开小程序开发者工具：

首先，确保你已经安装了微信官方提供的小程序开发者工具。如果还没有安装，可以从微信公众平台的开发者资源中下载并安装。2.登录开发者工具：

打开开发者工具后，使用你的微信号登录。如果你是企业开发者，可能还需要使用企业微信账号登录。3.创建新项目：

在开发者工具的主界面，点击“+”号按钮或选择“文件”菜单中的“新建小程序”选项来创建一个新项目。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

创建插件项目1.打开小程序开发者工具：

首先，确保你已经安装了微信官方提供的小程序开发者工具。如果还没有安装，可以从微信公众平台的开发者资源中下载并安装。2.登录开发者工具：

打开开发者工具后，使用你的微信号登录。如果你是企业开发者，可能还需要使用企业微信账号登录。3.创建新项目：

在开发者工具的主界面，点击“+”号按钮或选择“文件”菜单中的“新建小程序”选项来创建一个新项目。4.选择项目类型：

在创建项目的向导中，选择“插件”作为项目类型。这与创建普通小程序的项目类型不同。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

创建插件项目5.填写项目信息：AppID：对于个人开发者，这里会默认生成一个测试号的AppID。对于企业开发者，你需要输入你的小程序AppID。项目名称：为你的插件项目命名，这个名字将在开发者工具的项目列表中显示。目录：选择或创建一个文件夹作为项目的存储位置。创建Git仓库（可选）：如果你希望使用Git进行版本控制，可以勾选这个选项。6.完成创建：

填写完所有必要的信息后，点击“创建”按钮。开发者工具将为你生成一个基本的插件项目结构。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

创建插件项目5.填写项目信息：AppID：对于个人开发者，这里会默认生成一个测试号的AppID。对于企业开发者，你需要输入你的小程序AppID。项目名称：为你的插件项目命名，这个名字将在开发者工具的项目列表中显示。目录：选择或创建一个文件夹作为项目的存储位置。创建Git仓库（可选）：如果你希望使用Git进行版本控制，可以勾选这个选项。6.完成创建：

填写完所有必要的信息后，点击“创建”按钮。开发者工具将为你生成一个基本的插件项目结构。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

配置插件项目项目结构：

插件项目的结构与普通小程序项目类似，但有一些关键的不同点。特别是，插件项目通常不需要pages目录，因为插件不直接包含页面。相反，插件通过提供自定义组件和API接口来扩展功能。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

2.修改app.json：

打开项目根目录下的app.json文件，这是小程序的全局配置文件。对于插件项目，你需要关注以下几个字段：window：虽然插件没有自己的页面，但你可以在这里配置一些全局的样式设置，如导航栏标题、背景色等。这些设置可能在你提供的自定义组件中生效。plugins：如果你的插件依赖其他插件，你可以在这里声明这些依赖。每个依赖项都需要指定插件的AppID、版本号以及一个在本项目中使用的别名。permission：声明插件需要的权限。例如，如果你的插件需要访问用户的地理位置信息，你需要在这里声明scope.userLocation权限，并提供一个描述性的文本说明为什么需要这个权限。setting：这里可以配置一些开发阶段的设置，如是否开启域名校验。在开发阶段，为了方便调试，你可能会选择关闭域名校验。9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

3.创建plugin.json：

插件项目还需要一个plugin.json文件来定义插件的基本信息和配置。这个文件应该放在项目根目录下。以下是一个基本的plugin.json示例：{"id":"your-unique-plugin-id",//插件的唯一标识符，需要在微信公众平台上申请"version":"1.0.0",//插件版本号，遵循语义化版本控制规范"name":"YourPluginName",//插件名称"provider":"your-appid",//插件提供者的AppID"description":"Abriefdescriptionofyourplugin.",//插件的简要描述"category":"Tools/Other",//插件分类，可以选择工具、媒体、生活服务等"main":"index.js",//插件的入口文件，通常是一个自定义组件或API接口的集合"devMode":true//是否为开发模式，开发模式下可以绕过一些限制，如域名校验}9.2小程序插件的开发与集成9.2.2小程序插件的开发流程

4.其他配置文件：

根据你的插件需求，你可能还需要配置其他文件，如project.config.json（项目配置文件）、.gitignore（Git忽略文件）等。这些文件的配置与普通小程序项目类似。5.安装依赖：

如果你的插件项目使用了NPM包或其他依赖项，你需要在项目根目录下运行npminstall命令来安装这些依赖项。确保你的开发者工具已经配置了NPM支持。9.2小程序插件的开发与集成9.2.3小程序视频播放插件示例*

因为小程序插件没有独立的页面，需要包含在其他微信小程序中进行使用，而且需要打包并上传到微信服务器进行审核和发布，并且小程序插件在微信小程序开发过程中使用较少，所以这部分内容以了解为主。具体详见书上内容。9.2小程序插件的开发与集成9.2.4小程序插件的常见问题与解决方法插件兼容性问题的处理1.兼容性问题概述插件兼容性问题主要源于插件与不同版本的小程序基础库、操作系统或设备之间的不匹配。这些问题可能导致插件功能异常、界面显示错乱或性能下降。2.识别与定位兼容性问题日志分析：通过查看小程序和插件的日志，识别因版本不兼容导致的错误。测试验证：在不同版本的小程序基础库、操作系统和设备上进行测试，定位兼容性问题的具体场景。3.解决方案更新插件：确保插件与最新版本的小程序基础库兼容，及时发布更新。适配调整：针对不同操作系统和设备进行适配调整，如修改CSS样式、调整布局等。提供降级方案：为不兼容的版本提供降级方案，如提示用户升级小程序基础库或切换设备。9.2小程序插件的开发与集成9.2.4小程序插件的常见问题与解决方法插件调用失败问题的处理1.调用失败的原因插件调用失败可能由多种原因引起，如参数错误、API未正确调用、网络问题等。2.排查步骤检查参数：确保传递给插件的参数符合规范，且已正确设置。查看文档：仔细查阅插件的API文档，确保调用的方法、参数和返回值正确。网络诊断：检查网络连接是否正常，确保插件能够正常进行网络请求。日志输出：在调用插件的过程中增加日志输出，以便跟踪调用过程和错误信息。3.修复方法修正参数：根据排查结果，修正传递给插件的参数。更新插件版本：如果调用失败是由于插件版本过旧导致的，尝试更新插件版本。处理网络问题：根据网络诊断结果，修复网络问题或优化网络请求逻辑。联系插件开发者：如果以上方法均无法解决问题，可以尝试联系插件开发者寻求帮助。9.2小程序插件的开发与集成9.2.4小程序插件的常见问题与解决方法插件安全性的评估与加固1.安全性评估代码审查：对插件的代码进行审查，确保不存在常见的安全漏洞，如SQL注入、XSS攻击等。权限管理：检查插件的权限设置是否合理，避免不必要的权限暴露。数据传输：确保插件与小程序之间的数据传输安全，如使用HTTPS协议进行传输。2.加固措施输入验证：对插件接收到的输入进行严格的验证和过滤，防止恶意输入导致的安全问题。加密处理：对敏感数据进行加密处理，确保数据在传输和存储过程中的安全性。定期更新：及时关注插件的安全更新和漏洞修复，确保插件版本的安全性。安全审计：定期对插件进行安全审计和测试，及时发现并修复潜在的安全问题。9.2小程序插件的开发与集成

本章深入探讨了小程序开发中的两大重要扩展功能：自定义组件与小程序插件。首先，我们介绍了自定义组件的基本概念、创建与使用方法，以及组件间的通信机制。随后，我们介绍了小程序插件的开发与集成，概述了插件的基本概念及其为小程序带来的丰富功能和扩展性。通过小程序视频播放插件示例，了解了插件开发的流程，同时总结了插件开发过程中可能遇到的常见问题及其解决方法，为开发者提供了宝贵的实践经验和应对策略。无论是自定义组件还是小程序插件，它们都是小程序开发中不可或缺的重要工具。通过灵活运用这些扩展功能，开发者能够构建出功能丰富、用户体验卓越的小程序应用。总结：考研一站式信息服务微信小程序目录项目背景与核心功能调剂通功能设计院校通功能设计专业通功能设计估分系统功能设计总结与展望Part01项目背景与核心功能10.1.1项目概述随着考研竞争的日益激烈，考生们在选择院校和专业时面临着大量的信息，需要进行繁琐的查询和比较。为了解决这一问题，我们开发了一款考研小程序，旨在为用户提供一站式的考研信息服务。该小程序主要提供以下功能：调剂通：帮助用户了解调剂信息，提供调剂院校和专业的查询。院校通：展示各大院校的详细信息，包括院校简介、专业设置、录取分数线等。专业通：提供专业介绍、就业前景、开设院校等信息，帮助用户全面了解所选专业。估分系统：提供历年各科考研试卷真题，学生可以根据自己的答题情况为各科试卷自主评分。10.1项目背景与核心功能10.1.2功能点分析调剂通考生在初试成绩不理想的情况下，需要及时获取调剂信息。调剂通功能需要提供最新的调剂院校和专业信息，并支持条件筛选和查询。调剂信息列表展示根据条件（地区、专业、院校类型）筛选调剂信息调剂信息详情查看收藏和分享调剂信息10.1项目背景与核心功能10.1.2功能点分析院校通提供全国各高校的详细信息，方便考生了解目标院校的情况。院校列表展示，支持按地区、类型筛选院校详情页面，展示院校简介、专业设置、录取分数线等院校对比功能，支持多所院校的信息对比收藏和分享院校信息10.1项目背景与核心功能10.1.2功能点分析专业通为考生提供各专业的详细介绍，帮助他们了解专业内容和就业前景。专业列表展示，支持按学科门类筛选专业详情页面，包含专业介绍、开设院校、就业方向等专业与院校的关联查询收藏和分享专业信息10.1项目背景与核心功能10.1.2功能点分析估分系统估分系统是考研小程序的一个重要功能，它可以帮助考生估算自己在历年考研真题中的得分情况，从而提供更为准确的分数预估，帮助考生对自己的分数进行合理评估和调整。历年真题库：提供历年各科目考研真题，考生可以选择所报考科目的试卷进行模拟测试。自动评分功能：考生提交自己的答案后，系统会根据标准答案自动评分，给出每科目的得分。分数估算与反馈：考生可以根据自己的答题情况，给自己估分，估分完成后生成详细的估分报告，可以到估分页面中查看具体的估分情况。10.1项目背景与核心功能功能模块设计与实现Part0210.2.1环境配置和安装在开发考研小程序时，我们使用了以下技术栈：

Node.js：JavaScript运行时，用于构建和管理项目。

React：用于构建用户界面的JavaScript库。

Taro：跨平台开发框架，用于同时开发小程序和Web应用。

@antmjs/vantui组件库：基于AntDesign的移动端组件库，用于构建小程序UI。

TailwindCSS：实用的CSS框架，用于快速构建响应式和高效的UI。

SWR：React的数据请求库，用于简化数据获取和缓存的处理。本节将详细介绍如何安装和配置这些工具和依赖，以便你能够顺利启动项目并开始开发。10.2功能模块设计与实现10.2.1环境配置和安装安装Node.js

首先，需要确保你的开发环境中安装了Node.js。Node.js是构建和管理JavaScript项目的核心工具。

访问Node.js官网：/zh-cn下载并安装适合你操作系统的最新稳定版本。

安装完成后，打开命令行工具（如Terminal或CommandPrompt），输入以下命令检查是否安装成功：node-vnpm-v如果显示了Node.js和npm的版本号，说明安装成功。10.2功能模块设计与实现10.2.1环境配置和安装安装TaroTaro是一个多端开发框架，可以让你编写一次代码并生成微信小程序、H5、ReactNative等多平台的应用。为了实现跨平台功能，我们需要安装Taro。在命令行中运行以下命令安装TaroCLI：npminstall-g@tarojs/cli安装完成后，你可以通过以下命令检查Taro是否安装成功：taro--version10.2功能模块设计与实现10.2.1环境配置和安装安装React和相关依赖因为Taro支持React，所以需要安装React和ReactDOM。运行以下命令：npminstallreactreact-dom10.2功能模块设计与实现10.2.1环境配置和安装安装@antmjs/vantui组件库