2024/2/3学习记录

微信小程序

小程序中组件的分类

视图容器

view 

普通视图区域,类似于 div 常用来实现页面的布局效果。

scroll-view 

可滚动的视图区域,常用来实现滚动列表效果

swiper 和 swiper-item

常用 swiper 组件的常用属性

轮播图容器组件和轮播图item组件

基础组件

text 

文本组件,类似于 html 中的 span 标签

通过 text 组件的 selectable 属性,实现长按选中文本内容的效果

rich-text

富文本组件,支持把 html 字符串渲染成wxml结构 

通过 rich-text 组件的 nodes 属性节点,把 html 字符串 渲染为对应的 UI 结构

button

比 html 的 button 功能更多,可以通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

图片组件

image

使用和 html 的 img 差不多 其中,image组件的 mode 属性用来指定 图片的裁剪和缩放模式,常用的mode属性如下:

导航组件

navigator

类似于 html 的 a 标签

表单组件

媒体组件等等

小程序API的三大分类

事件监听API

特点 以on开头,用来监听某些事件的触发

同步API

以 Sync 结尾的 API 都是同步 API ,可以通过函数返回值来直接获取,如果执行出错会抛出异常。

异步API

类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success,fail,complete 接收调用的结果

协同工作

权限管理

  • 开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发。
  • 体验者权限:可使用体验版小程序
  • 登录权限:可登录小程序管理后台,无需管理员确认
  • 开发设置:设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
  • 腾讯云管理:云开发相关设置

数据绑定

数据绑定的基本原则:(有些部分类似于 vue 的写法)

在 data 中定义数据

在页面对应的 .js 文件中,把数据定义倒 data 对象中即可(很像vue2的写法)

在 WXML 中使用数据

把 data 中的 数据绑定倒 页面中渲染,使用 Mustache 语法,俩个花括号将变量包起来即可,语法格式为:

<view>{{ 要绑定的数据名称 }}</view>

如需动态绑定属性也是用的这个

事件绑定

什么是事件

事件是渲染层 到 逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行进行业务的处理。

常用事件

事件对象的属性列表

当事件回调触发的时候,会收到一个事件对象 event ,他的详细属性如下表所示

target 和 currentTarget 的区别

target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件

bindTap 的语法格式

在小程序中,使用 tap 事件来响应用户的触摸行为

通过 bindTap 可以为组件绑定 tap 触摸事件,在页面的 .js 文件中定义对应事件处理函数,事件参数通过 形参 event (一般简写成 e)来接收

点击之后 我们可以看到控制台的输出:

在事件处理函数中,为 data 中的数据赋值

通过调用,this.setData(dataOvject) 方法可以给页面 data 中的数据重新赋值

事件传参

小程序的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到 具体参数的值

bindInput 的语法格式

通过这个来响应 文本框的输入事件,

在页面的 .js 文件中定义事件处理函数

条件渲染

wx:if  

在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块, 有点像 vue 的写法。

<block> 使用 wx:if

如果要一次性控制多给组件的显示与隐藏,可以使用一个 <block></block> 标签将多个组件包装起来,并在 <block> 标签上使用 wx:if 控制属性。

<block> 并不是一个组件,它只是一个包裹性的容器,不会在界面中做任何渲染。

hidden

在小程序中,直接使用 hidden ="{{condition}}" 也能控制元素的显示与隐藏。

wx:for

语法示例:

使用 wx:for-index 可以指定 当前循环项的索引的变量名

使用 wx:for-item 可以指定当前项的变量名

wx:key 

类似于 vue 的 :key  不用加{{}}

 wxss 和 css 的关系

wxss 具有 css 大部分特性,同时,wxss 还对 css 进行了扩充以及修改,以适应微信小程序的开发。

  • rpx 尺寸单位
  • @import 样式导入

什么是 rpx 尺寸单位

是微信小程序独有的,用来解决屏幕适配问题的尺寸单位。

原理:

为了实现屏幕的自动适配,rpx把所有设备的屏幕在宽度上 等分为 750 份,经过换算来进行渲染。

使用 @import 可以导入样式表

全局样式

定义在 app.wxss 里面的样式都是全局样式

app.json 文件是小程序的全局配置文件,

其中 window 节点 可配置这些:

(主要是 navigationBarbackground 的)

tabBar

是移动端应用常见的页面效果,用于实现多页面的快速切换。

主要有

  • 底部 tabBar
  • 顶部 tabBar 

tabBar里面只能配置最少俩个,最多五个  当渲染顶部 tabBar 时,不显示 icon 只显示文本。

tabBar 节点的配置项

每个 tab 项的配置选项

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/369861.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【CSS】常见样式总结

一. 溢出隐藏 1.1 单行文本溢出 .content{max-width:200px; /* 定义容器最大宽度 */overflow:hidden; /* 隐藏溢出的内容 */text-overflow:ellipsis; /* 溢出部分...表示 */white-space: nowrap; /* 确保文本在一行内显示 */ }问题&#xff1a;display:flex 和 ellipsis 冲…

Win7 Python入手教程(超简单)

前言 因为最近想学习AI&#xff0c;所以准备开始用python&#xff0c;所以为了照顾和我一样用win7且认为网上的教程难以操作的人&#xff0c;所以的算水写一篇博客。 正文 安装步骤&#xff1a; 打开python官网。&#xff08;会有一点慢&#xff0c;要耐心。&#xff09; …

回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测(SE注意力机制)

回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测&#xff08;SE注意力机制&#xff09; 目录 回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测&#xff08;SE注…

C#,哥伦布数(Golomb Number)的算法与源代码

1 哥伦布数&#xff08;Golomb Number&#xff09; 哥伦布数&#xff08;Golomb Number&#xff09;是一个自然数的非减量序列&#xff0c;使得n在序列中正好出现G&#xff08;n&#xff09;次。前几个15的G&#xff08;n&#xff09;值为&#xff1a;1 2 2 3 3 4 4 4 5 5 5 6…

线阵相机参数介绍之帧加行触发

要点&#xff1a; 了解行触发与帧触发的区别 了解线阵相机帧行触发的参数设置 目标&#xff1a; 能够独立进行帧行触发的配置 1.帧、行触发的区别 帧触发控制的是一张图像开始拍摄的位置 行触发控制的是图像中每一行开始拍摄的位置。

极速上手:使用Jmeter轻松实现N种参数化

参数化的方式&#xff1a; 一、使用用户自定义变量 一种方式&#xff1a;直接在测试计划中添加用户自定义变量 另外一种方式&#xff1a;配置元件——用户自定义变量 示例&#xff1a;用户自定义变量&#xff0c;登录手机号码 在接口请求的时候&#xff0c;进行引用 请求之后&…

【iOS ARKit】3D 人体姿态估计

与基于屏幕空间的 2D人体姿态估计不同&#xff0c;3D人体姿态估计是尝试还原人体在三维世界中的形状与姿态&#xff0c;包括深度信息。绝大多数的现有3D人体姿态估计方法依赖2D人体姿态估计&#xff0c;通过获取 2D人体姿态后再构建神经网络算法&#xff0c;实现从 2D 到 3D人体…

极速搭建幻兽帕鲁私服,叫上好友春节假期一起联机畅玩帕鲁

文章目录 前言幻兽帕鲁私服详细部署教程查看服务器开始游戏自定义游戏参数配置 前言 行业资讯 《幻兽帕鲁》的火爆对开发商 Pocketpair 来说&#xff0c;代价是巨大的。该游戏的成功让首席执行官沟部拓郎最近在推特上表示&#xff0c;他可能因服务器运营费用而面临破产。据他透…

Matplotlib绘制炫酷散点图:从二维到三维,再到散点图矩阵的完整指南与实战【第58篇—python:Matplotlib绘制炫酷散点图】

文章目录 Matplotlib绘制炫酷散点图&#xff1a;二维、三维和散点图矩阵的参数说明与实战引言二维散点图三维散点图散点图矩阵二维散点图进阶&#xff1a;辅助线、注释和子图三维散点图进阶&#xff1a;动画效果和交互性散点图矩阵进阶&#xff1a;调整样式和添加密度图总结与展…

Backtrader 文档学习-Indicators- TA-Lib

Backtrader 文档学习-Indicators- TA-Lib 1.概述 即使BT提供的内置指标数量已经很多&#xff0c;开发指标主要是定义输入、输出并以自然方式编写公式&#xff0c;还是希望使用TA-LIB。原因: 指标X在指标库中&#xff0c;而不在BT中TA-LIB众所周知的&#xff0c;人们信任口碑…

远程SSH连接树莓派, SSH反向隧道访问树莓派(使用阿里云服务器以及树莓派4b)

使用SSH反向隧道 由于其没有公网IP地址&#xff0c;那么不在同一个内网的其它电脑就无法直接连接到这台树莓派&#xff0c;这个时候内网穿透技术就可以帮助我们克服这个问题 这里使用ubuntu系统, 树莓派4b, 使用端口8999演示 参考 SSH 反向隧道搭建过程-云社区-华为云 (huawei…

架构篇33:传统的可扩展架构模式-分层架构和SOA

文章目录 分层架构SOA小结相比于高性能、高可用架构模式在最近几十年的迅猛发展来说,可扩展架构模式的发展可以说是步履蹒跚,最近几年火热的微服务模式算是可扩展模式发展历史中为数不多的亮点,但这也导致了现在谈可扩展的时候必谈微服务,甚至微服务架构都成了架构设计的银…

【从零开始的rust web开发之路 三】orm框架sea-orm入门使用教程

【从零开始的rust web开发之路 三】orm框架sea-orm入门使用教程 文章目录 前言一、引入依赖二、创建数据库连接简单链接连接选项开启日志调试 三、生成实体安装sea-orm-cli创建数据库表使用sea-orm-cli命令生成实体文件代码 四、增删改查实现新增数据主键查找条件查找查找用户名…

99例电气实物接线及52个自动化机械手动图

给大家分享一些流水线设计中常见的一些结构&#xff0c;这些动态图很直观&#xff0c;有助于大家了解其原理&#xff0c;非常好懂。 1.家庭总电箱接线图 2.经典双控灯接线 3.五孔一开接线 4.电动机点动控制接线&#xff08;不安全&#xff09; 5.电动机自锁接线图&#xff08;…

建筑工程答案在哪搜?九个免费好用的大学生搜题工具 #经验分享#知识分享

大学生必备&#xff0c;这条笔记大数据一定定要推给刚上大学的学弟学妹&#xff01;&#xff01; 1.七燕搜题 这是一个公众号 解题步骤详细解析&#xff0c;帮助你理解问题本质。其他考试领域也能找到答案。 下方附上一些测试的试题及答案 1、据《素问太阴阳明论》所论&…

Java swing——创建对话框JDialog

之前我们讲了怎么建立一个简易的窗口&#xff0c;链接&#xff1a;http://t.csdnimg.cn/l7QSs&#xff0c;接下来继续讲解窗口的进阶。 对话框 上一篇文章中我们讲到了JFrame是一种顶层容器&#xff0c;本文接下来介绍其余的顶层容器。 跟JFrame一样&#xff0c;&#xff0c;这…

「递归算法」:二叉树的所有路径

一、题目 给你一个二叉树的根节点 root &#xff0c;按 任意顺序 &#xff0c;返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,null,5] 输出&#xff1a;["1->2->5","1->3&qu…

微信小程序实现吸顶、网格、瀑布流布局

微信小程序开发通常是在webview模式下编写&#xff0c;但是对小程序的渲染性能有一定的追求&#xff0c;就需要使用Skyline模式进行渲染&#xff0c;同时在这种模式下有也有一些特殊的组件&#xff0c;可以轻松的实现想要的效果&#xff0c;本文将介绍在Skyline模式下如何实现吸…

NoSQL(非关系型数据库)

目录 前言&#xff1a; 一、NoSQL的类别 1.1 键值&#xff08;key-value&#xff09;存储数据库 1.2 列存储数据库 1.3 文档型数据库 1.4 图形数据库 二、NoSQL适应场景 三、在分布式数据库中的CAP原理 3.1 传统的ACID 3.2 CAP 四、什么是BASE 前言&#xff1a; NoS…

【数据结构】二叉树链式结构的实现

简单不先于复杂&#xff0c;而是在复杂之后。 文章目录 1. 二叉树链式结构的实现1.1 前置说明1.2 二叉树的遍历1.2.1 前序、中序以及后序遍历1.2.2 层序遍历 1.3 节点个数以及高度等1.4 二叉树基础oj练习1.5 二叉树的创建和销毁 1. 二叉树链式结构的实现 1.1 前置说明 在学习二…