微信小程序-03

小程序官方把 API 分为了如下 3 大类:
事件监听 API
特点:以 on 开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步 API
特点1:以 Sync 结尾的 API 都是同步 API
特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
异步 API
特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据

动态绑定

<view>{{info}}</view>
<image src="{{imgSrc}}"></image>
<view> {{randomNum>=5 ?"数字大于等于5":"数字小于5"}}</view>

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
在这里插入图片描述
事件对象属性
在这里插入图片描述
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。

//在事件处理函数中为 data 中的数据赋值
countChange(){
  this.setData({
    count: this.data.count+1
  })
},


//参数传递			data-参数名			e.target.dataset.参数名
<button type="primary" bindtap="btnTap2" data-info="{{2}}">2</button>

btnTap2(e){
this.setData({
  count: this.data.count+e.target.dataset.info,
})
},



//input实时获取输入		e.detail.value
<input bindinput="inputHandler"></input>

inputHandler(e){
console.log(e.detail.value)
},

条件渲染

<view wx:if="{{type==1}}"></view>
<view wx:elif="{{type==2}}"></view>
<view wx:else>保密</view>

//多个组件
<block wx:if="{{type===1}}">
  <view>View2</view>
  <view>View2</view>
</block>


<view hidden="{{flag}}">条件为true时隐藏</view>

wx:if 与 hidden 的对比:
运行方式不同
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
使用建议
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

列表渲染 wx:for 可以根据指定的数组,循环渲染重复的组件结构

arr1:['小红','小白','小蓝']

<view wx:for="{{arr1}}">
  索引:{{index}},当前项:{{item}}
</view>


userList:[
  {id:1,name:"小明"},
  {id:2,name:"小花"},
  {id:3,name:"小张"},
]

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

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

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

相关文章

在全志H616核桃派上实现USB摄像头的OpenCV颜色检测

在给核桃派开发板用OpenCV读取图像并显示到pyqt5的窗口上并加入颜色检测功能&#xff0c;尝试将图像中所有蓝色的东西都用一个框标记出来。 颜色检测核心api 按照惯例&#xff0c;先要介绍一下opencv中常用的hsv像素格式。颜色还是那个颜色&#xff0c;只是描述颜色用的参数变…

【vscode】远程资源管理器自动登录服务器保姆级教程

远程资源管理器自动登录服务器 介绍如何配置本地生成rsa服务端添加rsa.pub配置config文件 介绍 vscode SSH 保存密码自动登录服务器 对比通过账号密码登录&#xff0c;自动连接能节约更多时间效率&#xff0c;且通过vim修改不容易发现一些换行或者引号导致的错误&#xff0c;v…

CentOS 7安装全解析:适合初学者的指导

目录 前言 一.centos安装 1.下载镜像文件 2.安装 二.远程连接&#xff0c;换源 1.下载并且使用MobaXtermMobaXterm free Xserver and tabbed SSH client for Windows (mobatek.net)https://mobaxterm.mobatek.net/ 远程连接 2.换源 前言 在当今的信息化时代&#xff0c…

使用Go语言编写简单的HTTP服务器

在Go语言中&#xff0c;我们可以使用标准库中的"net/http"包来编写HTTP服务器。下面是一个简单的示例&#xff0c;展示了如何使用Go编写一个基本的HTTP服务器。 go复制代码 package main import ( "fmt" "net/http" ) …

JavaScript DOM表单相关操作之获取表单数据的方式

在与表单相关的操作中&#xff0c;我们用的最多的就是获取表单中的数据。想要获取指定输入框的数据&#xff0c;首先就需要获取到这个输入框对象。 1、通过id属性获取表单数据 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><tit…

【论文阅读笔记】Swin-Unet: Unet-like Pure Transformer for Medical Image Segmentation

1.介绍 Swin-Unet: Unet-like Pure Transformer for Medical Image Segmentation Swin-Unet&#xff1a;用于医学图像分割的类Unet纯Transformer 2022年发表在 Computer Vision – ECCV 2022 Workshops Paper Code 2.摘要 在过去的几年里&#xff0c;卷积神经网络&#xff…

java程序cpu飙高如何排查

一、使用传统jstack手法来排查 如何使用原生top命令、jstack命令来做定位具体代码的位置处理 1、简单步骤有下面几步 执行top命令&#xff0c;查看CPU占用情况&#xff0c;找到进程的pid(12002)使用 top -Hp <pid> 命令&#xff08;为Java进程的id号&#xff09;查看该…

System.Data.SqlClient.SqlException:“在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误

目录 背景: 过程: SQL Express的认识: 背景: 正在运行程序的时候&#xff0c;我遇到一个错误提示&#xff0c;错误信息如下&#xff0c;当我将错误信息仔细阅读了一番&#xff0c;信息提示的很明显&#xff0c;错误出现的来源就是连接数据库代码这块string connStr "s…

【教程】iOS Swift应用加固

&#x1f512; 保护您的iOS应用免受恶意攻击&#xff01;在本篇博客中&#xff0c;我们将介绍如何使用HTTPCORE DES加密来加固您的应用程序&#xff0c;并优化其安全性。通过以下步骤&#xff0c;您可以确保您的应用在运行过程中不会遭受数据泄露和未授权访问的风险。 摘要 …

网络防御保护——1.网络安全概述

一.网络安全概念 通信保密阶段 --- 计算机安全阶段 --- 信息系统安全 --- 网络空间安全 APT攻击 --- 高级持续性威胁 网络安全(网络空间安全--Cyberspace)从其本质上讲就是网络上的信息安全&#xff0c;指网络系统的硬件、软件及数据受到保护。不遭受破坏、更改、泄露&#xf…

[pytorch入门] 4. torchvision中数据集的使用

介绍 文档 可以去看官方文档 可以在里面找到一些数据集的使用 CIFAR10 import torchvision from torch.utils.tensorboard import SummaryWriterdataset_transform torchvision.transforms.Compose([torchvision.transforms.ToTensor(), ])train_set torchvision.datas…

opencv#27模板匹配

图像模板匹配原理 例如给定一张图片&#xff0c;如上图大矩阵所示&#xff0c;然后给定一张模板图像&#xff0c;如上图小矩阵。 我们在大图像中去搜索与小图像中相同的部分或者是最为相似的内容。比如我们在图像中以灰色区域给出一个与模板图像尺寸大小一致的区域&#xff0c;…

3DMAX初级小白班第一课:菜单栏介绍

基本介绍 这里不可能一个一个选项全部教给大家&#xff08;毕竟之后靠实操慢慢就记住了&#xff09;&#xff0c;只说一些相对需要注意的设置。 自定义-热键编辑器-热键设置 这里有你所需要的全部快捷键 自定义-自定义UI启动布局 将UI布局还原到启动的位置 自定义-通用单…

成功解决java.nio.charset.MalformedInputException: Input length = 1

项目启动时报错如下 Connected to the target VM, address: 127.0.0.1:5309, transport: socket 18:01:22.607 [main] ERROR o.s.b.SpringApplication - [reportFailure,843] - Application run failed org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedIn…

竞赛保研 机器视觉目标检测 - opencv 深度学习

文章目录 0 前言2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 0 前言 &#x1f5…

pod 报错Failed to connect to github.com port 443

pod 报错Failed to connect to github.com port 443 1、排查代理问题1.1、查找网络代理1.2、修改 Git 的代理 2、排查DNS解析问题2.1、查找 ip地址2.2、修改 host 文件 1、排查代理问题 1.1、查找网络代理 打开 设置 --> 网络与Internet --> 查找代理 1.2、修改 Git …

《堆排序》与《Top—k》

目录 ​编辑 前言&#xff1a; 关于《堆排序》&#xff1a; 第一步&#xff1a;建堆 第二步&#xff1a;排序 《Top—K问题》 关于Top—k问题&#xff1a; 前言&#xff1a; 我们在前面的blog中&#xff0c;对于《堆》已经有了初步的概念&#xff0c;那么接下来我们可以…

探索设计模式的魅力:一次设计,多次利用,深入理解原型模式的设计艺术

原型模式是一种设计模式&#xff0c;属于创建型模式的一种&#xff0c;它用于创建重复的对象&#xff0c;同时又能保持性能。在原型模式中&#xff0c;通过复制现有对象的原型来创建新对象&#xff0c;而不是通过实例化类来创建对象。这样做可以避免耗费过多的资源开销&#xf…

第二节 K8S 的架构

第二节 K8S 的架构 K8S 架构图如下: 官方文档: https://kubernetes.io/docs/concepts/architecture/ kube-api-server 是集群的核心&#xff0c; 是k8s中最重要的组件&#xff0c; 因为它是实现声明式api的关键, 整个集群的入口,所有请求都要经过它, api接口服务. kubernetes…

Navicat使用HTTP通道连接远程服务器的SQLite文件

拷贝ntunnel_sqlite.php文件到Linux机器中 ntunnel_sqlite.php文件位置&#xff1a; 在Navicat安装位置中可以找到ntunnel_sqlite.php文件&#xff0c;其他两个类似文件是支持MySQL和pgsql的
最新文章