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

news2024/11/23 16:52:00

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

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

在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'
    }
  }
})

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

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

相关文章

Qt Quick-QML地图引擎之v4版本(新增3D模型/抗锯齿任意多边形下载)

在上个版本Qt quick-QML地图引擎之v4版本(新增3D模型/高德/谷歌在线/离线预览/多线程离线裁剪下载/区域查询/位置搜索/路径规划)_qt 高德地图离线_诺谦的博客-CSDN博客更新了很多小功能。经过朋友们一致需求建议&#xff0c;所以V4继续优化。 B站视频&#xff1a; Qt Quick-QML…

【办公效率提升】Window10与ubuntu递归列出当前目录及其所有子目录中的文件和文件夹

在Windows操作系统中&#xff0c;没有内置的类似于Ubuntu的"tree"命令的功能。但是&#xff0c;你可以使用以下两种方法来实现相似的功能&#xff1a; 方法一&#xff1a;使用dir命令和递归 你可以使用Windows的内置命令"dir"以及递归参数"/s"来…

前后端交互二、form表单与模板引擎

零、文章目录 前后端交互二、form表单与模板引擎 1、form表单的基本使用 HTML相关知识请参考HTML入门 &#xff08;1&#xff09;表单是什么 表单在网页中主要负责数据采集功能。HTML中的<form>标签&#xff0c;就是用于采集用户输入的信息的&#xff0c;并通过<…

linux PerfCollect收集日志及perfview分析

Perfview&#xff1a;https://github.com/Microsoft/perfview/releases PerfCollect&#xff1a;https://github.com/dotnet/coreclr/blob/master/Documentation/project-docs/linux-performance-tracing.md Linux 环境中运行的 ASP.NET Core应用中收集跟踪 PerfCollect&#…

5.6.1 Ext JS之标签页的关闭和批零关闭

Tab Panel 是包含多个标签页的面板, 这是一种很常用的组件, 类似于浏览器的标签页。关于 Ext JS的Tab Panel的基本使用可以参考: [Ext JS3.9] 标签面板(TabPanel )介绍与开发, 本篇介绍如何关闭单个标签页和批量关闭标签页。 Tab 标签页的可关闭 默认状况下,标签页是无…

Bitmiracle Docotic.Pdf 9.015 Crack

Docotic.Pdf 库是正确的法语和强大的编程和界面&#xff0c;可以让用户和开发人员创建专业和高质量的 PDF 文件&#xff0c;甚至可以阅读和修改那些已经存在的。它具有干净而强大的编程接口&#xff0c;能够帮助用户创建质量非常好的 PDF 文档。在这个库的帮助下&#xff0c;用…

linux log

linux log 一:printk日志级别二:printk打印消息控制printkprintk消息等级查看与修改/etc/rsyslog.conf 一:printk日志级别 数字越小级别越高 二:printk打印消息控制 console_loglevel&#xff1a;只有当printk打印消息的log优先级高于console_loglevel时&#xff0c;才能输出…

C++编译一些常见的错误集锦

目录 1、段错误&#xff08;Segmentation Fault&#xff09; 2、强异常保证&#xff08;strong exception guarantee&#xff09; 3、有效但未定义的状态&#xff08;valid but unspecified state&#xff09; 1、段错误&#xff08;Segmentation Fault&#xff09; &#…

Material—— VAT(Houdini To UE)

目录 一&#xff0c;介绍 二&#xff0c;柔体 二&#xff0c;刚体 一&#xff0c;介绍 VAT是将动画数据存储在纹理中&#xff0c;通过GPU运算来实现动画的技术&#xff1b;VAT纹理包含每个顶点在不同帧的位置信息&#xff0c;而每个像素代表一个顶点在某个时间点的位置&…

Linux项目流程 + 用git将本地代码上传到gitee

目录 前言 一个"进度条"项目 git上传代码 首次上传代码 安装git 克隆仓库连接 将文件传入路径目录 文件上传三板斧 后续提交更新 git实用用法补充 前言 本文将介绍如何使用makefile编写项目并将其上传到git远程仓库。Makefile是一种用于自动化构建、编译…

Python爬虫:从后端分析为什么你爬虫爬取不到数据

仅仅是小编总结的三点而已&#xff0c;可能不是很全面&#xff0c;如果之后小编了解到新的知识点&#xff0c;可能还会增加的哈&#xff01; 1. 最简单的爬虫代码 也就是各位最常使用的&#xff0c;直接利用requests模块访问当前网站链接&#xff0c;利用相关解析模块从而获取…

第三届陕西省大学生网络安全技能大赛wp

文章目录 第三届陕西省大学生网络安全技能大赛wpwebezpoptestezrceunserializeEsc4pe_T0_Mong0 misc管道可是雪啊飘进双眼 第三届陕西省大学生网络安全技能大赛wp web ezpop 在源码找到base64 解码&#xff1a; /pop3ZTgMw.php&#xff0c;访问获得源码&#xff1a; <?…

通过帮助中心提高客户满意度,帮助中心的最佳实践方式

随着技术的不断发展和产品的不断更新&#xff0c;消费者对产品的需求也越来越高。在这个竞争激烈的市场中&#xff0c;企业必须建立一个完善的帮助中心&#xff0c;来提供及时、准确的技术支持和解决方案&#xff0c;以满足客户的各种需求。这样能够有效地提高客户满意度&#…

java+springboot8高校教职工教师档案管理系统

系统设计遵循界面层、业务逻辑层和数据访问层的Web开发三层架构。采用B/S结构,使得系统更加容易维护。系统的设计与实现主要实现角色有管理员和用户,管理员在后台管理用户表模块、token表模块、公告信息模块、教职工模块、工资信息模块、调动离职模块、配置文件模块、出勤信息模…

好用工具第3期:全平台免费音乐LxMusic

LxMusic 1. 概要 LxMusic 是一个跨平台的开源的音乐播放器。支持本地音乐文件播放以及各大平台的音乐搜索播放和下载所有歌曲。 LxMusic 是一个开源项目, 项目地址是: 桌面端 https://github.com/lyswhut/lx-music-desktop 移动端 https://github.com/lyswhut/lx-music-mobi…

Ficus 第二弹,突破限制器的 Markdown 编辑管理软件!

大家好&#xff0c;我们是 ggG 团队&#xff0c;我们开发的 markdown 笔记管理软件 Ficus Beta 版本正式发布了。详情可以见我们官网&#xff0c;也可以来我们仓库查看。 相对于 Alpha 版本&#xff08;可以在我们之前的博客中查看&#xff09;&#xff0c;主要有 3 点明显的提…

【网络】协议定制+序列化/反序列化

为什么要序列化&#xff1f; 如果光看定义很难理解序列化的意义&#xff0c;那么我们可以从另一个角度来推导出什么是序列化, 那么究竟序列化的目的是什么&#xff1f; 其实序列化最终的目的是为了对象可以跨平台存储&#xff0c;和进行网络传输。而我们进行跨平台存储和网络…

[第一章 web入门]常见的搜集

首先就利用御剑或者dirsearch扫描一下网站后台&#xff0c;可以得到以下三个路径返回正常 robots.txt index.php~ .index.php.swp 其实我没扫描出来&#xff0c;这些都是看的别人的wp才做出来的&#xff0c;一开始我其实意识到御剑其实就是有一个字典&#xff0c;然后按照字典的…

【蓝桥杯算法题】用java遍写税收计算

【蓝桥杯算法题】用java遍写税收计算 题目&#xff1a;劳务报酬税收计算&#xff1a;输入 m &#xff0c;输出税后收入。如果 m <800&#xff0c;不扣税&#xff0c; 如果800< m <4000&#xff0e;则 m 减去800后的金额扣除20&#xff05;所得税。如果 m >4000&…