2024/2/3学习记录

news2024/11/15 15:42:30

微信小程序

小程序中组件的分类

视图容器

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 项的配置选项

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

京东微前端框架MicroApp简介

一、MicroApp 1.1 MicroApp简介 MicroApp是由京东前端团队推出的一款微前端框架,它从组件化的思维,基于类WebComponent进行微前端的渲染,旨在降低上手难度、提升工作效率。MicroApp无关技术栈,也不和业务绑定,可以用于任何前端框架。 官网链接:https://micro-zoe.gith…

DAY11之有效的括号、删除字符串中的所有相邻重复项和逆波兰表达式求值

有效的括号 20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 由于栈结构的特殊性&#xff0c;非常适合做对称匹配类的题目。 首先要弄清楚&#xff0c;字符串里的括号不匹配有几种情况。 一些同学&#xff0c;在面试中看到这种题目上来就开始写代码&#xff0c;然后…

WPF布局面板

StackPanel StackPanel 是一种常用的布局控件,可以支持水平或垂直排列,但不会换行。当子元素添加到 StackPanel 中时,它们将按照添加的顺序依次排列。默认情况下,StackPanel 的排列方向是垂直的,即子元素将从上到下依次排列。可以使用 Orientation 属性更改排列方向。可以…

幻兽帕鲁服务器自动重启备份-python

幻兽帕鲁服务器自动重启备份-python 1. 前置知识点2. 目录结构3. 代码内容4. 原理解释5. 额外备注 基于python编写的服务器全自动管理工具&#xff0c;能够实现自动定时备份存档&#xff0c;以及在检测到服务器崩溃之后自动重新启动&#xff0c;并且整合了对于frp端口转发工具的…

web 技术栈有哪些?

前端技术栈&#xff1a; HTML&#xff08;超文本标记语言&#xff09;&#xff1a; 用于创建网页结构的标记语言&#xff0c;定义页面的内容和结构。 CSS&#xff08;层叠样式表&#xff09;&#xff1a; 用于设计和排版网页的样式表语言&#xff0c;负责页面的外观和样式。 …

蓝桥杯嵌入式第七届真题(完成) STM32G431

蓝桥杯嵌入式第七届真题(完成) STM32G431 题目 相关文件 main.c /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body**********************…

NuxtJs安装Sass后出现ERROR:Cannot find module ‘webpack/lib/RuleSet‘

最近了解NuxtJs时&#xff0c;发现问题比较多&#xff0c;对于初学者来说是件比较头痛的事。这次是安装sass预处理器&#xff0c;通过命令安装后&#xff0c;出现了ERROR&#xff1a;Cannot find module webpack/lib/RuleSet 错误&#xff0c;于是根据之前经验&#xff0c;对版…

软件测试Bug系列之4个基本步骤(一)

目录 1.发现bug 2.提交bug 3.跟踪bug 4.总结bug 只要你一个测试人员 &#xff0c;就肯定离不开提交bug&#xff0c;跟踪bug的工作 。对于大多数的功能测试人员来说 &#xff0c;占比最多的工作就是和bug打交道 。可以说它是我们最重要的一块业绩 。所以&#xff0c;有必要静…

Python 连接 mysql 详解(mysql-connector-python)

文章目录 1 概述1.1 第三方库&#xff1a;mysql-connector-python1.2 可视化工具&#xff1a;navicat1.3 创建测试数据库 2 连接 mysql 数据库2.1 创建一个连接2.2 捕获连接异常2.3 从配置文件中获取连接信息 3 执行 sql 语句3.1 插入、更新、删除3.2 查询 1 概述 1.1 第三方库…

MySQL 小技巧:使用 xtrabackup 2.4 实现 完全备份及还原

演示&#xff1a;使用 xtrabackup 2.4 实现 完全备份及还原 本案例基于 CentOS 7 的 Mariadb5.5 实现&#xff0c;也支持 MySQL5.5 和 MySQL5.7 1) 安装 xtrabackup 包 // 先安装 Mariadb5.5 和 xtrabackup 包 [rootcentos7 ~] yum install mariadb-server -y [rootcentos7 ~]…

备份RK35XX 设备的ubuntu根文件系统的方法

简介 我们使用 RK35XX 提供的SDK包制作了一个完整的 ubuntu 镜像,烧录到设备中,会在设备中安装很多我们需要的软件,运行的一些自己写的脚本和业务程序,当我们有很多台设备时,不可能每台都一个个去安装,此时我们就需要一个工具来备份当前设备的根文件系统,然后再放到 SD…

面试八股文(3)

文章目录 1.HashSet如何检查重复2.comparable和Comparator区别3.ConcurrentHashMap和Hashtable区别4.线程和进程5.并发与并行的区别6.为什么使用多线程7.使用多线程可能带来问题8.线程的生命周期和状态9.什么是上下文切换10.线程死锁11.产生死锁四个条件12.如何避免死锁 1.Hash…

【项目日记(八)】第三层: 页缓存的具体实现(下)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:项目日记-高并发内存池⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你做项目   &#x1f51d;&#x1f51d; 开发环境: Visual Studio 2022 项目日…

在windows和Linux中的安装 boost 以及 安装 muduo 和 mysql

一、CMake安装 Ubuntu Linux 下安装和卸载cmake 3.28.2版本-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/135960115?spm1001.2014.3001.5501二、安装boost boost官网&#xff1a;boost官网 我下载的boost版本&#xff1a; windows:boost_1_84_0.zipli…

基于SpringBoot的家电销售展示网页的设计与实现

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

k8s Sidecar filebeat 收集容器中的trace日志和app日志

目录 一、背景 二、设计 三、具体实现 Filebeat配置 K8S SideCar yaml Logstash配置 一、背景 将容器中服务的trace日志和应用日志收集到KAFKA&#xff0c;需要注意的是 trace 日志和app 日志需要存放在同一个KAFKA两个不同的topic中。分别为APP_TOPIC和TRACE_TOPIC 二、…

vulhub中spring的CVE-2022-22947漏洞复现

Spring Cloud Gateway是Spring中的一个API网关。其3.1.0及3.0.6版本&#xff08;包含&#xff09;以前存在一处SpEL表达式注入漏洞&#xff0c;当攻击者可以访问Actuator API的情况下&#xff0c;将可以利用该漏洞执行任意命令。 参考链接&#xff1a; https://tanzu.vmware.c…

SpringBoot security 安全认证(三)——自定义注解实现接口放行配置

背景&#xff1a;通过Security实现了安全管理&#xff0c;可以配置哪些接口可以无token直接访问。但一个麻烦就是每增加一个匿名访问接口时都要去修改SecurityConfig配置&#xff0c;从程序设计上讲是不太让人接受的。 本节内容&#xff1a;即是解决以上问题&#xff0c;增加一…

获取未来的5分钟整点时间05,10,15,20,25...

比如预约网约车的时候&#xff0c;是按5分钟的整点时间 GetMapping("/getFiveNextTime")public String fiveNextTime(RequestParam(defaultValue "0") Integer interval) {Calendar calendar Calendar.getInstance();calendar.add(Calendar.MINUTE, (5 …