组件、标签以及模板的使用
在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件、标签模板的使用有了初步的了解。
1.组件
组件是数据和方法的简单封装,对于微信小程序,简洁的组件化编程对于开发来说有很大帮助。微信小程序支持自定义组件,自定义组件
类似于页面,一个自定义组件由 json
wxml
wxss
js
4个文件组成。要编写一个自定义组件,首先需要在 json
文件中进行自定义组件声明(将 component
字段设为 true
可这一组文件设为自定义组件):
{
"component": true
}
同时,还要在 wxml
文件中编写组件模板,在 wxss
文件中加入组件样式,它们的写法与页面的写法类似。
对于4个不同后缀文件的详细解释在之前博客中有过详细的介绍。
例如以下代码:
<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>
2.标签
在组件的编程中,离不开标签的使用,与网页开发标签类似,微信小程序的开发也存在着许多标签的使用。其中最常用到的是以下标签:
标签 | 使用 |
view |
div和view都是盒模型,默认display:block。
盒模型在布局过程中,一般推荐display:flex的写法,配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中
|
text | 定义界面文本 |
icon |
icon可以直接用微信组件默认的图标,默认是iconfont格式的,从WeUI那边沿袭过来的一种做法。
自定义的icon推荐svg sprite格式或者iconfont。
|
input |
input不需要设置line-height或padding来纵向居中。小程序把checkbox和radio都单独做成了组件,默认的input只支持输入文本。 |
picker |
picker默认支持普通、日期和时间三种选择器。
picker通过bindchange事件来调取range中自定义的数据数据,并展示到页面中,调用的是系统原生的select。
|
navigator |
navigator支持相对路径和绝对路径的跳转,默认是打开新页面,当前页面打开需要加redirect;
navigator仅支持5级页面的跳转;
|
image |
小程序的image与HTML5的img最大的区别在于:小程序的image是按照background-image来实现的。
默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽
|
button | 小程序可以利用按钮实现界面跳转 |
3.模板的使用
在微信小程序开发过程中,可能需要做到大量不同界面之间的转换,但在布局上又会有一些相同的地方,这是模板的使用就起到了很大的作用,可以通过定义一个模板实现界面的统一布局,减少代码量。
template模板
模板只需要在使用时,在不同界面位置进行相关调用即可。代码展示如下:
模板中的wxml文件:
<!--右侧无箭头 -->
<template name="listNone">
<view class="tui-menu-list">
<navigator url="{{item.url}}">
<block>
<text>{{item.title}}</text>
</block>
</navigator>
</view>
</template>
<!--右侧有箭头 -->
<template name="list">
<view class="tui-menu-list tui-youjiantou">
<navigator url="{{item.url}}">
<block>
<text>{{item.title}}</text>
</block>
</navigator>
</view>
</template>
template模板的WXSS
.tui-menu-list{
line-height: 80rpx;
color: #555;
font-size: 35rpx;
padding: 0 0rpx 0 10px;
position: relative;
}
利用import进行调用:
<import src="../../template/list.wxml"/> <view class="tui-fixed">
<scroll-view style="height:100%;" scroll-y="true">
<template wx:for="{{menu}}" is="list" data="{{item}}"></template>
</scroll-view>
</view>