小程序-2(WXML数据模板+WXSS模板样式+网络数据请求)

目录

1.WXML数据模板

数据绑定

事件绑定

小程序中常用的事件

事件对象的属性列表

target和currentTarget的区别

bindtap的语法格式

在事件处理事件中为data中的数据赋值

事件传参与数据同步

事件传参

bindinput的语法绑定事件

文本框和data的数据同步

条件渲染

wx:if

结合使用wx:if

hidden

***wx:if和hidden的对比

列表渲染

wx:for

wx:key

2.WXSS模板样式

wxss和css的区别

rpx的实现原理

样式导入

全局样式和局部样式

全局配置

window

tabBar

配置tabBar选项

3.网络数据请求

小程序网络数据请求限制

配置request合法域名

发起GET请求和POST请求

在页面刚加载时请求数据

跳过request合法校验

跨域和Ajax的说明


1.WXML数据模板

数据绑定

数据绑定的规则:在js文件的data中定义数据,在WXML中使用数据

Mustache语法 即用双括号将数据包裹起来   <view>{{要绑定的数据名称}}</view>

Mustache语法主要用于绑定内容、绑定属性和运算(三元运算、算术运算)

进行三元运算时一定要注意书写的格式 randomNum1:Math.random() * 10 中间的空格是不能省略的,这里表示生成的是10以内的随机数

进行算术运算也要注意格式,randomNum2:Math.random().tofixed(2) 表示生成一个带有两位小数的随机数,前面内容写在data中,进行运算时写在WXML中,直接在双括号中进行运算

事件绑定

小程序中常用的事件

tap  bindtap或bind:tap       手指触摸后马上离开,类似于click点击事件          

input    bindinput或bind:input           文本框的输入事件

change     bindchange或bind:change      状态改变时触发

事件对象的属性列表

event.type              获得event的事件类型

event.target            触发事件的组件的一些属性值集合

event.detail             额外的信息

target和currentTarget的区别

target是触发该事件的源头组件(本人),而currentTarget则是当前事件所绑定的组件(父亲)

例如:在view中放置button,点击按钮时,点击事件以冒泡的方式向外扩散,也会触发view的tap事件处理函数,对于外层组件view来说e.target是内部的按钮组件,而e.currentTarget是当前的view组件

bindtap的语法格式

在事件处理事件中为data中的数据赋值

通过调用this.setData({})方法来给数据重新赋值,数据的初赋值要写在data{}中

事件传参与数据同步

事件传参

再给事件命名时,不能直接在名字后面加上属性值,可以再添加一个data-*组件和Mustache组合来传参,其中*指的是参数的名字(起一个名字),Mustache的双花括号中放参数

在js文件中,通过event.target.dataset.参数名来获得参数,注意这里的方法与之前调用的方法是不同的,大的方法是this.setData({}),这个小的是dataset

bindinput的语法绑定事件

在js文件中通过event.detail.value来获取文本框最新的值

效果就是每输入一个值,显示框会把当前文本框的全部内容输出一次

文本框和data的数据同步

可以先给input设置一个value值(文本框的名字)放在Mustache中,在js文件中先在data中给msg初始赋值,之后在函数中使用this.setData方法,调用event.detail.value即可显示当前文本框的全部内容,包括初始赋值和在文本框中直接输入的内容,

可以在wxss中对文本框的样式进行设置

wxml

js

wxss

条件渲染

wx:if

使用wx:if="{{condition}}"来判断是否渲染该代码块,也可以用wx:elif和wx:else来判断,注意书写格式

在下面的案例中,要提前把type的值写在data中,再在wxml中写view时进行判断

结合<block>使用wx:if

使用<block>包裹,可以避免不必要的渲染,提高渲染性

为true时显示元素,为false时隐藏元素

hidden

可以在data中写一个flag,让后在view标签中使用hidden结合Mustache,将flag放进去,条件为true时隐藏,false时显示

***wx:if和hidden的对比

列表渲染

wx:for

该方法可将指定的数组循环渲染,在data中创建一个数组如:array:['苹果','橙子','西瓜'],之后再wxml中写一个view,中间的渲染写法是 索引是:{{index}} 当前项是:{{item}}

wx:key

使用wx:key,即可以根据列表中的某个值去查找对应的想要值,比如可以根据id去输出对应的name值

注意列表的写法,以及key的代码 <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

2.WXSS模板样式

wxss和css的区别

rpx的实现原理

将所有的设备屏幕,在宽度上等分为750份,即当前屏幕的总宽度是750rpx

样式导入

可以创建一个新文件夹,在其中创建一个公共的wxss文件,一些公有的属性样式可以写在里面,想用的时候在当前的wxss文件中import一下,如@import"common/common.wxss"

全局样式和局部样式

全局样式是写在app.wxss中的,局部样式写在页面中的.wxss文件中

当二者冲突时,局部样式会覆盖全局样式;当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置

window

导航栏背景颜色一般不是文本颜色,以#开头;导航栏标题颜色,黑色或者白色

enablePullDownRefresh  是布尔类型值,表示是否下拉表单,为true

backgroundColor  是下拉表单后,上面的一部分窗口的背景色

backgroundTextStyle   是下拉表单后,上面的一部窗口中会有加载的小圆点,小圆点的颜色只能是dark或者light

onReachBottomDistance  是上拉触底距离,当滚动条距离底部50px时就加载新的数据,在书写的过程中,一般默认是50,后面不需要加单位,一般不建议修改这个值

tabBar

tabBar分为底部和顶部

tabBar中最少2个、最多5个tab标签;当渲染顶部tabBar时,不显示icon图标,只显示文本

同样是在app.json中配置的tabBar,每个tab中必须包含list,而list中又必须包含pagePath和text两个属性

配置tabBar选项

必须要把tabBar的页面放在最前面,否则加载不出来

3.网络数据请求

小程序网络数据请求限制

只能请求HTTPS类型的接口,必须将接口的域名添加到信任列表中

配置request合法域名

发起GET请求和POST请求

调用微信小程序的wx.request()方法,网址、请求方式、发送数据、回调函数

在页面刚加载时请求数据

跳过request合法校验

跨域和Ajax的说明

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

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

相关文章

《向量数据库指南》——使用 Grafana 和 Loki 搭建 Milvus Cloud日志查询系统

本教程将介绍如何设置 Grafana 和 Loki 来有效监控您的 Milvus Cloud实例。 Milvus Cloud是一款分布式向量数据库,可高效存储、索引和管理万亿级 Embedding 向量,是搭建 AI 和 ML 应用的首选向量数据库系统。 Grafana 是一个开源的指标监控平台,提供可视化的指标和日志…

5,SSH 端口转发

SSH 端口转发 简介 SSH 除了登录服务器&#xff0c;还有一大用途&#xff0c;就是作为加密通信的中介&#xff0c;充当两台服务器之间的通信加密跳板&#xff0c;使得原本不加密的通信变成加密通信。这个功能称为端口转发&#xff08;port forwarding&#xff09;&#xff0c…

SpringCloud | 单体商城项目拆分(微服务)

为什么要进行微服务拆分&#xff1f; 在平常的商城项目中&#xff0c;我们一般的项目结构模块都是将各种业务放在同一个项目文件夹&#xff0c;比如像&#xff1a; 用户&#xff0c;购物车&#xff0c;商品&#xff0c;订单&#xff0c;支付等业务都是放在一起&#xff0c;这样…

thinkphp:数据库多条件查询

一、使用if条件限制查询条件 $query Db::table(wip_operation_plan)->alias(d)->join([wip_jobs_all > a], a.wip_entity_name d.wip_entity_name)->join([sf_item_no > c], a.primary_itemc.item_no)->field(d.*,c.item_no as item_no,c.item_name as i…

线上观看 3 万+!「智能运维MeetUp」精彩回顾,探讨智能体构建新方向

龙蜥社区“走进系列”第 11 期走进中兴通讯-智能可观测运维技术 MeetUp 于成都圆满结束&#xff0c;由中兴通讯联合龙蜥社区系统运维联盟&#xff08;SOMA&#xff09;&#xff08;以下简称“联盟”&#xff09;共同举办。本次活动现场汇聚了阿里云、谐云科技、乘云数字、中兴通…

MySQL数据库day7.11

一&#xff0c;SQL概述 1.1 SQL语句语法 MySQL 数据库的 SQL 语句不区分大小写&#xff0c;关键字建议使用大写&#xff0c; 以分号结尾。例如&#xff1a; SELECT * FROM user; 使用 /**/ 、 -- 、 # 的方式完成注释 /* 多行注释 */ -- 单行注释 # 单行注释 SELECT * FRO…

vue2 ant-design select组件自定义下拉框, dropdownRender 使用,以及遇到的坑

业务需求&#xff1a;下拉框需要满足用户可输入筛选 和 点击右侧 字符按钮 #A-Z进行用户选择 1、基础页面代码 <div><a-selectstyle"width: 100%"placeholder"请选择客户"allow-clearshow-search:filter-option"false":not-found-con…

计算机硬件---如何更新自己电脑的BLOS

1找官网 例如“我使用的是HP&#xff08;惠普&#xff09;品牌的电脑”我只需要在浏览器上搜索“惠普官网”或“惠普-blos更新” 就可以看到&#xff0c;来自官网中更新blos的信息 2.有些品牌要查序列号该怎么办呢&#xff1f; 有许多方法可以查询&#xff0c;例如&#xf…

android13 frameworks里面常用的保存信息或者版本判断的方法

总纲 android13 rom 开发总纲说明 目录 1.前言 2. 数据库 2.1 代码读取用法参考 3.prop 属性配置 3.1 property的key值有哪些特点 4.区别 5. 其他数据存储 6.彩蛋 1.前言 frameworks 不像我们一般开发app那样,很多应用保存的方法都无法使用。这里记录我们系统rom开…

Java性能优化-if-else简化技巧

场景 Java性能优化-switch-case和if-else速度性能对比&#xff0c;到底谁快&#xff1f;&#xff1a; Java性能优化-switch-case和if-else速度性能对比&#xff0c;到底谁快&#xff1f;-CSDN博客 如果单纯是做情景选择&#xff0c;建议使用switch&#xff0c;如果必须使用i…

关于java的反射

❓❓❓反射是啥呀相信许多学java的同学非常困惑在学的时候&#xff0c;总是感觉懂了却又没懂或者直接忽略过去了&#xff0c;那么本文就带大家探讨一下什么是反射在java中以及它的机制和运用。 ⭐️什么是反射&#xff1a; 首先我们知道一些知识&#xff1a; 维基百科的解释 …

武汉市集成电路领域重点产业链研究咨询服务机构申报条件、时间

武汉市集成电路领域重点产业链研究咨询服务机构公开遴选有关内容如下&#xff0c;武汉市的企业单位可以了解一下 一、采购内容 &#xff08;一&#xff09;项目名称 武汉市集成电路领域重点产业链研究咨询服务项目。 &#xff08;二&#xff09;项目内容 为进一步推动我市…

springboot项目 导入 maven坐标 错误 Could not transfer artifact XXX

1.报错原因 当时导入的是 redis坐标 &#xff0c;导入jar 包报错&#xff08;当时是网速太慢了&#xff0c;一直卡着不动 就关了 idea 重新下载&#xff09;结果报错 之前的redis 项目都可以的&#xff0c;网上找了一下 都没解决 2.解决办法 既然说不能传输&#xff0c; 就说…

有用的工具

一、appuploader Appuploader home -- A tool improve ios develop efficiency such as submit ipa to appstore and manage ios certificate这是一款p12证书查看的工具&#xff0c; 需要建立一个apple ID专用密码&#xff1a;Manage your Apple ID

redis其他类型和配置文件

很多博客只讲了五大基本类型&#xff0c;确实&#xff0c;是最常用的&#xff0c;而且百分之九十的程序员对于Redis只限于了解String这种最常用的。但是我个人认为&#xff0c;既然Redis官方提供了其他的数据类型&#xff0c;肯定是有相应的考量的&#xff0c;在某些特殊的业务…

C++相关概念和易错语法(22)(final、纯虚函数、继承多态难点)

1.final final在继承和多态中都可以使用&#xff0c;在继承中是指不想将自己被继承&#xff0c;在多态中是指不想该函数被重写&#xff0c;比较简单&#xff0c;下面是一些使用例子。 2.纯虚函数 当我们需要抽象一个类的时候&#xff0c;我们就需要用到纯虚函数。所谓抽象的类…

C# 4.0 等待线程结束

在C#中&#xff0c;如果你正在使用多线程编程&#xff0c;并且想要等待一个或多个线程完成它们的工作再继续执行&#xff0c;有几种方式可以实现。从C# 4.0开始&#xff0c;虽然直接用于等待线程结束的特性&#xff08;如Thread.Join()&#xff09;在之前的版本中也已经存在&am…

升级版凯撒密码加密解密器

目录 开头程序程序的流程图程序加密与解密的效果例1加密的过程加密之后的文本 例2解密之后的文本解密之后的文本 例3加密之后的文本加密之后的文本 结尾 开头 大家好&#xff0c;我叫这是我58。今天&#xff0c;我们来看一下我用C语言编译的升级版凯撒密码加密解密器和与之相关…

小程序 - - - - - 实现渐隐渐显(监听滚动距离版)

代码如下&#xff1a; <!-- fixed-left --> <view class"fixed-box" animation"{{animationData}}">这里是渐隐渐显的标签 </view>.fixed-box {position: fixed;left: 0;top: 0;z-index: 999;background-color: #ccc;/* background-colo…

如何设计统计量及相关假设检验

一、如何设置H0和H1假设 谁做H0&#xff0c;谁做H1&#xff0c;在统计学的假设检验里是有约定俗成的规定的。即&#xff1a;status quo&#xff08;默认/现状&#xff09;是H0&#xff0c;而新观点或试图challenge现状的是H1。H1也叫research hypothesis&#xff0c;所以我们做…