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

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

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>

微信小程序--家庭记账本开发--03的更多相关文章

  1. 微信小程序--家庭记账本开发--05

    界面跳转 在微信小程序中,按钮也是<button></button>标签,它是通过bindtap属性来绑定点击事件: <view class="usermott ...

  2. 微信小程序--家庭记账本开发--04

    界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下 ...

  3. 微信小程序--家庭记账本开发--02

    代码文件的了解 对于一个程序的开发,代码的了解的必须的,不同的后缀名文件有着不同的作用,通过学习,对于微信小程序开发中的文件有了自己的理解. 文件概述 一个微信小程序一般有有pages文件夹,util ...

  4. 微信小程序--家庭记账本开发--01

    微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...

  5. 微信小程序--家庭记账本开发--07

    最终展示以及相关代码 1.最终效果展示 最终效果展示已经根据最初要求使用视频拍摄在抖音上,下面是相关页面展示图片: 2.相关代码 本次开发主要页面则是首页界面以及记账界面以及实现页面跳转,以及记账内容 ...

  6. 微信小程序--家庭记账本开发--06

    重要部分学习——记账簿 本次项目开发的目的主要是记账本的开发,最初自己想法简单,把家里的纸质记账簿变成手机上的记账簿.最终自己程序可以实现的功能可以记录每天的账目信息,并形成叠加效果,并按1.2.3… ...

  7. 微信小程序--家庭记账小账本(三)

    家庭记账小账本打算先通过微信小程序来实现,昨天就去注册了解了一下微信小程序,感觉比较复杂而且困难.如何将ecplise源代码与小程序连接,如何建立数据库等等都困扰了我.查阅网上的资料也没有很大的进展. ...

  8. 微信小程序--家庭记账小账本(五)

    (源码已上传至github,https://github.com/xhj1074376195/CostBook_weixin) 今天,尝试弄了账单的表,发现还是弄不了,于是就把账单上的删除功能给去了, ...

  9. 微信小程序--家庭记账小账本(四)

    今天的进展不太顺利,总的账单表,代码改了又改,最后决定用一个新的表,账单界面中弄了一天删除,发现都无法实现想要的效果,于是把账单界面的删除功能去了,就感觉大功告成的时候,发现收入和支出界面的删除也出现 ...

随机推荐

  1. Error: Can't resolve 'babel-loader'

    在控制台中运行命令“webpack”,出现错误:“ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in.... ...

  2. 如何将JPG格式的图片转换成PNG格式

    study from : https://jingyan.baidu.com/article/6079ad0e63a4fc28ff86db37.html

  3. vue---由nextTick原理引出的js执行机制

    最开始查看nextTick这个方法的时候,眼瞎看成了nextClick...我还在疑问难道是下一次click之后处理事件... 然后用这个方法的时候,就只知道是用在DOM更新之后调用回调方法. 这时就 ...

  4. Go语言系列(三)- 基础函数和流程控制

    一.strings和strconv的使用 1. strings.HasPrefix(s string, prefix string) bool:判断字符串s是否以prefix开头 . 2. strin ...

  5. [Android] Android 锁屏实现与总结 (三)

    上接: Android 锁屏实现与总结 (二) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 (二) [Andro ...

  6. logging模块简单使用

    日志配置 #!/usr/bin/python2.7 import os import logging def get_logger(path='./', filename='access.log', ...

  7. [物理学与PDEs]第1章习题14 求解 rot 方程

    设向量函数 ${\bf B}(x,y,z)=(B_x,B_y,B_z)$ 在 $z\neq 0$ 时具有一阶连续偏导数, 在 $z=0$ 时具有第一类间断, 且 $$\bex \Div{\bf B}= ...

  8. ASP.NET Web API 之一 入门篇

    一.基于RESTful标准的Web Api 原文讲解:https://www.cnblogs.com/lori/p/3555737.html 微软的web api是在vs2012上的mvc4项目绑定发 ...

  9. 在visual studio 2013中编译Lua5.3.1

    注:以下是基于 别人的教程或笔记来操作并按照自己的操作记录的纯文字版编译和hello lua过程. 原图文版链接: 原文链接 1.创建空的解决方案: 文件->新建->项目->其他项目 ...

  10. 【原创】大叔经验分享(22)securecrt连接自动断开

    securecrt一段时间没有操作连接就会自动断开(xshell就没有这个问题),提示信息为:信号灯超时时间已到,解决方法为: Options -- Session Options -- Termin ...