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

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.mzph.cn/pingmian/3169.shtml

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

相关文章

语义分割模型——浅谈U-net相关理论

目录 1 U-net简介 1.1 U-net是什么 1.2 U-net的创新点及优势 2 U-net改进思路 2.1 编码器优化 2.2 跳跃连接优化 2.3 解码器优化 2.4 其他优化方式 2.5 注意事项 1 U-net简介 1.1 U-net是什么 Ronneberger等人于2015年基于FCN&#xff08;全卷积神经网络&#xff09…

预测房屋价格(使用SGDRegressor随机梯度下降回归)

线性回归&#xff1a;预测未来趋势01&#xff08;预测房屋价格&#xff09; 文章目录 线性回归&#xff1a;预测未来趋势01&#xff08;预测房屋价格&#xff09;前言一、案例介绍&#xff1a;二、架构图&#xff1a;&#xff08;流程图&#xff09;三、使用了什么技术&#xf…

代码随想录:二叉树18(Java)

目录 105.从前序与中序遍历序列构造二叉树 题目 代码 106.从中序与后序遍历序列构造二叉树 题目 代码 105.从前序与中序遍历序列构造二叉树 题目 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的…

企业网络安全的全方位解决方案

从安全域划分到云端管理&#xff0c;全面构建企业网络安全防线 在数字化浪潮席卷全球的今天&#xff0c;企业网络安全已经成为商业运营中不可忽视的一部分。随着企业数字资产价值的不断攀升&#xff0c;网络安全挑战也愈发严峻。数据泄露、勒索病毒、挖矿木马等高危风险频繁发…

利用Django中的缓存系统提升Web应用性能

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在构建现代Web应用时&#xff0c;性能通常是至关重要的考虑因素之一。为了提高用户体验和应…

Java-基础知识-包-重命名文件/目录

在 IntelliJ IDEA 或其他 Java IDE 中&#xff0c;当你遇到“Package name does not correspond to file path”这样的错误提示时&#xff0c;它意味着你的源代码文件所在的目录结构与其声明的包名&#xff08;package name&#xff09;不匹配。这通常是由于以下几个原因造成的…

Linux中V4L2使用

Video for Linuxtwo(Video4Linux2)简称V4L2&#xff0c;是V4L的改进版。V4L2是linux操作系统下用于采集图片、视频和音频数据的API接口&#xff0c;配合适当的视频采集设备和相应的驱动程序&#xff0c;可以实现图片、视频、音频等的采集。在远程会议、可视电话、视频监控系统和…

设计模式(六):原型模式

设计模式&#xff08;六&#xff09;&#xff1a;原型模式 1. 原型模式的介绍2. 原型模式的类图3. 原型模式的实现3.1 创建一个原型接口3.2 创建具体原型3.3 创建一个数据缓存类3.4 测试 1. 原型模式的介绍 原型模式&#xff08;Prototype Pattern&#xff09;属于创建型模式&…

人工智能(AI)与地理信息技术(GIS)的融合:开启智能地理信息时代

随着科技的不断发展&#xff0c;人工智能&#xff08;AI&#xff09;和地理信息技术&#xff08;GIS&#xff09;的应用越来越广泛&#xff0c;两者的结合更是为许多行业带来了前所未有的变革。本文将以“人工智能&#xff08;AI&#xff09;地理信息技术&#xff08;GIS&#…

【八股】Spring篇

why Spring? 1.使用它的IOC功能&#xff0c;在解耦上达到了配置级别。 2.使用它对数据库访问事务相关的封装。 3.各种其他组件与Spring的融合&#xff0c;在Spring中更加方便快捷的继承其他一些组件。 IoC和DI &#x1f449;IOC是Inversion of Control的缩写&#xff0c;“…

NLP Java - 中文分词

文章目录 IK Analyzer : https://github.com/EugenePig/ik-analyzer-solr5Ansj : https://github.com/NLPchina/ansj_segMMSeg4J : https://github.com/chenlb/mmseg4j-corejcseg : https://gitee.com/lionsoul/jcsegICTCLAS : https://github.com/NLPIR-team/nlpir-analysis-c…

德语口语学习的8种练习方法

简洁明了一点&#xff0c;方便大家理解&#xff0c;我总结了以下8点&#xff1a; 1.模拟对话&#xff1a; 创造实际生活场景&#xff0c;例如购物、问路、餐厅点餐等&#xff0c;并自言自语或者与伙伴一起模拟这些对话。 参加角色扮演活动&#xff0c;通过不同情境练习口语。…

文末送资料|跟着开源学技术-ChatGPT开源项目-chatgpt-java

目录 功能特性 最简使用 进阶使用 函数调用&#xff08;Function Call&#xff09; 流式使用 流式配合Spring SseEmitter使用 多KEY自动轮询 大家好&#xff0c;我是充电君 今天带着大家来看个Java版本的ChatGPT。这个开源项目就是chatgpt-java。 Github&#xff1a; h…

Django与mysqlclient链接不成功

先检查自己的python是什么版本&#xff0c;是64位还是32位&#xff0c;这个自己去网上查。 我的是32位的&#xff0c;因为直接pip下载不了&#xff0c;网上也没有32位的whl&#xff0c;所以卸载重装一个64位的3.9.6的python 网上直接搜mysqlclient&#xff0c;找到对应py39也…

Excel vlookup函数的使用教程 和 可能遇到的错误解决方法

使用VLOOKUP示例 被查询的表格 表一 A列B列C列A1aB2bC3c 要匹配的列 表二 F列G列H列ACBDA 要G列匹配字母&#xff0c;H列匹配数字 G 使用公式VLOOKUP(F5,A:D,3,0) 参数说明 F5 是表二 F列第五行的A A:D表是要匹配的数据列表在A到D列&#xff0c;就是表一 &#xff08;注意…

android13 RK356X 预装第三方apk失败

RK356X android13 预安装第三方apk失败比如chrome浏览器_android13安装apk-CSDN博客 我试了一下&#xff0c;按照之前的常规方式集成apk&#xff0c;只有签名事业系统签名才可以集成进去&#xff0c;如果使用PRESIGNED&#xff0c;apk只会打包的到系统中&#xff0c;并没有安装…

什么样的汽车制造供应商管理平台 可以既高效又安全?

汽车制造供应商管理是汽车制造商最基础的工作项&#xff0c;因为在汽车制造环节&#xff0c;与供应商间存在着必不可少又高频的业务往来&#xff0c;而在汽车制造供应商之间&#xff0c;文件往来是确保业务顺利进行、沟通协作和质量控制的重要环节。这些文件往来涵盖了多个方面…

网络爬虫之爬虫原理

** 爬虫概述 Python网络爬虫是利用Python编程语言编写的程序&#xff0c;通过互联网爬取特定网站的信息&#xff0c;并将其保存到本地计算机或数据库中。 """ 批量爬取各城市房价走势涨幅top10和跌幅top10 """ ​ from lxml import etree impor…

通过本机端口映射VMware中虚拟机应用(例如同一局域网别人想远程连接你虚拟机中的数据库)

需要 虚拟机中安装一下达梦数据库&#xff0c;并且以后大家都连接你虚拟机中达梦数据库进行开发。。。。。。在不改动自己虚拟机配置&#xff0c;以及本地网卡任何配置的情况下如何解决&#xff1f;本虚拟机网络一直使用的NAT模式。 解决 找到NAT设置添加端口转发即可解决。…

高级IO—多路转接

&#x1f3ac;慕斯主页&#xff1a; 修仙—别有洞天 ♈️今日夜电波&#xff1a;Cupid - Twin Ver. (FIFTY FIFTY) - Sped Up Version 0:20━━━━━━️&#x1f49f;──────── 2:25 &#x1f504; …