微信小程序--家庭记账本开发--03

组件、标签以及模板的使用

在一个微信小程序中,需要用到大量的组件,一些页面的设计也需要模板,在自己所学课程中,对于一些组件、标签模板的使用有了初步的了解。

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模板

微信小程序--家庭记账本开发--03

模板只需要在使用时,在不同界面位置进行相关调用即可。代码展示如下:

模板中的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>
上一篇:Eclipse-maven相关配置


下一篇:靠!安装了macOS Catalina(10.15.4)后,文件系统都乱套了