微信小程序--家庭记账本开发--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>

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

上一篇:小程序错误TypeError: __webpack_require__


下一篇:微信小程序 - 富文本编辑器中图片宽度设置