小程序组件|小程序的组件,小程序组件库-FinClip官网

小程序的组件,小程序组件库

4747 786 2022-10-16

本文主要介绍了小程序的组件,小程序组件库。

一.小程序组件

组件是什么？

组件：具有完整功能，独立运行，功能十分强大，可以封装重复的HTML代码，实现HTML代码的可复用性

插件：为了完成墨香具体业务功能二开发的js文件，例如：swiper.js

类库：提供为了完成项目工具方法的集合，和具体业务无关，例如jQuery，lodash.js

框架

框架是一个半成品，已经对基础的代码进行了封装并提供相应的API，开发者在使用框架是直接调用封装好的api可以省去很多代码编写，从而提高工作效率和开发速度。

2.小程序的分类

内置组件：小程序内置的组件，直接拿来就可以使用，无需安装

栗如：view,text,image,button,swiper,switch…

第三方组件:需要安装，引入，再使用

如何让小程序支持npm:

生成package.json:npm init -y

安装vant: npm i @vant/weapp -S --production

将 app.json 中的 “style”: “v2” 去除

勾选开发者工具-详情–本地设置-npm模块

选择微信开发者工具-工具-构建npm

使用第三方vant组件

在app.json或当前页面的json文件中的"usingComponents"引入

自定义组件:自己开发组件，然后再项目中多处复用，提高开发效率，这也是组件化的核心思想

如何快速创建一个组件的步骤：

新建的组件构造器

文件有四个，分别是：wxml、json、js、wxss

在app.json引入自定义的组件

例如：

4.将Dialog显示到wxml视图上

小程序组件通讯实现方式

第一种：父传子

接收数据

第二种：子传父

第三种：兄弟之间

大多数人都知道使用过elementUI组件库的Image组件，但该组件附带了图像预览功能，可以从preview-src-list传递需要预览的图像url列表

鲍马斯特使用此功能对数组进行循环渲染。具体的渲染代码如下。

divclass=' img-wrap ' v-for=' (item， index ) inbaseboardlist ' : key=' index ' El-image : src=' item.src ' : preview-src-list=' base board preve ckselectbaseboard(item.src，item.id ) (Iclass='El-icon ) ) ) ) ) 652 baseboardPreviewList显示用于预览的图像url的为了业务需要，循环中必须包含允许用户选择图像的DOM，即代码中class为icon-wrap的div元素。

由于v-for循环将生成多个el-image组件，并且使用相同的baseboardPreviewList进行预览，因此无论用户单击哪个图像，预览数组的开头都将如下图所示这显然不符合商业需要。

很明显，无论用户单击哪个图像，预览都从第一个图像开始。

怎么解决？由于业务需要，无法在el-image组件级别循环，因为只能通过外部div包裹内部el-image组件和class为icon-wrap的div元素来循环渲染。

因为从DOM作为切入点是安全的，所以将目光投向数据层。由于所有el-image组件都共享baseboardPreviewList的预览功能，因此当用户单击图像时，会对名为baseboardPreviewList的数组进行排序，并显示用户单击的图像的预览将后续的图像url按顺序推入新数组，最后将用户单击的图像顺序前面的图像按顺序推入新数组，然后将生成的这个新数组赋值为新的预览数组。

我说的可能有点绕圈子，直接看看代码层吧。

博主首先在el-image组件中定义点击事件@ click=' handleclickprebaseboard (item.src ) '，在事件中将用户点击的图像url作为传输参数

//图像预览事件handleclickprebaseboard(src ) { let newList=[] //用于获取与用户单击的图像相对应的数组的新数组let i=0 //I的下标let length=this.baseboardprevivity定义/原始数组的长度//在一次some遍历中，与当前url对应的下标首先位于I this.baseboardpreviewlist.some (index ((if ) src===item ) newlist.push ) item同时new list.push (this.baseboardpreviewlist.slice (i1，length ) ) /压入顺序在当前图像之后的图像URL new list.push.this.base board DH I )//在压入顺序早于当前图像的图像URL this.baseboardpreviewlist=new list//重新赋值)单击事件中，将原始预览阵列设置为使用户单击的图像的URL位于阵列的第一个项目这样可以保证用户每次点击都会预览当前的图像。效果图如下。

实际上，在没有进行优化之前，在当地运营项目的博主没有发现这个问题，但当项目上线或其他同事在当地运营项目时，一定会出现这个问题。

上文就是小编为大家整理的小程序的组件,小程序组件库。

国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。