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

devtools/2024/9/25 17:17:42/

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.ppmy.cn/devtools/21606.html

相关文章

HTTP与HTTPS 对比,区别详解(2024-04-25)

一、简介 HTTP&#xff08;超文本传输协议&#xff0c;Hypertext Transfer Protocol&#xff09;是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模型之上&#xff0c;通常使用端口 80。 HTTPS&#xf…

12.7.1 实验7:实施路由器密码恢复

1、实验目的 通过本实验可以掌握&#xff1b; 路由器密码恢复原理。路由器密码恢复步骤。修改配置寄存器值的方法。 2、实验步骤 路由器密码恢复的过程如下所述。 &#xff08;1&#xff09;路由器冷启动。 1分钟内按【CtrlBreak】键进入ROM监控(ROM Monitor ) rommon模式…

ubuntu安装源问题

一、 清华大学开源软件镜像站 https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ 二、 python镜像源 1、临时配置 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simplepip install -i https://pypi.tuna.tsinghua.edu.cn/simple pip -U --trusted…

js[黑马笔记]

js基础 基础语法 输入输出 变量 数组 常量 数据类型 类型转换 运算符 语句 数组 函数 调用方式 函数名() 匿名函数 使用: 1.函数表达式 2.立即执行函数 对象 内置对象 web API DOM document object Model元素操作 获取元素 设置元素 定时器 DOM事件基础 事件监听 事件类…

【数据结构】排序

参考&#xff1a; 图解算法数据结构 leetcode题解 How to choose&#xff1a;如果对时间复杂度要求比较高并且键的分布范围比较广&#xff0c;可以使用归并排序、快速排序和堆排序。如果不能使用额外的空间&#xff0c;那么快速排序和堆排序都是不错的选择。如果规定了排序的键…

Leetcode—1017. 负二进制转换【中等】(string列表初始化、反向迭代器)

2024每日刷题&#xff08;120&#xff09; Leetcode—1017. 负二进制转换 实现代码 class Solution { public:string baseNeg2(int n) {string ans;while(n ! 0) {ans to_string(n & 1);n -(n >> 1);}return ans.empty() ? "0": string{ans.rbegin(),…

如何使用docker部署前端项目

账号&#xff1a;root 密码&#xff1a;*** 主机&#xff1a;ip地址 登录后&#xff1a; 初级名词&#xff1a; sudo 是Linux和类Unix操作系统中的一个命令&#xff0c;全称为“super user do”&#xff0c;用于允许普通用户以超级用户(root)的身份执行某些或全部命令 需要下…

笔记:Python 字符串与正则表达式(编程题)

文章目录 前言一、Python 字符串与正则表达式是什么&#xff1f;二、编程题编程题目一&#xff1a;字符串反转编程题目二&#xff1a;查找字符串中的数字编程题目三&#xff1a;检查字符串是否是回文串编程题目四&#xff1a;统计字符串中每个字符出现的次数编程题目五&#xf…