当前位置: 首页 > news >正文

微信小程序基础使用-请求数据并渲染

小程序基本使用-请求数据并渲染

小程序模板语法-数据绑定

在js中定义数据

Page({data: {isOpen: true,message: 'hello world!'}
})

小程序的data是一个对象,不同于vue的data是一个函数

在模块中获取使用数据

小程序中使用 {{}} 实现数据与模板的绑定

  1. 内容绑定:<view>{{ 属性名 }}</view>
  2. 属性绑定: <input value="{{属性名}}" />

{{}} 内写的是表达式

简易双向绑定

  1. 小程序中提供了 model:value="{{数据名}}" 语法来实现双向的数据绑定

  2. 目前只能用在 inputtextarea 组件中。

    只能是一个单一字段的绑定,不能嵌套对象.否则出现以下报错:

    [pages/index/index] Two-way binding does not support complex data paths currently. This two-way binding is ignored.

    双向绑定目前不支持复杂的数据路径。这种双向绑定将被忽略。

小程序修改数据

格式:

<元素 bind:事件名="处理函数">
this.setData({属性名1: 新值1,属性名2: 新值2
})this.setData({"属性1.属性2":})

模板语法—条件渲染

小程序中的条件渲染的方式有两种

1.wx:if

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

2.hidden

    • 在小程序中,使用hidden="{{条件}}"也能控制元素的显示与隐藏
    • 条件为true则隐藏,否则则显示

wx:if 与 hidden区别

1.区别

    1. wx:if是通过动态创建或移除元素来控制元素是否可见
    2. hidden 是通过样式(none/block)来控制元素是否可见

2.要点

  • 如果一个标签频繁切换显示,建议使用 hidden。例如:折叠面板,抽屉面板等等
  • 如果不频繁切换,建议使用wx:if,它有更好的初始化性能。

模板语法—列表渲染—基础

在这里插入图片描述

格式

<元素 wx:for="{{列表数据}}" ><!--  wx:for 结构内可以使用两个变量(1)item:循环项(2)index:循环索引 -->{{item}}, {{index}}
</元素>

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

<view wx:for="{{list}}" wx:for-item="value" wx:for-index="key">{{key}}-{{value}}
</view>

模板语法-列表渲染-wx:key

wx:key 针对不同的数组类型有不同的写法

  • 普通数组 wx:key=“*this”
  • 数组对象 wx:key=“具有唯一性的某个属性名”

小程序内置API-网络请求

网络请求

调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互,其语法格式如下:

wx.request({url: '这里是接口的地址',method: '这里是请求的方法',data: '请求时提交的数据',header: {/* 请求头信息 */},success: () => {/* 成功的回调 */},fail: () => {/* 失败的回调 */},complete: () => {/* 成功或失败的回调 */}
})

配置网络请求合法域名

域名必须是https

在这里插入图片描述
在这里插入图片描述

小程序内置api-界面交互

showLoading效果

配合网络请求来使用

wx.showLoading 显示 loading 提示框

  • title 文字提示内容
  • mask 是否显示透明蒙层,防止触摸穿透
hideLoading
  • wx.hideLoading 隐藏 loading 提示框
showToast

wx.showToast 消息提示框(轻提示)

  • title 提示的标题
  • mask 是否显示透明蒙层,防止触摸穿透
  • duration 延迟时间(提示框显示多久,单位是毫秒)
  • icon 指定图标,none 不使用图标
操作注意:
  1. 发请求之前,showLoading
  2. 请求结束之后(无论成败),hideLoading
  3. 数据渲染成功之后,showToast

微信小程序本地存储

  • wx.setStorageSync(key, value) 存入一个数据,复杂类型数据不需要 JSON.stringify 处理
  • wx.getStorageSync(key) 读取本地key数据,复杂类型数据不需要 JSON.parse 处理
  • wx.removeStorageSync(key) 删除本地key数据
  • wx.clearStorageSync()清空本地全部数据

微信小程序API的特征

API的用法分类三类:

  1. 异步的api
  2. 同步的api
  3. 支持promise的api
异步 API

绝大部分的 API 都是异步方式,通过回调函数获取 API 执行的结果

  • success API 调用成功时执行的回调
  • fail API 调用失败时执行的回调
  • complete API 调用结束时执行的回调(无论成功或失败)

基本格式:

wx.api名称({success(res){ console.log(成功执行api的结果) }})
支持promise的api

部分异步的 API 也支持以 Promise 方式返回结果,此时可以配合 asyc/await 来使用。

例如:支持Promise格式的异步api有:

  • wx.getSystemInfoSync()
  • wx.getStorage

支持Promise格式的异步api有:

  • wx.request()
同步 API

部分 API 支持以同步方式获取结果,这些 API 的名称都 **Sync** 结尾。如

  • wx.getStorageSync : 获取本地存储
  • wx.getSystemInfoSync: 获取系统信息

基本格式:

const result = wx.api名称()

事件处理-事件对象&传参

事件对象

bind:事件类型=事件回调 //回调函数第1个参数即为事件对象

事件回调传参

小程序的事件回调不支持传参数

因此要将模板中的数据传递到事件回调中就必须要通过事件对象来实现。

方式1:

  • 补充参数:

     <button bind:tap="eventHandler" **mark:属性名="值"**>点击我看看</button>
    
  • 获取值:

    eventHandler(ev){ console.log(**ev.mark.属性名**) 
    

方式2:

  • 补充参数 :

    <button bind:tap="eventHandler" **data-属性名="值"** >点击我看看</button>
    
  • 获取值:

    eventHandler(ev){ console.log(**ev.target.dataset.属性名**) }
    

事件处理-组件事件

事件类型只属于某个组件,我们将其称为组件事件

前面介绍的 tap 事件可以在绝大部分组件是监听,我们可以将其理解为通用事件类型,然而也有事件类型只属于某个组件,我们将其称为组件事件。

组件不同,支持的事件也不同

scroll-view组件中的事件

  1. bind:scrolltolower 当滚动内容到达底部或最右侧时触发
  2. bind:refresherrefresh 执行下拉操作时触发

另外,还有注意一个特别的属性

refresher-triggered 用它来控制下拉刷新状态

事件处理-表单组件中的事件

如何获取表单中,用户选择的值?

  1. input: 简易双向绑定
  2. radioGroup: 绑定change事件,在事件对象中detail.value拿到值
  3. checkboxGroup: 绑定change事件,在事件对象中detail.value拿到值
  4. picker: 绑定change事件,在事件对象中detail.value拿到值
  • change 表单数据发生改变时触发(input 不支持)

​ 5.整体表单提交

  • form: submit事件 表单提交时触发,button 按钮必须指定 form-type 属性

生命周期-页面生命周期

  • 分类

    • 应用生命周期
    • 页面生命周期
    • 组件生命周期

生命周期是一些名称固定,会自动执行的函数。

页面生命周期-基本使用

  • onLoad 在页面加载完成时执行,只会执行 1 次,常用于获取地址参数和网络请求

  • onReady页面初次渲染完成

  • onShow 在页面处于可见状态时执行,常用于动态更新数据或状态

  • onHide 在页面处于不见状态时执行,常用于销毁长时间运行的任务,如定时器

    页面生命周期-应用场景

onLoad(){ // 发起请求 }

onShow(){ // 动态更新数据或状态 }

onHide 在页面处于不见状态时执行,常用于销毁长时间运行的任务,如定时器

onReady 在页面初次渲染完成时执行,只会执行 1 次,常用于节点操作或动画交互等场景

生命周期-应用生命周期

app.js

  • onLaunch 小程序启动时执行1次,常用于获取场景值或者启动时的一些参数(如自定义分享)
  • onShow 小程序前台运行时执行,常用于更新数据或状态
  • onHide 小程序后台运行时执地,常用于销毁长时间运行的任务,如定时器。
// pages/lifetimes/index.js
Page({// 小程序转发/分享onShareAppMessage() {return {title: '小程序学习',path: '/pages/index/index?test=测试数据',imageUrl: '/static/images/cover.png'}}
})

执行1次,常用于获取场景值或者启动时的一些参数(如自定义分享)

  • onShow 小程序前台运行时执行,常用于更新数据或状态
  • onHide 小程序后台运行时执地,常用于销毁长时间运行的任务,如定时器。
// pages/lifetimes/index.js
Page({// 小程序转发/分享onShareAppMessage() {return {title: '小程序学习',path: '/pages/index/index?test=测试数据',imageUrl: '/static/images/cover.png'}}
})

相关文章:

微信小程序基础使用-请求数据并渲染

小程序基本使用-请求数据并渲染 小程序模板语法-数据绑定 在js中定义数据 Page({data: {isOpen: true,message: hello world!} })小程序的data是一个对象&#xff0c;不同于vue的data是一个函数 在模块中获取使用数据 小程序中使用 {{}} 实现数据与模板的绑定 内容绑定&a…...

代码随想录训练营Day55| 392.判断子序列 ;115.不同的子序列

392.判断子序列 class Solution {public boolean isSubsequence(String s, String t) {int m s.length();int n t.length();if(m>n) return false;int[][] dp new int[m1][n1];dp[0][0]0;for(int i1;i<m;i){for(int j1;j<n;j){if(s.charAt(i-1)t.charAt(j-1)){dp[i…...

网络作业9【计算机网络】

网络作业9【计算机网络】 前言推荐网络作业9一. 单选题&#xff08;共12题&#xff0c;36分&#xff09;二. 多选题&#xff08;共1题&#xff0c;3分&#xff09;三. 填空题&#xff08;共2题&#xff0c;10分&#xff09;四. 阅读理解&#xff08;共1题&#xff0c;17分&…...

C++ QT 上传图片至mysql数据库

以下是一个简单的C QT上传图片至MySQL数据库的代码示例&#xff1a; #include <QtSql> #include <QFile> #include <QByteArray> int main() { //连接数据库 QSqlDatabase db QSqlDatabase::addDatabase("QMYSQL"); …...

2023去水印小程序saas系统源码修复独立版v1.0.3+uniapp前端

&#x1f388; 限时活动领体验会员&#xff1a;可下载程序网创项目短视频素材 &#x1f388; &#x1f389; 有需要的朋友记得关赞评&#xff0c;阅读文章底部来交流&#xff01;&#xff01;&#xff01; &#x1f389; ✨ 源码介绍 一个基于uniapp写的小程序&#xff0c;后端…...

【ChatGPT】数据科学 ChatGPT Cheat Sheet 书籍分享(阿里云盘下载)

封皮 以下为书中部分内容的机器翻译 我们的重要提示指南 1. 以 AI 角色的描述开始提示。 例如&#xff0c;“你是{x}”或“我希望你扮演{x}”。如果您不确定&#xff0c;请尝试“你是一个有帮助的助手”。 例如&#xff0c;您是 OpenAI 的数据科学家&#xff0c;您正在研究大型…...

使用 Docker-compose 搭建lnmp

服务编排&#xff1a; 应用编排&#xff1a; 单机环境下&#xff1a;shell/python脚本多机/集群环境下&#xff1a;ansible、saltstack、pubbet docker容器编排&#xff1a; 单机&#xff1a;docker-compose多机/集群&#xff1a;docker swarm&#xff0c;mesos marathon&a…...

chatgpt赋能python:Python中的矩阵合并方法:介绍和使用方法

Python中的矩阵合并方法: 介绍和使用方法 矩阵合并是Python编程中常用的操作之一&#xff0c;特别是针对数据分析、机器学习和深度学习等领域。Python提供了多种方法来合并矩阵&#xff0c;本文将介绍这些方法并分享如何在实际应用中使用它们。 普通矩阵合并 最基础的矩阵合…...

Java动态代理:优化静态代理模式的灵活解决方案

文章目录 代理模式定义具体实现分析优缺点 优化使用动态代理解决优化相关知识动态代理种类场景应用 代理模式 定义 代理模式&#xff0c;为其他对象提供一种代理以控制对这个对象的访问 具体实现 代理模式的具体实现描述可以分为以下几个步骤&#xff1a; 创建抽象对象接…...

四种Bootloader程序安全机制设计

正文 大家周末好&#xff0c;我是bug菌~ 不管是玩单片机还是嵌入式linux&#xff0c;基本上都会接触到bootloader&#xff0c;所以bootloader程序也是一个关键的组件&#xff0c;进行硬件初始化&#xff0c;应用程序的合法性、完成性检测、升级功能等等都与其息息相关。 像一些…...

【DBA 警世录之习惯性命令---读书笔记】

&#x1f448;【上一篇】 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 【下一篇】&#x1f449; &#x1f53b;【&#x1f4a3; 话题引入&#xff1a;既然 DBA 这个职业如此危险&#xff0c;那么哪些习惯是 DBA 必须养成的呢&#x…...

Vue中如何进行状态持久化(LocalStorage、SessionStorage)

Vue中如何进行状态持久化&#xff08;LocalStorage、SessionStorage&#xff09;&#xff1f; 在Vue应用中&#xff0c;通常需要将一些状态进行持久化&#xff0c;以便在用户关闭浏览器或刷新页面后&#xff0c;仍能保留之前的状态。常见的持久化方式包括LocalStorage和Sessio…...

【30天熟悉Go语言】6 Go 复杂数据类型之指针

文章目录 一、前言二、数据类型总览三、指针1、特殊运算符& *2、内存角度来看指针3、使用指针修改数据4、指针使用的注意事项5、对比着看Java的引用类型 三、总结 一、前言 Go系列文章&#xff1a; GO开篇&#xff1a;手握Java走进Golang的世界2 Go开发环境搭建、Hello Wor…...

Linux内核使用红黑树的场景

进程调度队列 (Process Scheduling)&#xff1a;内核需要对进程按照一定的调度策略进行排队&#xff0c;以便更好地利用 CPU 的时间片。因此&#xff0c;内核使用红黑树作为查找和管理进程调度队列的数据结构&#xff0c;以支持快速的查找、插入和删除操作。 文件系统 (File S…...

遗留的 AppSec 工具迷失在云端

随着应用程序开发步伐的加快&#xff0c;IT 和安全团队正在对旧的应用程序安全(AppSec) 工具失去信心。 根据 Backslash 对 300 名 CISO、AppSec 经理和工程师的调查&#xff0c;遗留工具无法跟上并陷入永远的追赶游戏。 影响是深远的&#xff0c;大多数组织都看到云原生 App…...

直流稳压电源与信号产生电路(模电速成)

目录 一、直流稳压电源 1、直流稳压电路 2、串联型稳压电路 3、集成稳压电路 二、信号产生电路 1、振荡电路 2、波形发生器 一、直流稳压电源 1、直流稳压电路 直流电源由 变压器、整流、滤波、稳压 四部分组成 整流&#xff1a;将交流变为直流 滤波&#xff1a;减小…...

0202性能分析-索引-MySQL

1 索引语法 创建索引 CREATE [UNIQUE|FULLTEXT] INDEX index_name ON table_name(index_column_name,...);Index_name&#xff1a;规范为idx_表名_字段名... 查看索引 SHOW INDEX FROM table_name;删除索引 DROP INDEX index_name ON table_name;按照下列要求&#xff0c;创建…...

Play wright自动化测试工具该如何更加完美地使用

目录 1.1 拦截网络请求 1.2 pytest 管理用例 1.3 PO模型 1.4 API 和 UI 自动化测试融合 1.5 数据驱动 1.6 动态挑选用例执行 1.6 Allure测试报告 1.7 持续集成 1.1 拦截网络请求 网络拦截&#xff1a; 无响应 pass 中止 route.abort("aborted") 放行 route…...

数据可视化学习笔记:Python实现汽车品牌销售量矩形树图

引言 本文将介绍如何使用 Python 和 Pyecharts 库创建一个汽车品牌销售量的矩形树图。我们将使用 Pandas 读取 CSV 文件数据,然后对数据进行处理、封装,最后将数据可视化为矩形树图。 准备工作 首先,我们需要先安装好相关库: PandasPyecharts可以使用 pip 命令进行安装:…...

【深蓝学院】手写VIO第3章--基于优化的 IMU 与视觉信息融合--作业

0. 题目 1. T1 T1.1 绘制阻尼因子曲线 将尝试次数和lambda保存为csv&#xff0c;绘制成曲线如下图 iter, lambda 1, 0.002000 2, 0.008000 3, 0.064000 4, 1.024000 5, 32.768000 6, 2097.152000 7, 699.050667 8, 1398.101333 9, 5592.405333 10, 1864.135111 11, 1242.7567…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙:被低估的"智能安检员"二、优先尝试!90%问题无需关闭防火墙方案1:程序白名单(解决软件误拦截)方案2:开放特定端口(解决网游/开发端口不通)三、命令行极速关闭方案方法一:PowerShell(推荐Win10/11)​方法二:CMD命令…...

【记录坑点问题】IDEA运行:maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...