likes
comments
collection
share

微信小程序中如何使用动态组件?

作者站长头像
站长
· 阅读数 15

1.问题描述

微信小程序中如何使用动态组件?

微信小程序中如何使用动态组件?

微信小程序中如何使用动态组件?

最近在做一个领券中心的项目,里面会存在不同样式的优惠券(差异还比较大,有条形进度条类型的,环形进度条类型的等),我第一想到的做法抽象出一个组件,微信小程序中也支持自定义组件。但是我又思考,这是最好的做法吗?把各种样式的优惠券逻辑写在一个组件内,那文件的处理逻辑是不是很多?如果之后要修改,好不好维护呢?

2.摸索方案

小程序中有没有类型动态组件的方式呢?每个优惠券样式都是一个组件,就像下面一样使用,这样会很方便后期维护。

   <component :is="componentName"></component>

于是我开始查找官方文档。

抽象结点?

官方文档定义:自定义组件模板中的一些节点,其对应的自定义组件不是由自定义组件本身确定的,而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。下面是官方的示例: 首先要在自定义组件的json文件中声明 componentGenerics 字段:

{
"componentGenerics": {
 "selectable": true
}
}

然后再自定义组件中使用:

<selectable-group generic:selectable="custom-radio" />
<selectable-group generic:selectable="custom-checkbox" />

别忘了在自定义组件的json文件中配置对应用到的组件

{
  "usingComponents": {
    "custom-radio": "path/to/custom/radio",
    "custom-checkbox": "path/to/custom/checkbox"
  }
}

咋一看可行呢!如果generic字段支持变量那不就符合我的需求了吗?还是高兴的太早了,官方文档最后的注意事项中指出

  • 节点的 generic 引用 generic:xxx="yyy" 中,值 yyy 只能是静态值,不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。 所以这个方案排除了

模板(template)和引用(import)?

模板的使用方式是这种的

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>

如果is字段支持变量那么就可以实现动态切换模板的功能,达到类似动态组件的方式。经过测试是可以的,下面就让我们用模板来实现类似动态组件的效果吧

3.实现方式

我们新建一个templates文件夹 来存放我们不同样式的模板文件(style-1, style-2)你可能会有疑问,为什么style-1下只有.wxml,.wxss文件,并没有.js,.json文件,这里先卖个关子吧?后面会解释。

微信小程序中如何使用动态组件?

然后我们在页面中使用它们

微信小程序中如何使用动态组件? 需要注意的地方我已经红框标出来了,因为是使用模板,所以我们先要把对应的wxmlwxss文件引入进来,这样才能生效。

我们使用import可以在该文件中使用目标文件定义的template,然后我们再index.wxml页面中对list数组循环遍历,判断每条数据的styleType值,选择对应的模板样式,达到动态组件显示的效果。

现在模板已经正确显示了,如何为模板添加事件呢?

微信小程序中如何使用动态组件?

上面图示涉及到了template的传参,不清楚的同学可以去看下文档,添加点击事件后需要再引用模板的那个文件添加事件处理函数,如下图,我是在test文件中的index.wxml引入的模板 那么模板中的点击事件的处理逻辑要写到test目录下的index.js中配置

微信小程序中如何使用动态组件?

最终效果,就是点击对应的模板可以打印出各种的id信息

微信小程序中如何使用动态组件?

结语

以上就是我在小程序中如何使用动态组件的方法分享,这是我第一篇的文章分享,难免有不足之处,还望各位包容,如果你觉的帮助到了你,那就给个赞吧!。

参考文档:

  1. 模板template developers.weixin.qq.com/miniprogram…
  2. 引用import developers.weixin.qq.com/miniprogram…
  3. 抽象结点 developers.weixin.qq.com/miniprogram…
转载自:https://juejin.cn/post/7231432555321163835
评论
请登录