微信小程序-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.mzph.cn/news/640802.shtml

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

相关文章

扫地机器人(二分算法+贪心算法)

1. if(robot[i]-len<sweep)这个代码的意思是——如果机器人向左移动len个长度后&#xff0c;比现在sweep的位置&#xff08;现在已经覆盖的范围&#xff09;还要靠左&#xff0c;就是覆盖连续不起来&#xff0c;呢么这个len就是有问题的&#xff0c;退出函数&#xff0c;再…

黑马axios案例之地区查询

查询某个省内某个城市的所有地区 接口&#xff1a;http://hmajax.itheima.net/api/area 参数名: pname:省份名字或直辖市名字&#xff0c;比如北京、福建省、辽宁省… cname:城市名字&#xff0c;比如北京市、厦门市、大连市… <!DOCTYPE html> <html lang"en&q…

嵌入式软件工程师面试题——2025校招社招通用(计算机网络篇)(三十二)

说明&#xff1a; 面试群&#xff0c;群号&#xff1a; 228447240面试题来源于网络书籍&#xff0c;公司题目以及博主原创或修改&#xff08;题目大部分来源于各种公司&#xff09;&#xff1b;文中很多题目&#xff0c;或许大家直接编译器写完&#xff0c;1分钟就出结果了。但…

[足式机器人]Part2 Dr. CAN学习笔记- 最优控制Optimal Control Ch07-4 轨迹追踪

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记 - 最优控制Optimal Control Ch07-4 轨迹追踪 1. 目标误差控制-误差的调节2. 稳态非零值控制3. 输入增量控制 1. 目标误差控制-误差的调节 2. 稳态非零值控制 3. 输入增量控制

fiddler流量捕获之winconfig

windows 使用了一种叫做“AppContainer”的隔离技术&#xff0c;使得一些流量无法正常捕获&#xff0c;在 fiddler中点击 WinConfig 按钮可以解除&#xff0c;这个与菜单栏 Tools→Win8 Loopback Exemptions 功能是相同的&#xff0c;流量捕获&#xff1a;指拦截和记录通过计算…

GPT-4 的决策在股市中进行量化投资

论文题目:Can Large Language Models Beat Wall Street? Unveiling the Potential of AI in Stock Selection 论文链接:https://arxiv.org/abs/2401.03737 博客地址:https://www.marketsense-ai.com/ 从本质上来说&#xff0c;股票选择是个价格发现机制&#xff0c;在股票投…

Web 开发 1: Flask 框架介绍和使用

在 Web 开发中&#xff0c;Flask 是一个流行且灵活的 Python Web 框架&#xff0c;用于构建 Web 应用程序。它简洁而易于上手&#xff0c;适用于小型到中型的项目。在本篇博客中&#xff0c;我将为你介绍 Flask 框架的基础知识和常用技巧&#xff0c;帮助你更好地掌握 Web 开发…

opencv#28 图像卷积

图像卷积 图像卷积是图像处理中最为基础的操作之一&#xff0c;其常用在图像的边缘检测&#xff0c;图像的去噪声以及图像压缩等领域。 图像卷积主要步骤: Step1:将卷积模板旋转180。 Step2:卷积模板移动到对应位置。 Step3:模板内求和&#xff0c;保存求和结果。 Step4:滑…

容器技术2-镜像与容器储存

目录 一、镜像制作 1、ddocker build 2、docker commit 二、镜像存储 1、公共仓库 2、私有仓库 三、镜像使用 四、容器存储 1、镜像元数据 2、存储驱动 3、数据卷 一、镜像制作 1、ddocker build 基于 Dockerfile 自动构建镜像 其机制为&#xff1a;每一行都会基于…

<C++>STL->string

string类的由来 这是string的定义&#xff1a; string类是模板实例化后的别名&#xff0c;basic_string是字符串类模板&#xff0c;常见的字符串类型有wchar_t char char16_t char32_t &#xff0c;basic_string类针对的是所有字符串类型设计出来的一个模板&#xff0c;而我…

Elasticsearch基础篇(八):常用查询以及使用Java Api Client进行检索

ES常用查询以及使用Java Api Client进行检索 1. 检索需求 参照豆瓣阅读的列表页面 需求&#xff1a; 检索词需要在数据库中的题名、作者和摘要字段进行检索并进行高亮标红返回的检索结果需要根据综合、热度最高、最近更新、销量最高、好评最多进行排序分页数量为10&#xf…

flutter设置windows是否显示标题栏和状态栏和全屏显示

想要让桌面软件实现全屏和不显示状态栏或者自定义状态栏&#xff0c;就可以使用window_manager这个依赖库&#xff0c;使用起来还是非常方便的&#xff0c;可以自定义显示窗口大小和位置&#xff0c;还有设置标题栏是否展示等内容&#xff0c;也可以设置可拖动区域。官方仓库地…

OpenHarmony当前进展和未来趋势

操作系统自20世纪50年代诞生&#xff0c;经历了从专用操作系统到通用操作系统的转变。整体可以将操作系统的发展历史分为3个阶段&#xff1a;PC时代、移动互联网时代、万物互联时代。 PC时代主要以计算机为主&#xff0c;用户规模从1970年的10亿增长到1990年的30亿。这一时代诞…

鸿蒙原生应用/元服务实战-DevEco Studio 模拟器资源经常不足

DevEco Studio 模拟器资源经常不足&#xff0c;模拟器是最方便和最广泛的开发者可以快速体验应用元服务效果的途径&#xff0c;还是要加强。 除了Wearable,其他都用不了。 只能用预览器看效果&#xff0c;或者使用远程真机或者本地真机了。 在API9&#xff0c;比如分享等&…

leetcode第 381 场周赛最后一题 差分,对称的处理

第 381 场周赛 - 力扣&#xff08;LeetCode&#xff09;最后一题3017. 按距离统计房屋对数目 II - 力扣&#xff08;LeetCode&#xff09; dijkstra超时了&#xff0c;看了灵神的解题方法力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台&#xff0c;其…

二.用户与权限管理(二)

用户与权限管理 5.角色管理5.1角色的理解5.2创建角色5.3给角色赋予权限5.4查看角色的权限5.5回收角色的权限5.6删除角色5.7给用户赋予角色5.8激活角色5.9撤销用户角色5.10设置强制角色(mandatory role) 6.配置文件的使用6.1配置文件格式6.2 启动命令与选项组6.3 特定MySQL版本的…

java数组ArrayList(存对象)

1、dade文件 package model;public class dade {private int id;private String name;public dade() {}public dade(int id, String name) {this.id id;this.name name;}public int getId() {return id;}public void setId(int id) {this.id id;}public String getName() {…

推荐IDEA一个小插件,实用性很高!!

插件&#xff1a; Convert YAML and Properties File 由于每个人的开发习惯不同&#xff0c;在开发过程中会遇到各种小细节的问题。今天给大家介绍一个小插件&#xff0c;作用不大&#xff0c;细节很足。 就是properties类型文件和yml文件互相自由转换 解决&#xff1a;…

【webrtc】neteq测试工程

设置git代理 $ git config --global http.https://github.com.proxy socks5://127.0.0.1:7890 git config --global https.https://github.com.proxy socks5://127.0.0.1:7890导入cmake直接构建 win32 debug v143 编译opus Build started...

云原生全栈监控解决方案(全面详解)

【作者】JasonXu 前言 当前全球企业云化、数字化进程持续加速&#xff0c;容器、微服务等云原生技术在软件架构中快速渗透&#xff0c;IT 架构云化、复杂化持续驱动性能监控市场。企业云化、数字化持续转型&#xff0c;以及为了考虑系统的弹性、效率&#xff0c;企业软件开发中…