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,一经查实,立即删除!

相关文章

【力扣刷题练习】300. 最长递增子序列

题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的…

vue3前端开发,模拟微信红包封面领取样式-旋转+弹屏+逐渐浮现

vue3前端开发,模拟微信红包封面领取样式-旋转弹屏逐渐浮现&#xff01;今天花费了一个上午的时间摸索了这个代码。分享给大家一起学习。微信红包封面的领取活动样式。会旋转&#xff0c;渐渐浮现&#xff0c;弹屏等都有。 大家自己把它图片改成自己的图片地址就行了。 <scr…

记录 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; 将下列代…

如何在一台机器上管理多个 GitHub 账户

用 SSH 密钥在一台机器上管理多个 GitHub 账户 如何用 SSH 密钥在一台机器上管理多个 GitHub 账户 (freecodecamp.org) 如何在同一台电脑上同时使用多个Git账号&#xff1f; - 知乎 (zhihu.com) 生成多个 SSH 密钥 在 C:\Users\Administrator\.ssh 文件夹中打开 gitbash&…

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的锁定。解除对用户名…

力扣0122——买卖股票的最佳时机II

买卖股票的最佳时机II 难度&#xff1a;中等 题目描述 给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格。 在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候 最多 只能持有 一股 股票。你也可以先购买&#xff0c;然后在…

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

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

Node.js版本管理工具之_GNVM

Node.js包管理工具之_GNVM 文章目录 Node.js包管理工具之_GNVM1. 官网2. 安装与使用1. 安装1. 不存在 Node.js 环境2. 存在 Node.js 环境 2. gnmv基本使用1. 查看所有命令及说明2. 安装指定的node版本3. 查看所有已安装版本4. 使用全局默认版本5. 查看官网所有node与npm对应版本…

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;未彻底…

记一次Mysql加字段加不上问题排查过程

一、背景 最近在做计费重构的项目,项目开发工作基本收尾,但是遇到了一个字段加不上的问题,排查过程中也学到了一些东西,这里记录下。 二、问题 2.1 问题反馈 由于要加的字段是另外一个同事负责的内容,到我这里收到反馈说是没加上,所以就跟进一下,从技术方案文档上找…

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;…

作业2024/2/2

第一章 命名空间 一&#xff0e;选择题 1、编写C程序一般需经过的几个步骤依次是&#xff08; B &#xff09; A. 编辑、调试、编译、连接 B. 编辑、编译、连接、运行 C. 编译、调试、编辑、连接 D. 编译、编辑、连接、运行 2、所谓数据封装就是将一组数据和与这组数据…

电商数据采集:选择爬虫工具还是第三方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;设计模式 – 可复用的面向对象软件元…