微信小程序定制组件的方法分析（微信小程序定制属性）

微信小程序中如何自定义组件？下面这篇文章为大家介绍在微信小程序中自定义组件的方法，希望对大家有所帮助！

在微信小程序的开发过程中，可以将一些可能在多个页面中使用的页面模块打包成一个组件，以提高开发效率。虽然我们可以介绍整个组件库，如weui、vant等。，有时考虑到微信小程序的包大小限制，将其打包为自定义组件通常更可控。

对于一些业务模块，我们可以将其打包为组件重用。本文主要谈以下两个方面:

微信小程序的组件的声明和使用、通信组件的声明和使用、组件的使用都是通过Exparser组件框架来实现的，该框架内置在小程序的基础库中，小程序中的所有组件，包括内置组件和自定义组件都由Exparser组织管理。

自定义组件（如编写页面）包含以下文件:

index . json index . wxl index . wxs index . js index . wxs以编写tab组件为例:编写自定义组件时，需要在JSON文件中将component字段设置为true:

{“Component”:true }在js文件中，基本库提供了两个构造函数:Page和Component。页面对应的页面是页面的根组件，组件对应于:

Component（{ options:{//组件配置addGlobalClass: true，//指定所有以_开头的数据字段都是纯数据字段//纯数据字段是不用于界面呈现的数据字段。Puredatapattern:/_/，multiple slots:true//在定义组件时在选项中启用多插槽支持}，属性:{v tabs: {type: array，value:

在电子商务/物流等微信小程序中，会有这样的用户故事，包括一个订单页面A和一个商品信息页面b。

要在“订单页面A”上填写基本信息，您需要深入到“详细页面B”以填写详细信息。例如，一个快递订单页面需要向下钻取到货物信息页面以填写更详细的信息，然后返回到上一页。从“订单页面A”向下钻取到“商品页面B”，您需要回显“商品页面B”的数据。微信小程序由一个app（）实例和多个页面（）组成。applet框架以堆栈的形式维护页面（最多10个页面），并提供以下用于页面跳转的API。页面路由如下。

Wx.navigateTo（只能跳转位于堆栈中的页面）

Wx.redirectTo（跳转到堆栈外的新页面并替换当前页面）

Wx.navigateBack（不带参数返回上一页）

Wx.switchTab（切换选项卡页面，不支持url参数）

Wx.reLaunch（小程序重启）

您可以简单地封装一个jumpTo跳转函数并传递参数:

export函数jump to（URL，options）{ const base URL = URL . split（& # 39；？')[0];//如果url有参数，则需要在选项If（URL . index of（& # 39；？') != = -1）{ const { queries } = resolve URL（URL）；Object.assign（选项、查询、选项）；//选项具有最高优先级} cosnt查询字符串=对象条目（选项）。filter（item =》item【1】| item【0】= = 0）//除了数字0之外，其他非值均被过滤。map（（【key，value】）=》{ if（type of value = = = & # 39；对象& # 39；）{//Object to string value = JSON . string ify（value）；} if（type of value = = = & # 39；字符串& # 39；）{//string encoded value = encodeuricomponent（value）；} return ` $ { key } = $ { value }} ).加入（& # 39；&');if（query string）{//需要组装参数url = `${baseUrl}？$ { query string } `；} const page count = wx . getcurrentpages（）。长度；if（jump type = = = & # 39；导航到& # 39；& & page count《5）{ wx . navigate to（{ URL，fail:（）=》{ wx . switch（{ URL:base URL }）；} });} else { wx . navigate to（{ URL，fail:（）=》{ wx . switch（{ URL:base URL }）；} });} }跳转到辅助功能:

export const resolve search = search =》{ const queries = { }；cosnt param list = search . split（& # 39；&');param list . foreach（param =》{ const【key，value = & # 39'】= param . split（& # 39；=');query【key】= value；});返回查询；};export const resolveUrl =（URL）=》{ if（URL . index of（& # 39；？'）= = = -1）{//不带参数的URL返回{queries: {}，page:URL } } const【page，search】= URL . split（& # 39；？');const queries = resolve search（search）；返回{ page，queries }；};在“订单页面A”上传输数据:

jump to（{ URL:& # 39；页数/寄售/索引& # 39；，{发件人:{姓名:& # 39；那鲁多233 & # 39；} }});获取“货物信息页面b”中的URL参数:

const sender = JSON . parse（getParam（& # 39；发件人& # 39；) || '{}');用于获取辅助功能的Url参数

//返回当前页面export function getcurrent page（）{ const page stack = wx . getcurrent pages（）；const last index = page stack . length -1；const current page = page stack【last index】；返回currentPage}//获取页面url参数export function getparams（）{ const current page = getcurrent page（）| | { }；const all params = { }；const { route，options } = currentPageif（options）{ const entries = object entries（options）；entries . foreach（（【key，value】）=》{ all params【key】= decodeURIComponent（value）；} );} return allParams}//按字段返回export function get param（name）{ const params = get params（）| | { }的值；返回params【name】；}参数太长怎么办？路由api不支持携带参数？

虽然微信小程序的官方文档没有规定参数可以在页面上携带多长时间，但仍可能存在参数过长和被截断的风险。

我们可以使用全局数据来记录参数值，同时解决url参数过长和路由api不支持携带参数的问题。

// global-data.js//由于switchTab不支持携带参数，因此有必要考虑使用全局数据存储//在这里，无论是否是switchTab，首先将数据挂载到const query map = { page:& # 39；'，查询:{ } }；更新跳转功能

导出函数跳转（url，选项）{ //...object . assign（query map，{ page: baseUrl，queries:options }）；// ...if（jump type = = = & # 39；switchTab & # 39）{ wx . switch tab（{ URL:base URL }）；} else if（jump type = = = = & # 39；导航到& # 39；& & page count《5）{ wx . navigate to（{ URL，fail:（）=》{ wx . switch（{ URL:base URL }）；} });} else { wx . navigate to（{ URL，fail:（）=》{ wx . switch（{ URL:base URL }）；} });} }获取辅助函数的url参数

//获取页面url参数export function getparams（）{ const current page = getcurrent page（）| | { }；const all params = { }；const { route，options } = currentPageif（options）{ const entries = object entries（options）；entries . foreach（（【key，value】）=》{ all params【key】= decodeURIComponent（value）；} );+if（isTabBar（route））{+//是tab-bar页面，使用参数+const {page，queries} =安装到全局的queryMap+if（page = = = = ` $ { route } `）{+object . assign（all params，queries）；+}+} } return all params；}辅助功能

//判断当前路径是否为tabBarconst { tabBar } = appConfigexport isTabBar =（route）=》tabbar . list . some（（（{ page path }））=》page path = = = route）；按照这个逻辑，是不是不需要区分是否是isTabBar页面，所有页面都是从queryMap获取的？这个问题将在后面探讨，因为我还没有尝试过从页面实例的选项中获取的值是否丢失。因此您可以首先继续读取getCurrentPages的值。

方法5 EventChannel事件调度通信

前面我提到过，数据可以通过url参数从“当前页面A”传输到打开的“页面B”。那么，如何将数据从打开的页面传输到当前页面呢？也可以传递url参数吗？

答案是肯定的，前提是“页面A”的状态不需要保存。如果你想保持“页面A”的状态，你需要使用navigateBack返回上一页，而这个api不支持携带url参数。

这样，您可以在页面之间使用EventChannel。

一页

//wx . navigate to（{ URL:& # 39；pageB？id = 1 & # 39，events: {//添加指定事件的侦听器，并获取从打开的页面传输到当前页面的数据:function（data）{ console . log（data）}，Success:function（RES）{//Transmit data RES . event channel . emit（& # 39；acceptDataFromOpenerPage & # 39，{ data:& # 39；测试& # 39；}) }});页面b页面

page（{ onLoad:function（option）{ const event channel = this . getopenereventchannel（）event channel . emit（& # 39；acceptDataFromOpenedPage & # 39，{ data:& # 39；测试& # 39；});//侦听acceptDataFromOpenerPage事件并获取上一页通过eventChannel发送到当前页的数据。on（& # 39；acceptDataFromOpenerPage & # 39，函数（数据）{控制台。log（data）} }）会不会出现数据无法监控的情况？

小程序的堆栈不超过10层。如果当前“页面A”不是第10层，您可以使用导航跳转来保存当前页面并跳转到“页面B”。此时，当填写“页面B”并将数据传输到“页面A”时，页面A可以监控数据。

如果当前“页面A”已经是第10页，您只能使用重定向跳转到“页面b”页面。结果是当前的“页面A”被压出堆栈，新的“页面B”被压入堆栈。此时，当数据从页面B转移到页面A时，无法通过调用navigateBack返回目标页面A，因此无法正常监控数据。

但是在我分析过的小程序中，栈中10层的情况很少，5层的情况也很少。因为调用wx.navigateBack和wx.redirectTo将关闭当前页面，调用wx.switchTab将关闭所有其他非tabBar页面。

因此，很少会出现无法返回上一页监控数据的情况。如果发生这种情况，首先要考虑的不是数据的监控，而是如何返回上一页。

例如，在“PageA”页面中，首先调用getCurrentPages获取页数，然后删除其他页面，然后跳转到“PageB”页面，以防止“PageA”调用wx.redirectTo并关闭“PageA”。但是，官方不建议开发者手动更改页面堆栈，这需要谨慎。

如果有读者遇到这种情况，知道如何解决，请告诉我，谢谢。

使用自定义事件中心事件总线

除了使用官方的EventChannel之外，我们还可以定制一个全球EventBus事件中心。因为这样更灵活，所以在调用wx.navigateTo等API时不需要传入参数，多平台迁移更强大。

导出默认类event bus { private define event = { }；//注册事件公共寄存器（event: string，CB）:void { if（！this . define event【event】）{（this . define event【event】=【CB】）；} else { this . define event【event】。push（CB）；} }//调度事件公共调度（event: string，arg？:any）:void { if（this . define event【event】）{ { for（let I = 0，len = this . define event【event】。长度；I { CB & & CB（arg）；this . off（event，once CB）；} this . register（event，once CB）；}//清除所有事件public clean（）:void { this . define event = { }；} } export connst event bus = new event bus（）；在页面上收听页面:

eventbus . on（& # 39；更新& # 39；，（data）=》console . log（data））；在页面b页面上分发

event bus . dispatch（& # 39；某事件& # 39；，{ name:& # 39；那鲁多233 & # 39；});总结本文主要讨论如何定制微信小程序的组件，涉及两个方面:

使用组件的组件声明和通信如果使用taro，只需根据react的语法直接自定义组件即可。如果组件之间相互通信，由于taro最终将被编译为微信小程序，因此url和eventbus之间的页面组件通信方法是适用的。后面我会分析一下vant-ui weapp的一些组件的源代码，看看赞赞是怎么练出来的。

【相关学习推荐:小程序开发教程】

以上就是微信小程序中自定义组件的方法的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 小程序中有哪些行为？如何创建和使用？（小程序悬停-类）
• 小程序中有哪些行为？如何创建和使用它？(微信小程序行为)
• 微信小程序中自定义组件的方法分析

本文由主机参考刊发，转载请注明：微信小程序定制组件的方法分析（微信小程序定制属性） https://zhujicankao.com/104101.html