首页 > 其他分享 >web学习笔记(七十五)

web学习笔记(七十五)

时间:2024-07-04 19:28:24浏览次数:16  
标签:web name 自定义 笔记 七十五 修改 data event 页面

目录

1.小程序修改响应式数据

1.1修改基本数据类型的值

1.2修改复合数据类型的值

2. 发送请求

3.小程序解决跨域问题 


1.小程序修改响应式数据

1.1修改基本数据类型的值

在小程序中需要先将data中的数据拿过来并结构,才可以在this.setdata中修改数据,在页面中可以多次编写this.setdata。

// pages/event/event.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    count: 1,
    sex: true,
  },
  // 声明一个点击事件
  tapname: function (event) {
    // 小程序通过event.currentTarget.dataset来调用自定义参数

    // 需要将data中的数据拿过来并结构,才可以在this.setdata中修改数据
    const { count, sex} = this.data;
    // 小程序通过this.setdata修改数据,保证页面渲染
    this.setData({
      count: this.data.count + 1,
      sex: !sex,
    });
  },
});

1.2修改复合数据类型的值

在小程序中不能直接修改数组和对象中的某个属性值,我们得通过自定义传参的方式来实现修改属性值,首先我们需要在wxml页面中通过自定义传参将我们需要修改的哪一项的name传到方法中(在小程序中不能直接通过方法名后面加括号的方式进行事件传参,得通过data-参数名="参数值"的方式来进行传参,如果传过去的是一个字符串可以不用加双大括号,但是如果想传递过去一个变量则需要加双大括号例如: data-name='{{item.name}}')。

<view id='tapTest' data-hi='weixin' bindtap='tapname' data-name='{{item.name}}' data-id='111' wx:for="{{users}}" wx:key='name' >姓名:{{item.name}}  年龄:{{item.age}}</view>

在小程序中我们通过event.currentTarget.dataset来调用自定义参数,如何筛选出对应的属性值进行修改,修改结束后需要在this.setData对数据进行重新赋值的操作,这样才能保证页面同步渲染。

// pages/event/event.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    users: [
      { name: "小张", age: 20 },
      { name: "小刘", age: 24 },
      { name: "小赵", age: 23 },
    ],
  },
  // 声明一个点击事件
  tapname: function (event) {
    // 小程序通过event.currentTarget.dataset来调用自定义参数
    // 获取自定义参数item.name
    const curName = event.currentTarget.dataset.name;
    const curUser = users.find((u) => u.name == curName);
    console.log(curName);
    curUser.age++;
    // 小程序通过this.setdata修改数据,保证页面渲染
    this.setData({
      users,
    });
  },
});

2. 发送请求

小程序发送请求需要通过wx.request来发起网络请求,

function http(url, method = "get", data = {}, header = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      header,
      success(result) {
        resolve(result);
      },
      fail(error) {
        console.log("请求失败:", error);
        reject(error);
      },
    });
  });
}
module.exports.http = http;

然后在需要发请求的页面进行导入的操作,需要注意的是我们导出的是一个对象,所以在导入时需要将我们需要的http方法进行解构出来。

//导入方法
const { http } = require("../utils/request");

  // 封装一个发送请求的方法
  async getMoredata() {
    const result = await http("https://v5.crmeb.net/api/pink");
    console.log(result);
  },
 // 调用方法 因为我们封装方法返回的是一个Promise对象,所以在调用方法的时候也需要通过async和await来进行调用的操作。
  async onl oad() {
    await this.getMoredata()
  },

3.小程序解决跨域问题 

在小程序中解决跨域问题不需要安装插件或者编写代码只需要在详情=>本地设置中勾选不校验合法域名的设置即可。

标签:web,name,自定义,笔记,七十五,修改,data,event,页面
From: https://blog.csdn.net/shan33__/article/details/140169331

相关文章

  • net6 WebAPI大文件上传
    最近由于客户需要上传大文件,所以研究了一下文件上传的问题net6上传文件分为两种情况:buffering和streaming(缓存和流)Buffering:我们平时采用的通过IFormFile上传文件的方式就是Buffering,此方式会将文件全部缓存起来。这种方式简单,但对内存和硬盘空间造成负担。关于缓存,这里有个误......
  • web.py框架下的application.py模块 —— Python
    本文主要分析的是web.py库的application.py这个模块中的代码。总的来说,这个模块主要实现了WSGI兼容的接口,以便应用程序能够被WSGI应用服务器调用。WSGI是WebServerGatewayInterface的缩写,具体细节可以查看WSGI的WIKI页面接口的使用使用web.py自带的HTTPServer下面这个例......
  • app一键退出功能---笔记
    问题本质包含两个部分1.一键结束当前所有的activity2.一建结束当前的app进程方式一,采用Activity的启动模式SingleTask将app入口的activity设置成singleTask模式,在xml中进行配置。在activity中重写onNewIntent().优点:使用方便简单,缺点:1.规定了app入口activity采用sing......
  • 【web APIs】快速上手Day03(Dom事件进阶)
    目录WebAPIs-第3天全选文本框案例事件流事件捕获事件冒泡阻止冒泡解绑事件on事件方式解绑addEventListener方式解绑注意事项-鼠标经过事件的区别两种注册事件的区别事件委托综合案例-tab栏切换改造其他事件页面加载事件元素滚动事件页面滚动事件-获取位置页面滚动......
  • 【步进电机梯形加减速--原子哥笔记】
    简介说明:具体看正点原子电机例程文件步进电机因其无需反馈就能对位置和速度进行控制而在工业自动化设备中的应用极为广泛,如下图所示,假设该装置使用步进电机实现物体X的移动,系统要求从A点出发,到B点停止,移动的时间越短越好且系统稳定。根据步进电机的特性,最大程度加......
  • 【python学习笔记】Python装饰器
    装饰器参考:搞懂Python装饰器Python@wraps修饰器装饰器是什么有兴趣的可以参考PEP318的原文DecoratorsforFunctionsandMethods解释了语法用途以及设计出来装饰器的动机Thecurrentmethodfortransformingfunctionsandmethods(forinstance,declaringthem......
  • 06-Excel初阶操作-学习笔记
    SUMIF和SUMIFS单(多)条件求和函数函数格式参数说明SUMTIF(参数1,参数2,参数3)参数1:区域参数2:符合条件参数3:求和区域SUMIFS(参数1,参数2,参数3,参数4,……)参数1:求和区域参数2:区域参数3:符合条件参数4:区域……基础应用SUMTIF(参数1,参数2,参数3)......
  • HTML5 WebSocket技术使用详解
    HTML5WebSocketAPI提供了一种在单个连接上进行全双工通信的方式。这意味着客户端和服务器可以同时发送和接收数据,而不需要像传统的HTTP请求那样进行多次请求和响应的轮询。WebSocket允许更实时的交互,非常适合需要快速、连续数据交换的应用场景,如在线游戏、实时通讯和股票行......
  • Python之Web框架Django
    官网https://www.djangoproject.com/download/安装djangopip安装django#查看python版本,版本显示如下Python3.12.1python3-V#安装djangopython3-mpipinstallDjango==5.0.6#查看django版本python3-mdjango--version通过Django包离线安装下载Django项目并......
  • 详解Web应用安全系列(7)使用具有已知漏洞的组件
    使用具有已知漏洞的组件,这种安全漏洞普遍存在,基于组件开发的模式使得多数开发团队根本不了解其应用或API中使用的组件,更谈不上及时更新这些组件了。下面就分别以.NET和Java各分享一个案例。.NET案例:XmlSerializer反序列化漏洞案例描述在.NET框架中,XmlSerializer类是一个常......