微信小程序(下)

目录

[在事件处理函数中为 data 中的数据赋值](#在事件处理函数中为 data 中的数据赋值)

事件传参

[bindinput 的语法格式](#bindinput 的语法格式)

[实现文本框和 data 之间的数据同步](#实现文本框和 data 之间的数据同步)

条件渲染

[结合 使用 wx:if](#结合 使用 wx:if)

hidden

[wx:if与 hidden 的对比](#wx:if与 hidden 的对比)

wx:for

手动指定索引和当前项的变量名

[wx:key 的使用](#wx:key 的使用)

[WXSS 和 CSS 的关系](#WXSS 和 CSS 的关系)

[什么是 rpx 尺寸单位](#什么是 rpx 尺寸单位)

[@import 的语法格式](#@import 的语法格式)

全局配置文件及常用的配置项

[window 节点常用的配置项](#window 节点常用的配置项)

​编辑

tarbar

tabBar的6个组成部分

[tabBar 节点的配置项](#tabBar 节点的配置项)

小程序中网络数据请求的限制

网络数据请求

在页面刚加载时请求数据


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

通过调用 this.setData(dataObject)方法,可以给页面 data 中的数据重新赋值,示例如下:

事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。下面的代码就不能正常工作👇

因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnTapHandler(123)的事件处理函数。

可以为组件提供 data-*自定义属性传参,其中*代表的是参数的名字,示例代码如下:

最终:

  • info 会被解析为参数的名字数值
  • 8 会被解析为参数的值

在事件处理函数中,通过 event.target.dataset,参数名 即可获取到具体参数的值,示例代码如下:

bindinput 的语法格式

在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:通过 bindinput,可以为文本框绑定输入事件

实现文本框和 data 之间的数据同步

绑定input 事件处理函数:

条件渲染

wx:if

在小程序中,使用 wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加 else 判断

结合 <block>使用 wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用 wx:if 控制属性,示例如下:

注意:<block>并不是一个组件,它只是一个包裹性质的容器,,不会在页面中做任何渲染

hidden

在小程序中,直接使用 hidden="{{condition}}"也能控制元素的显示与隐藏:

wx:if与 hidden 的对比

运行方式不同

  • wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
  • hidden 以切换样式的方式(display:none/block;),控制元素的显示与隐藏

使用建议

  • 频繁切换时,建议使用 hidden
  • 控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

wx:for

语法示例如下:通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,

默认情况下,当前循环项的索引用 index 表示;当前循环项用 item 表示。

动指定索引和当前项的变量名

  • 使用 wx:for-index 可以指定当前循环项的索引的变量名
  • 使用 wx:for-item 可以指定当前项的变量名

wx:key 的使用

类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值从而提高渲染的效率,示例代码如下:

WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。与 CSS 相比,WXSS 扩展的特性有:

  • rpx 尺寸单位
  • @import 样式导入

什么是 rpx 尺寸单位

rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)

  • 在较小的设备上,1rpx所代表的宽度较小
  • 在较大的设备上,1rpx所代表的宽度较大

小程序在不同设备上运行的时候,会自动把rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。

@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束。示例如下:

全局配置文件及常用的配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:

pages

记录当前小程序所有页面的存放路径

window

全局设置小程序窗口的外观

tabBar

设置小程序底部的 tabBar 效果

style

是否启用新版的组件样式

window 节点常用的配置项

tarbar

tabBar的6个组成部分

  1. backgroundcolor:tabBar的背景色
  2. selectedlconPath:选中时的图片路径
  3. borderStyle:tabBar 上边框的颜色
  4. iconPath:未选中时的图片路径
  5. selectedcolor:tab上的文字选中时的颜色
  6. color:tab上文字的默认(未选中)颜色

tabBar 节点的配置项

每个 tab 项的配置选项

小程序中网络数据请求的限制

出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:

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

网络数据请求

发起 GET 请求

调用微信小程序提供的 wx.request()方法,可以发起 GET 数据请求,示例代码如下:

在页面刚加载时请求数据

在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数,示例代码如下:


小程序的基本使用就说到这里啦

努力遇见更好的自己!!!

相关推荐
计算机程序设计小李同学7 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序
幽络源小助理11 小时前
SpringBoot+小程序高校素拓分管理系统源码 – 幽络源免费分享
spring boot·后端·小程序
Mr -老鬼11 小时前
移动端跨平台适配技术框架:从发展到展望
android·ios·小程序·uni-app
内存不泄露12 小时前
棋牌预约小程序系统论文
小程序
计算机徐师兄14 小时前
Java基于微信小程序的食堂线上预约点餐系统【附源码、文档说明】
java·微信小程序·食堂线上预约点餐系统小程序·食堂线上预约点餐微信小程序·java食堂线上预约点餐小程序·食堂线上预约点餐小程序·食堂线上预约点餐系统微信小程序
说私域1 天前
短视频私域流量池的变现路径创新:基于AI智能名片链动2+1模式S2B2C商城小程序的实践研究
大数据·人工智能·小程序
毕设源码-邱学长1 天前
【开题答辩全过程】以 基于微信小程序的松辽律所咨询系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
+VX:Fegn08951 天前
计算机毕业设计|基于springboot + vue物流配送中心信息化管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·小程序·课程设计
说私域1 天前
B站内容生态下的私域流量运营创新:基于AI智能名片链动2+1模式与S2B2C商城小程序的融合实践
人工智能·小程序·流量运营
计算机毕设指导61 天前
基于微信小程序的钓鱼论坛系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven