微信小程序: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为点位指定宽度,在不同屏幕上显示时再进行换算,这样就根据屏幕进行自适应显示。

相关推荐
男Ren、麦根7 分钟前
Java抽象类:深入理解与应用
java·开发语言
王禄DUT11 分钟前
相似度计算 第33次CCF-CSP计算机软件能力认证
开发语言·c++
最新资讯动态17 分钟前
想让鸿蒙应用快的“飞起”,来HarmonyOS开发者官网“最佳实践-性能专区”
前端
Foyo Designer19 分钟前
【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 中的消息队列:使用 RabbitMQ 实现异步处
java·spring boot·程序人生·spring·职场和发展·rabbitmq·java-rabbitmq
小钊(求职中)20 分钟前
七种分布式ID生成方式详细介绍--Redis、雪花算法、号段模式以及美团Leaf 等
java·spring boot·分布式·spring·mybatis
努力学习的小廉23 分钟前
【C++】 —— 笔试刷题day_12
开发语言·c++
雾岛LYC听风23 分钟前
3. 轴指令(omron 机器自动化控制器)——>MC_GearInPos
前端·数据库·自动化
weixin_4435669824 分钟前
39-Ajax工作原理
前端·ajax
martian66525 分钟前
分布式并发控制实战手册:从Redis锁到ZK选主的架构之道
java·开发语言·redis·分布式·架构
西岭千秋雪_25 分钟前
Spring Boot自动配置原理解析
java·spring boot·后端·spring·springboot