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

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

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

相关文章

记录 arm 开发板上 nginx 配置 http 服务注意事项

1. 自定义项目&#xff0c;需要在 conf.d 目录中增加一个 .conf 配置文件&#xff1a; server {listen 9200; # 端口号server_name localhost; # 服务名称location / {root /home/imx6q/media; # 项目根目录&#xff08;需要修改 n…

Vue引入Axios

1.命令安装axios和vue-axios npm install axios --save npm install vue-axios --save 2.package.json查看版本 3.在main.js中引用 import axios from axios; import VueAxios from vue-axios; Vue.use(VueAxios,axios) 4.如何使用 &#xff08;初始化方法&#xff09; 将下列代…

HCIA-Datacom实验指导手册:4.2 实验二:AAA配置实验

HCIA-Datacom实验指导手册&#xff1a;3.3 实验三&#xff1a;以太网链路聚合实验 一、实验介绍&#xff1a;display ssh server ip-block all通过Telnet登录时&#xff0c;解除对IP地址10.1.2.3的锁定。通过STelnet登录时&#xff0c;解除对IP地址10.1.2.3的锁定。解除对用户名…

有什么不同? Elastic 数据层和 Amazon OpenSearch Service 层

作者&#xff1a;来自 Elastic Ugo Sangiorgi 了解 Elastic 和 Amazon OpenSearch Service 数据层之间的主要差异&#xff0c;以实现更智能、经济高效的数据管理。 在数据管理领域&#xff0c;在讨论如何在不同的性能要求下提供和/或保留数据时&#xff0c;经常会出现 “热 (h…

04、全文检索 -- Solr -- 管理 Solr 的 core(使用命令和图形界面创建、删除 core,以及对core 目录下的各文件进行详细介绍)

目录 管理 Solr 的 core创建 Core方式1&#xff1a;solr 命令创建演示&#xff1a;使用 solr 命令创建 Core&#xff1a;演示&#xff1a;命令删除 Core&#xff08;彻底删除&#xff09; 方式2&#xff1a;图形界面创建Web控制台创建CoreWeb控制台删除 Core&#xff08;未彻底…

C语言:详解操作符(上)

摘要&#xff1a; 本篇&#xff0c;我们将学习C语言中操作符的相关内容&#xff0c;操作符是C语言中重要的元素之一&#xff0c;在我们的代码中处处都有&#xff0c;下面我们将详细介绍操作符的相关内容&#xff0c;并结合一些代码例题加深印象。 目录 一、操作符的分类及介绍 …

【Matplotlib】figure方法之图形的保存

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;matplotlib &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

学成在线:媒体资源管理系统(MAM)

媒体资源管理系统(MAM) 媒体资源管理系统(Media Asset Management)是建立在多媒体、网络、数据库和数字存储等先进技术基础上的一个对各种媒体及内容进行数字化存储、管理以及应用的总体解决方案,可以满足媒体资源拥有者收集、保存、查找、编辑、发布各种信息的要求,为媒体资源…

css1文本属性

一.颜色&#xff08;color&#xff09;&#xff08;一般用16进制&#xff09; 二.对齐&#xff08;text-align) 三.装饰&#xff08;text-decoration&#xff09; 四.缩进&#xff08;text-indent&#xff09;&#xff08;一般用2em&#xff09;&#xff08;有单位&#xff09;…

电商数据采集:选择爬虫工具还是第三方API?

电商商家最常唠叨的就是店铺运营难做。每日多平台店铺数据统计汇总繁琐耗时&#xff0c;人工效率偏低&#xff0c;且工作内容有限。 特别是眼下“618大促”将至&#xff0c;如何提高运营的效率和质量、保证产品及服务的良性运作&#xff0c;是电商企业急需解决的难题。 01 数…

thinkadmin的form.html表单例子

<style>textarea {width: 100%;height: 200px;padding: 10px;border: 1px solid #ccc

洗袜子的小型洗衣机哪种好?质量好的迷你洗衣机推荐

随着生活水平的提高&#xff0c;消费者对生活质量的要求也越来越高&#xff0c;越来越多的人开始追求更加舒适、干净的生活。在脚部保健方面&#xff0c;袜子往往是人们关注的重点。袜子洗衣机就是一种专门用于清洗袜子的洗衣机&#xff0c;可以将各种材质的袜子在短时间内进行…

Java设计模式 – 四大类型

设计模式 – 四大类型 创建型模式结构型模式行为型模式J2EE模式 设计模式&#xff08;Design pattern&#xff09;是重构解决方案 根据书Design Patterns – Elements of Reusable Object-Oriented Software&#xff08;中文译名&#xff1a;设计模式 – 可复用的面向对象软件元…

图论练习1

内容&#xff1a;&#xff0c;拆点&#xff0c;分层&#xff0c;传递&#xff0c;带限制的最小生成树 [HNOI2015]菜肴制作 题目链接 题目大意 有个限制&#xff0c;号菜肴在号前完成在满足限制的条件下&#xff0c;按照出菜( 是为了满足的限制 ) 解题思路 由限制&#xf…

Redis-缓存问题及解决方案

本文已收录于专栏 《中间件合集》 目录 概念说明缓存问题缓存击穿问题描述解决方案 缓存穿透问题描述解决方案 缓存雪崩问题描述解决方案提高缓存可用性过期时间配置熔断降级 总结提升 概念说明 Redis是一个开源的内存数据库&#xff0c;也可以用作缓存系统。它支持多种数据结构…

解锁MyBatis Plus的强大功能:学习高级操作与DML技巧!

MyBatisPlus 1&#xff0c;DML编程控制1.1 id生成策略控制知识点1&#xff1a;TableId1.1.1 环境构建1.1.2 代码演示AUTO策略步骤1:设置生成策略为AUTO步骤3:运行新增方法 INPUT策略步骤1:设置生成策略为INPUT步骤2:添加数据手动设置ID步骤3:运行新增方法 ASSIGN_ID策略步骤1:设…

海量数据处理商用短链接生成器平台 - 2

第二章 短链平台项目创建git代码管理开发分层规范 第1集 短链平台实战-Maven聚合工程创建微服务项目 **简介&#xff1a;Maven聚合工程创建微服务项目实战 ** Maven聚合工程拆分 dcloud-common 公共依赖包 dcloud-app FlinkKafka实时计算 dcloud-account 账号流量包微服务 dc…

一分钟了解电脑关机快捷键是什么!

在日常使用电脑的过程中&#xff0c;了解一些基本的快捷键是提高效率的关键之一。其中&#xff0c;电脑关机快捷键是一个方便且迅速的操作&#xff0c;使您可以在不用通过烦琐的菜单操作的情况下&#xff0c;快速关机电脑。在本文中&#xff0c;我们将探讨电脑关机快捷键是什么…

C++初阶:适合新手的手撕string类(模拟实现string类)

上次讲了常用的接口&#xff1a;C初阶&#xff1a;初识STL、String类接口详细讲解&#xff08;万字解析&#xff09; 今天就来进行模拟实现啦 文章目录 1.基本结构与文件规划2.构造函数&#xff08;constructor)2.1构造函数2.1.1无参有参分开2.1.2利用缺省参数合起来 2.2拷贝构…

Pyecharts炫酷散点图构建指南【第50篇—python:炫酷散点图】

文章目录 Pyecharts炫酷散点图构建指南引言安装Pyecharts基础散点图自定义散点图样式渐变散点图动态散点图高级标注散点图多系列散点图3D散点图时间轴散点图笛卡尔坐标系下的极坐标系散点图 总结&#xff1a; Pyecharts炫酷散点图构建指南 引言 在数据可视化领域&#xff0c;…