微信小程序交互性组件如何自定义?

微信小程序交互性组件如何自定义?

小程序基础库已经包含与自定义组件相关的支持，官方决定对这些特性开放公测。有了这些特性之后，我们可以：将一些复用性强的代码抽象成“自定义组件”，它们的使用方法与基础库内置的

view 、 button 等组件非常相似。

一、如何编写一个自定义组件?

每个自定义组件由四个代码文件组成：

json 文件：用于放置一些最基本的组件配置。

wxml 文件：组件模版。

wxss 文件：组件的样式，只在组件内部节点上生效(这个文件是可选的)。

js 文件：组件的js代码，承载组件的主要逻辑。

这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。

二、如何利用这四个文件编写一个简单的自定义组件?

**组件配置******

编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components 目录下，名为

custom-checkbox.json 。

**组件模版******

在同一目录下，创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似：

这个模版将在组件中渲染出一个 checkbox 和一个 label 。

**组件样式******

同样类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器(如

.the-class-name )来指定：

**组件定义******

组件的js文件中必须包含组件定义。定义时使用 component 构造器：

简单的 component 构造器调用包含3个定义段： methods 中的方法可以用来包含组件的事件回调函数; data 是组件的内部数据，可以用

this.setdata 方法来改变; properties 中声明这个组件的属性，上例中声明了 title

属性，这样，组件外部在使用组件时就可以指定这个属性的值。

在小猪cms小程序v2.0中，我们新增了三大交互性组件：图片、图集、表单。

1)

图片组件：

为了帮助商家更好地展示商品，小程序v2.0中新增图片组件。商家只需拖拽图片组件到需要添加的位置，并上传宣传图片即可。图片组件支持图片单列、双列、三列排版，商家可以自定义边框样式。

点击功能库添加，还可以为图片添加不同的小程序页面。比如餐饮商家可以在某一道特色菜品图片的功能库添加上菜品介绍的文章，用户点击菜品图片，即可进入介绍菜品的文章页面。

2)图集组件：

与图片组件相比，图集组件则更像是一个分类的相册，比如餐饮商家可以添加一个饮品图集、一个甜品图集等等。商家在后台添加图集组件，并对图集的样式风格进行个性化设置，如横版或竖版展示图片、图片大小、边框样式、颜色等等。

添加并保存成功后，用户在手机上可以滑屏浏览图集中的图片。同样，图集组件中的图片也支持功能库添加。

用户端可以滑屏浏览

3)表单组件：

拖拽表单组件到需要添加的位置，并对表单的样式、按钮的样式进行自定义。

比如：餐饮商家想做一次试吃体验活动，即可使用表单组件，在小程序中新增一个试吃报名表。用户在小程序上即可直接报名参加试吃活动。

用户在手机端填写

如何查看用户填写的表单信息?

当商家把鼠标移到小程序模板上，将会显示查看表单数据按钮和删除模板按钮。商家点击第一个按钮，即可查看用户提交的表单数据。

点击查看表单数据按钮

查看用户提交的数据

小猪cms是国内知名的微信生态研发商和服务商，国家高新技术企业，双软认证企业，创业板上市筹备企业。主营微信电商分销、微信营销、o2o、智慧店铺(大数据智能会员营销)、小程序系统等微信生态下产品。

小猪cms拥有完善的公众号+小程序方案，面向零售电商、餐饮、酒店、美业、健身瑜伽、酒吧、ktv、康体spa等行业，深度功能支撑，不做流于表面的小程序。傻瓜化拖拽制作自己想要的小程序，100+海量模板供您选择，具有支付、预约、移动crm、大数据营销等功能，全球数十万家平台客户的支持

遍布全国各地的案例。

(更多精彩开发动态，敬请关注小猪cms官网更新，服务热线：400-893-5552 /0551-63474223

企业qq800033550;800022936 微信号：pigcms)