(二)小程序学习笔记——初识:标签、数据绑定、指令介绍

1、rpx:是微信小程序的自适应的单位,根据不同设备的屏幕宽度进行自适应缩放。

2、小程序规定任何型号的手机的屏幕宽度都为 750rpx。

3、小程序中常用的组件:view、swiper(滑块视图容器—轮播图的盒子)和swipe-item(轮播图的每一项)、text、navigator、scroll-view、字体图标。

4、image组件 ,常用的属性有4个

(1)src图片的地址

(2)mode:图片剪裁、缩放的模式

(3)show-menu-by-longpress:长按图片显示的菜单,复制,收藏,保存,转发等

(4)lazy-load:图片懒加载 (在滑动到上下三屏)以后展示图片

5、text组件:常用的属性有两个:

(1)user-select:本文是否可选,用于长按选择文本

(2)space:显示连续空格 ensp:显示空格(中文空格一半大小);emsp(中文空格);nbsp:根据字体设置的空格大小

注意事项:如果想实现长按选择文本只能使用text组件;text组件内只支持text嵌套

6、navigation组件:

(1)url当前小程序的跳转链接

(2)open-type :跳转方式

注意事项:

(1)页面跳转时,url内的路径需要在前面加上 / 斜线,否则跳转不成功

(2)open-type的值为 navigate 、redirect 只能跳转到非TabBar页面,不能跳转到TabBar页面;navigate 保留上一级页面,又返回。redirect没有返回上一级,即会关闭上一级页面,只能返回到首页。

(3)值为switchTab:只能跳转到TabBar页面不能跳转到非TabBar页面

(4)reLaunch:关闭所有有页面,然后打开小程序中某一个页面。
(5)navigateBack:返回上一页或者返回前几页,默认只能返回上一页,如果返回前几页,需要加上delta属性,需要返回几 delta的值就是几

(6)传参使用?连接,属性名和属性值使用功能=号,如果需要传多个属性,使用&连接符。通过生命周期函数onLoad(options)中options接收参数。
(7)open-type的值为switchTab属性时不能传参,不起作用

7、scroll-view组件

实现内容的滚动效果。scroll-x允许横向滚动,scroll-y允许纵向滚动。

8、阿里巴巴字体图标

使用字体图标可能会报错:【渲染层网络层错误】Failed to load font…,该错误可忽略。

但在控制台出现错误,会影响开发调试,解决方案是:将字体图标转换成base64的格式。

9、小程序背景图可以使用background-image设置,到那时不能写本地路径background-image:url(…/…/img.png)

可以使用网络地址或者将图片转换成base64的格式,然后进行使用。或者使用image替换background-image

10、小程序的事件绑定和事件对象:

小程序中没有on和click,若想绑定事件可以使用bind 和 tap。(1)bind:tap=“事件名” (2)bindtap=“事件名”

事件对象(event)

input框获取值

 <input type="text" bindinput="getInputvalue" />   

getInputvalue(event) {

onsole.log(event.detail.value, "--")

  }

11、阻止事件冒泡:catch 绑定事件 catch:tap=“事件名”

12、事件传参:data-*,*代表自定义的属性,接收数据:通过事件对象

event.dataset.currentTarget或event.dataset.target中获取
currentTarget:事件绑定者,哪个组件绑定了当前时间处理函数
target:事件触发者,指哪个组件触发了当前事件。

注意:(1)事件传参如果自定义属性是多个单词,用-(中划线)连接,例如 :data-parent-id,获取的时候使用小驼峰形式获取,event.dataset.currentTarget.parentId;(2)如果自定属性使用的是小驼峰写法data-parentId,获取时候全部转换为了小写的event.dataset.currentTarget.parentid

13、事件传参:mark:自定义属性 ;获取 event.mark.属性名

注意:通过事件兑现高中mark获取的是 触发事件对的节点和其父节点身上所有的mark数据

14、wxml语法声明写在Page({})中,绑定数据使用{{}}。

注意:双大括号内部只能写表达式,不能写语句,也不能调用js的相关方法。

15、在微信小程序中通过setDara({key:value}),setData作用:(1)修改数据(2)更新视图

16、setData()修改对象类型数据:

(1)新增 单个多个属性

   setData({‘userInfo.name’:‘1})
    const obj = Object.assign({},this.data.userInfo)  
    setData({userInfo:obj})

(2)修改 单个多个属性

  const userInfo = {...this.data.userInfo ;name:“Jerry”,age:18}; 
  this.setData({userInfo}}

(3)删除 单个多个属性

   const {age,test,..rest } = this.data.userInfo ;  
   this.setData({userInfo:rest}}

17、setData()修改数组:
新增:

1this.data.list.push(4);  this.setData({list:this.data.list}})

(2const newList = this.data.list.concat(4);  this.setData({list:newList }})

(3const newList = [this.data.list,4];  this.setData({list:newList }}

修改:

 this.setData({‘list[0]’:6}}

删除:

1this.data.list.splice(1,4); 
 this.setData({list:this.data.list}})

(2const newList = this.data.list.filter(item=>item !==2this.setData({list:newList }}

18、小程序双向数据绑定:model:value;

注意:
(1)属性值只能是一个单一字段的绑定,错误写法 :

(2)属性值不能写数据路径,不支持对象和数组。 错误写法:

19、列表渲染—wx:for 、wx:for-item 、wx:for-index、 、

(1)建议加上wx:key
(2)在给wx:key添加属性值的时候,不需要使用大括号语法,直接使用遍历array中item的某个属性。
(3)对于数组:item:数组汇总的每一项 ;index:下标;对于对象:item:value;index:key
(4)wx:key 的注意事项:
①wx:key的属性值不需要{{}},直接写属性名即可。
②属性值是字符串,需要遍历的数组中 item 的某个属性,要求该属性是列表中唯一的字符串或者数字,不能改变。
③保留关键字“*this” , “*this”代表 item本身,item本身是唯一的字符串或者数字。
(5)wx:for-item 可以指定数组当前元素的标量名。修改默认的变量名。
(6)wx:for-index 可以指定数组当前下标的标量名。修改默认的下标变量名。
(7)不是一个组件,是一个包装元素,类似于

20、wx:if、wx:elif、wx:else、hidden属性

wx:if、wx:elif、wx:else属性组的组件必须连贯不能被打断。
hidden属性值如果是 true 展示;否则隐藏

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

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

相关文章

硬件玩物 | 性价比超高的NAS,威联通【TS-464-C2】快速上手初体验!

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路。] 大家好&#xff0c;我是【WeiyiGeek/唯一极客】一个正在向全栈工程师(SecDevOps)前进的技术爱好者 作者微信&#xff1a;WeiyiGeeker 公众号/知识星球&#xff1a;全栈工程师修炼指南 主页博…

1、k8s问题pod从service中剔除

一、起因 redis原来由两服务器的集群变为三服务器的集群&#xff0c;通过statefulset扩展了两节点&#xff0c;并把redis-app-0和redis-app-3从集群中去除&#xff0c;但是由于service路由后端不变&#xff0c;导致程序连接后端仍然可能到redis-app-0和redis-app-3 二、处理 …

【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效,描边及阴影特效

前言 【Unity 实用工具篇】 | UIEffect 实现一系列UGUI特效&#xff0c;描边及阴影特效一、UGUI特效插件&#xff1a;UIEffect1.1 介绍 二、组件属性面板三、代码操作组件 总结 前言 在Unity中 UGUI 的使用几乎是必不可少的&#xff0c;虽然也有NGUI、FGUI等可以使用&#xff…

Spring Kafka——基于 Spring Kafka 实现动态管理 Kafka 连接和 topic 的监听

文章目录 使用 Spring Kafka 动态管理 Kafka 连接和主题监听1. 前言2. 简单的消费程序配置3. Spring Kafka 主要的相关类的说明4. KafkaListener 注解的加载执行流程解析5. 动态监听消费订阅的设计与实现 使用 Spring Kafka 动态管理 Kafka 连接和主题监听 文章内容较长&#x…

Error opening file a bytes-like object is required,not ‘NoneType‘

错误显示&#xff0c;打开的是一个无效路径的文件 查看json文件内容&#xff0c;索引的路径与json文件保存的路径不同 方法&#xff1a;使用python脚本统一修改json文件路径 import json import os import argparse import cv2 from tqdm import tqdm import numpy as np impo…

组合优于继承:什么情况下可以使用继承?

C设计模式专栏&#xff1a;http://t.csdnimg.cn/8Ulj3 目录 1.引言 2.为什么不推荐使用继承 3.相比继承&#xff0c;组合有哪些优势 4.如何决定是使用组合还是使用继承 1.引言 面向对象编程中有一条经典的设计原则:组合优于继承&#xff0c;也常被描述为多用组合&#xff0…

JavaScript原理篇——深入理解作用域、作用域链、闭包、this指向

执行上下文描述了代码执行时的环境&#xff0c;包括变量对象、作用域链和 this 值&#xff1b;而作用域则决定了变量和函数的可访问性范围&#xff0c;分为全局作用域和局部作用域。 变量对象用于存储变量和函数声明&#xff1a;是与执行上下文相关联的数据结构&#xff0c;用于…

USB设备的音频类UAC

一、UAC简介 UAC&#xff08;USB Audio Class&#xff09;是USB设备的音频类&#xff0c;它定义了USB音频设备与主机计算机通信的方式。UAC标准是USB规范的一部分&#xff0c;并受到各种操作系统&#xff08;包括Windows、macOS和Linux&#xff09;的支持。 UAC是基于libusb,实…

代码随想录算法训练营第五十一天| 309.最佳买卖股票时机含冷冻期,714.买卖股票的最佳时机含手续费,总结

题目与题解 参考资料&#xff1a;买卖股票总结 309.最佳买卖股票时机含冷冻期 题目链接&#xff1a;309.最佳买卖股票时机含冷冻期 代码随想录题解&#xff1a;309.最佳买卖股票时机含冷冻期 视频讲解&#xff1a;动态规划来决定最佳时机&#xff0c;这次有冷冻期&#xff01;|…

【自然语言处理】InstructGPT、GPT-4 概述

InstructGPT官方论文地址&#xff1a;https://arxiv.org/pdf/2203.02155.pdf GPT-4 Technical Report&#xff1a;https://arxiv.org/pdf/2303.08774.pdf GPT-4&#xff1a;GPT-4 目录 1 InstructGPT 2 GPT-4 1 InstructGPT 在了解ChatGPT之前&#xff0c;我们先看看Instr…

k8s pod 无法启动一直ContainerCreating

情况如下&#xff0c;更新 pod 时&#xff0c;一直在ContainerCreating 查看详细信息如下 Failed to create pod sandbox: rpc error: code Unknown desc [failed to set up sandbox container “334d991a478b9640c66c67b46305122d7f0eefc98b2b4e671301f1981d9b9bc6” networ…

Jsoncpp搭建交叉编译环境(移植到arm)

1. 官网下载源码 github地址&#xff1a;GitHub - open-source-parsers/jsoncpp at update 2. 交叉编译环境 当前平台/开发平台-编译环境&#xff1a; [rootlocalroot ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [rootlocalroot ~]# uname -a Lin…

Django框架之Django安装与使用

一、Django框架下载 首先我们需要先确定好自己电脑上的python解释器环境&#xff0c;否则会导致后面项目所需要的库安装不了以及项目无法运行的问题。 要下载Django并开始使用它&#xff0c;你可以按照以下步骤进行&#xff1a; 1、安装Python 首先&#xff0c;确保你的计算…

C/C++开发,opencv-ml库学习,支持向量机(SVM)应用

目录 一、OpenCV支持向量机&#xff08;SVM&#xff09;模块 1.1 openCV的机器学习库 1.2 SVM&#xff08;支持向量机&#xff09;模块 1.3 支持向量机&#xff08;SVM&#xff09;应用步骤 二、支持向量机&#xff08;SVM&#xff09;应用示例 2.1 训练及验证数据获取 2…

报错:OpenGL.error.NullFunctionError: Attempt to call an undefined function”

文件我已经上传 CSDN默认就是收费的 我修改不了 免费链接在文中 请寻找 OpenGL.error.NullFunctionError: Attempt to call an undefined function” 环境陈述: windows11 AMD-R9 python版本3.9.9 背景: 通过pip安装pip install PyOpenGL安装PyOpenGL模块后 运行出现的问题…

NLP Step by Step -- How to use pipeline

正如我们在摸鱼有一手&#xff1a;NLP step by step -- 了解Transformer中看到的那样&#xff0c;Transformers模型通常非常大。对于数以百万计到数千万计数十亿的参数&#xff0c;训练和部署这些模型是一项复杂的任务。此外&#xff0c;由于几乎每天都在发布新模型&#xff0c…

数据挖掘实验一

一、实验环境及背景 使用软件&#xff1a; Anaconda3 Jupyter Notebook 实验内容&#xff1a; 1.使用Tushare或者其他手段获取任意两支股票近三个月的交易数据。做出收盘价的变动图像。2.使用Pandas_datareader获取世界银行数据库中美国&#xff08;USA&#xff09;、瑞典&…

Windows电脑中护眼(夜间)模式的开启异常

我的电脑是联想小新16pro&#xff0c;Windows11版本。之前一直可以正常使用夜间模式&#xff0c;但是经过一次电脑的版本更新之后&#xff0c;我重启电脑发现我的夜间模式不能使用了。明明显示开启状态&#xff0c;但是却不能使用&#xff0c;电脑还是无法显示夜间模式。 询问…

基于Spring Boot的考研资讯平台设计与实现

基于Spring Boot的考研资讯平台设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 系统功能界面图&#xff0c;在系统首页可以查看首页、考…

【Qt QML】TabBar的用法

Qt Quick中的TabBar提供了一个基于选项卡的导航模型。TabBar由TabButton控件填充&#xff0c;并且可以与任何提供currentIndex属性的布局或容器控件一起使用&#xff0c;例如StackLayout或SwipeView。 import QtQuick import QtQuick.Controls import QtQuick.LayoutsWindow …
最新文章