微信小程序自定义组件

微信小程序自定义组件教程

自定义组件在微信小程序里面被使用的地方比较多的。如果在小程序的多个页面上面拥有相同的功能可以使用自定义模版方式,在各个页面里面引入。这样就可以使用一套代码开发,多处地方使用了。

因为它涉及到的不仅仅是一个 wxml 页面,还涉及到里面的样式 wxssjs 等一系列的文件,所以不会像引入单个文件那样简单,从而需要引入组件的概念。

代码结构

定义程序组件的时候,我们可以在和 pages 平级的目录上面新建一个文件夹,该文件夹的名字随便定义。在该文件夹里面新建 compoment 文件。我们创建完成后,会发现也会生成四个文件,它的文件类型和新建 pages 的文件类型是一样的。效果如下

09 创建组件.png

案例

在平时开发工作中,我们会遇到在每个页面都会有一个公共的页脚的功能。如果没有组件的话,那么每个页面都需要开发一下,这样代码的重复率会很高的。我们就以页面的页脚为例子,开发一个功能。

文件夹目录

我们在和 pages 平级的目录下新建一个 component 文件夹,然后在文件夹里面再创建一个 footercomponent 文件夹,在 footercomponent 文件夹上面右击,新建 component 文件。在页脚里面,我们会用到一张图片,所以,我们在和 pages 文件夹同目录的地方新建一个 images 文件夹,在里面放入我们要用到的图片。

10 组件目录.png

定义组件

footercomponent.wxml

<view class="footer"> <image src="/images/logo.jpg"></image> <text> - 高端IT网站 - </text> <text>当前值 :{{currentValue}}</text> </view>

footercomponent.wxss

.footer{background: #f2f2f2; display: flex;flex-direction: column;padding:20rpx 0; align-items: center;} .footer image{width: 150rpx; height: 32rpx;} .footer text {font-size: 20rpx; color: #666;padding-top: 5rpx;}

footercomponent.js

// images/compoment/footercompoment.js Component({ /** * 组件的属性列表 */ properties: { currentValue: { type: String, value: "" } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } })

这样,一个组件我们就定义完成了。从上面的代码中我们可以看到,wxml 和 wxss 文件里面的代码逻辑和 pages 里面的逻辑一样的。但是在 js 文件里面,properties 属性里面,我们可以定义一些变量名字,这样在引用到组件的地方,可以随便对变量赋值。

引用组件

我们就在项目自动生成的 index.wxml 文件里面引用组件。

首先,我们需要在 index.json 里面,将组件引入进来。

{ "usingComponents": { "footerView":"/component/footercomponent/footercomponent" } }

这个时候,我们就已经定义了我们需要引入的组件的名字footerView。然后我们在 index.wxml 的最后加上一个 footerView 的引用,并且我们给在组件里面,定义的 currentValue 变量赋值。

<!--index.wxml--> <view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> <footerView currentValue="你好啊,嗨客网"></footerView>

运行效果如下

11 运行效果.png

我们可以看到,在页面的结尾处多了一个页脚,它也成功的将我们在使用组件的时候传递的变量值展现了出来。其提现的效果,和我们在首页将组件的代码再写一遍的效果是一样的。

组件总结

组件的产生,可以让我们的代码更加整洁,没有必要为了相同的功能重复开发,只要确定好变化的东西,然后将变化的东西用变量替换掉就可以了。