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

这篇具有很好参考价值的文章主要介绍了微信小程序:tabbar、事件绑定、数据绑定、模块化、模板语法、尺寸单位。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1. tabbar

1.1 什么是tabbar

 1.2 配置tabbar 

2. 事件绑定

2.1 准备表单

2.2 事件绑定

2.3 冒泡事件及非冒泡事件 

3. 数据绑定

3.1 官方文档

4. 关于模块化

5. 模板语法

6. 尺寸单位


1. tabbar

1.1 什么是tabbar

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 1.2 配置tabbar 

 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 官方说明文档:

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 

说明:

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

2. 事件绑定

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

2.1 准备表单

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

  • 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

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

  • 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

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

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

  • 配置app.json

  • 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

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

  • 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

2.2 事件绑定

官方文档:

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 

 

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

  • 事件类别

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

  • 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

查看运行效果

 微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

2.3 冒泡事件及非冒泡事件 

官方文档:

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

创建一个新的组件

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

视图层:

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

  • 样式,demo2.wxss

  • .Parent {
      border: solid;
      text-align: center;
      padding: 10px;
    }

 逻辑层

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

3. 数据绑定

3.1 官方文档

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

4. 关于模块化

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

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库 

5. 模板语法

官方文档

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 

 

6. 尺寸单位

官方文档:

微信小程序表单模板,微信小程序入门级专栏,前端,java,wx,微信小程序,开发语言,html,数据库

 

简单的理解: 微信小程序将所有屏幕规定为750rpx,在开发小程序时使用rpx为点位指定宽度,在不同屏幕上显示时再进行换算,这样就根据屏幕进行自适应显示。 文章来源地址https://www.toymoban.com/news/detail-764752.html

到了这里,关于微信小程序:tabbar、事件绑定、数据绑定、模块化、模板语法、尺寸单位的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 07-微信小程序-注册页面-模块化

    07-微信小程序-注册页面 对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。 简单的页面可以使用 Page() 进行构造。 Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、

    2024年02月12日
    浏览(26)
  • 微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染

    关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有想学习的可以按照以下顺序查看 1.微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类) 2.微信小程序wxml的数据和事件的绑定,以及条件和列表的渲染 3.微信小程序wxss相关介绍、全局配置和tabbar知识

    2024年02月10日
    浏览(51)
  • 微信小程序事件绑定

    事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。 当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示。 target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。 点击内

    2023年04月08日
    浏览(36)
  • 微信小程序(二)事件绑定

    注释很详细,直接上代码 上一篇 新增内容: 点击事件绑定 注册页面 设置页面初始化数据 事件处理函数的实现 更新数据并更新视图 源码: index.wxml index.js 效果演示: 按钮点击前 按钮点击后 下一篇

    2024年01月17日
    浏览(26)
  • 【微信小程序】一文解忧,事件绑定

    🍒 观众老爷们好呀,小程序系列的新文章又来啦,即使是暑假也不能停止学习呀!上文我们详细了解了微信小程序WXML模板语法中的数据绑定,小程序中的事件绑定也是我们必须掌握的方法。 🍒 那么现在我们就开始学习吧,小本本快拿出来记笔记呀。 首先我们来理清事件的

    2024年02月02日
    浏览(36)
  • 【小程序教程】微信小程序之事件绑定

    微信小程序的事件绑定是非常重要的一部分,它可以让我们的小程序与用户进行交互,实现各种功能,例如点击按钮、滑动页面、输入内容等等。本篇博文将详细介绍微信小程序如何进行事件绑定,并且给出相关的代码示例,方便大家理解。 在微信小程序中,通过在标签上绑

    2024年02月04日
    浏览(32)
  • 【微信小程序---绑定事件bindtap跳转】

    1.所需要跳转的页面进行 bindtap=“f0” 绑定所需要的地方 2.在js页面进行 f0:function(event){函数指向功能} 以上是绑定按钮跳转事件 wx.navigateTo() 保留当前页面 ,跳转到指定页面 可以返回到原页面 wx.redirectTo() 关闭当前页面 ,跳转指定页面  不能返回 wx.switchTab() 跳转到 tabBar 页面

    2024年02月10日
    浏览(52)
  • 【无标题】微信小程序如果VIEW绑定点击事件

    微信小程序如果VIEW绑定点击事件,而且绑定的VIEW中存在许多子元素,会出现一下问题: 在回调函数中使用e.target来获取消息,虽然触发了点击事件,但是传递的消息是空值,只有点击在空白区域才会返回有效值。 解决方法:使用e.currentTarget来获取消息。 js回调函数: wxml代

    2024年02月08日
    浏览(37)
  • 【微信小程序】通过绑定点击事件来实现点击交互

    在微信小程序中,可以通过绑定点击事件来实现点击交互。以下是点击事件的实现步骤: 在WXML文件中,找到需要绑定点击事件的元素,例如按钮、图片等。 在该元素上添加 bindtap 属性,并指定一个对应的事件处理函数,例如: 在对应的页面或组件的JS文件中,定义事件处理

    2024年02月14日
    浏览(42)
  • 【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月01日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包