微信小程序:tabbar、事件绑定、数据绑定、模块化、模板语法、尺寸单位

目录

[1. tabbar](#1. tabbar)

[1.1 什么是tabbar](#1.1 什么是tabbar)

[1.2 配置tabbar](#1.2 配置tabbar)

[2. 事件绑定](#2. 事件绑定)

[2.1 准备表单](#2.1 准备表单)

[2.2 事件绑定](#2.2 事件绑定)

[2.3 冒泡事件及非冒泡事件](#2.3 冒泡事件及非冒泡事件)

[3. 数据绑定](#3. 数据绑定)

[3.1 官方文档](#3.1 官方文档)

[4. 关于模块化](#4. 关于模块化)

[5. 模板语法](#5. 模板语法)

[6. 尺寸单位](#6. 尺寸单位)


1. tabbar

1.1 什么是tabbar

下图中标记出来的部分即为tabbar:

1.2 配置tabbar

官方说明文档:

说明:

  • pagePath中指定的页面,必须在app.json中的pages部分已经注册。

2. 事件绑定

为演示事件及数据绑定,先准备一个表单

2.1 准备表单

  • 在app.json中加入一个新组件配置

  • 集成环境会在pages目录下生成相关文件

  • app.wxss 全局样式文件

    课件中的【表单模板】目录中有[app.wxss.txt],将内容考入即可。

  • 分别将课件中的【form.wxml.txt】【form.wxss.txt】内容,考入到demo.wxml, demo.wxss中

  • 配置app.json

  • 配置完成后,查看运行效果

2.2 事件绑定

官方文档:

  • 什么是事件

    事件是视图层宇逻辑层的通讯方式,可以将用户的行为反馈到逻辑层进行处理,事件可以绑定到组件上,当达到触发条件时,会执行逻辑层中定义的对应事件处理程序。

  • 事件类别

  1. tap 手指触摸后离开
  2. input 输入事件
  3. longtap 长按事件
  4. touchstart:触摸开始;
  5. touchend:触摸结束;
  6. touchcansce:取消触摸;
  • 在视图中绑定处理函数:

在逻辑层中 (js文件) 定义相应的处理函数

查看运行效果

2.3 冒泡事件及非冒泡事件

官方文档:

创建一个新的组件

增加一个tabbar,用于演示冒泡与非冒泡事件

视图层:

  • 样式,demo2.wxss

复制代码
  .Parent {
    border: solid;
    text-align: center;
    padding: 10px;
  }

逻辑层

编译运行,会发送当点击"click me"文字时,系统触发父元素和子元素上的tap事件,但如果点击边框,则只会触发父元素事件。 原因是使用了冒泡事件。

可以将事件改为非冒泡事件以避免出现这种情况

3. 数据绑定

3.1 官方文档

以表单中的姓名字段,演示双向数据绑定

4. 关于模块化

可以参考示例中的utils模块:

5. 模板语法

官方文档

6. 尺寸单位

官方文档:

简单的理解: 微信小程序将所有屏幕规定为750rpx,在开发小程序时使用rpx为点位指定宽度,在不同屏幕上显示时再进行换算,这样就根据屏幕进行自适应显示。

相关推荐
Code季风6 分钟前
将 gRPC 服务注册到 Consul:从配置到服务发现的完整实践(上)
数据库·微服务·go·json·服务发现·consul
VBA63376 分钟前
VBA之Word应用第三章第十一节:Document对象的事件
开发语言
hweiyu008 分钟前
Maven 私库
java·maven
Boilermaker199215 分钟前
【Java EE】SpringIoC
前端·数据库·spring
wjs202416 分钟前
SOAP Header 元素
开发语言
Super Rookie16 分钟前
Spring Boot 企业项目技术选型
java·spring boot·后端
写不出来就跑路21 分钟前
Spring Security架构与实战全解析
java·spring·架构
中微子26 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
霸王龙的小胳膊29 分钟前
泛微虚拟视图-数据虚拟化集成
数据库
无限远的弧光灯35 分钟前
c语言学习_函数递归
c语言·开发语言·学习