微信小程序--家庭记账本开发--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模板
模板只需要在使用时,在不同界面位置进行相关调用即可。代码展示如下:
模板中的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的更多相关文章
- 微信小程序--家庭记账本开发--05
界面跳转 在微信小程序中,按钮也是<button></button>标签,它是通过bindtap属性来绑定点击事件: <view class="usermott ...
- 微信小程序--家庭记账本开发--04
界面的布局 在微信小程序开发过程中,界面的布局是十分重要的,无论是一个什么样的程序,界面的美观合理才能提供给客户一个较好的使用体验,就微信小程序布局自己看了许多小程序布局,自己将学习心得记录如下: 下 ...
- 微信小程序--家庭记账本开发--02
代码文件的了解 对于一个程序的开发,代码的了解的必须的,不同的后缀名文件有着不同的作用,通过学习,对于微信小程序开发中的文件有了自己的理解. 文件概述 一个微信小程序一般有有pages文件夹,util ...
- 微信小程序--家庭记账本开发--01
微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...
- 微信小程序--家庭记账本开发--07
最终展示以及相关代码 1.最终效果展示 最终效果展示已经根据最初要求使用视频拍摄在抖音上,下面是相关页面展示图片: 2.相关代码 本次开发主要页面则是首页界面以及记账界面以及实现页面跳转,以及记账内容 ...
- 微信小程序--家庭记账本开发--06
重要部分学习——记账簿 本次项目开发的目的主要是记账本的开发,最初自己想法简单,把家里的纸质记账簿变成手机上的记账簿.最终自己程序可以实现的功能可以记录每天的账目信息,并形成叠加效果,并按1.2.3… ...
- 微信小程序--家庭记账小账本(三)
家庭记账小账本打算先通过微信小程序来实现,昨天就去注册了解了一下微信小程序,感觉比较复杂而且困难.如何将ecplise源代码与小程序连接,如何建立数据库等等都困扰了我.查阅网上的资料也没有很大的进展. ...
- 微信小程序--家庭记账小账本(五)
(源码已上传至github,https://github.com/xhj1074376195/CostBook_weixin) 今天,尝试弄了账单的表,发现还是弄不了,于是就把账单上的删除功能给去了, ...
- 微信小程序--家庭记账小账本(四)
今天的进展不太顺利,总的账单表,代码改了又改,最后决定用一个新的表,账单界面中弄了一天删除,发现都无法实现想要的效果,于是把账单界面的删除功能去了,就感觉大功告成的时候,发现收入和支出界面的删除也出现 ...
随机推荐
- Error: Can't resolve 'babel-loader'
在控制台中运行命令“webpack”,出现错误:“ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in.... ...
- 如何将JPG格式的图片转换成PNG格式
study from : https://jingyan.baidu.com/article/6079ad0e63a4fc28ff86db37.html
- vue---由nextTick原理引出的js执行机制
最开始查看nextTick这个方法的时候,眼瞎看成了nextClick...我还在疑问难道是下一次click之后处理事件... 然后用这个方法的时候,就只知道是用在DOM更新之后调用回调方法. 这时就 ...
- Go语言系列(三)- 基础函数和流程控制
一.strings和strconv的使用 1. strings.HasPrefix(s string, prefix string) bool:判断字符串s是否以prefix开头 . 2. strin ...
- [Android] Android 锁屏实现与总结 (三)
上接: Android 锁屏实现与总结 (二) 系列文章链接如下: [Android] Android 锁屏实现与总结 (一) [Android] Android 锁屏实现与总结 (二) [Andro ...
- logging模块简单使用
日志配置 #!/usr/bin/python2.7 import os import logging def get_logger(path='./', filename='access.log', ...
- [物理学与PDEs]第1章习题14 求解 rot 方程
设向量函数 ${\bf B}(x,y,z)=(B_x,B_y,B_z)$ 在 $z\neq 0$ 时具有一阶连续偏导数, 在 $z=0$ 时具有第一类间断, 且 $$\bex \Div{\bf B}= ...
- ASP.NET Web API 之一 入门篇
一.基于RESTful标准的Web Api 原文讲解:https://www.cnblogs.com/lori/p/3555737.html 微软的web api是在vs2012上的mvc4项目绑定发 ...
- 在visual studio 2013中编译Lua5.3.1
注:以下是基于 别人的教程或笔记来操作并按照自己的操作记录的纯文字版编译和hello lua过程. 原图文版链接: 原文链接 1.创建空的解决方案: 文件->新建->项目->其他项目 ...
- 【原创】大叔经验分享(22)securecrt连接自动断开
securecrt一段时间没有操作连接就会自动断开(xshell就没有这个问题),提示信息为:信号灯超时时间已到,解决方法为: Options -- Session Options -- Termin ...