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

web学习笔记(七十五)

目录

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.nameconst 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 onLoad() {await this.getMoredata()},

3.小程序解决跨域问题 

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

相关文章:

  • 蓝牙模块的使用01,OOOLMF蓝牙模块HC05调试使用01AT设置从机,手机用软件对接
  • 《Unity3D高级编程之进阶主程》第一章 C#要点技术(六) 搜索算法
  • 基于SpringBoot的篮球竞赛预约平台
  • 概率论与数理统计_上_科学出版社
  • HarmonyOS ArkUi Tabs+TabContent+List实现tab吸顶功能
  • 【Git-驯化】一文学会git配置用户信息,git config用法细节
  • Selenium:原理与使用指南
  • 麒麟V10安装MinIO
  • CICD流水线-父子项目打包发布至私仓库
  • 【数据分享】国家级旅游休闲街区数据(Excel/Shp格式/免费获取)
  • 大模型思维链(Chain-of-Thought)技术原理
  • 网络爬虫(一)深度优先爬虫与广度优先爬虫
  • 查看视频时间基 time_base
  • Java操作Excel最佳实践
  • 数据结构——求两个数的最大公因子
  • 【node学习】协程
  • 4. 路由到控制器 - Laravel从零开始教程
  • 8年软件测试工程师感悟——写给还在迷茫中的朋友
  • ECMAScript入门(七)--Module语法
  • export和import的用法总结
  • magento 货币换算
  • PHP变量
  • Python socket服务器端、客户端传送信息
  • React中的“虫洞”——Context
  • spring + angular 实现导出excel
  • spring cloud gateway 源码解析(4)跨域问题处理
  • vue 个人积累(使用工具,组件)
  • 从零到一:用Phaser.js写意地开发小游戏(Chapter 3 - 加载游戏资源)
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 关于extract.autodesk.io的一些说明
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 坑!为什么View.startAnimation不起作用?
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 我的面试准备过程--容器(更新中)
  • 新手搭建网站的主要流程
  • 中文输入法与React文本输入框的问题与解决方案
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • ​520就是要宠粉,你的心头书我买单
  • # Apache SeaTunnel 究竟是什么?
  • #Z0458. 树的中心2
  • (17)Hive ——MR任务的map与reduce个数由什么决定?
  • (C语言)字符分类函数
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (附源码)springboot 校园学生兼职系统 毕业设计 742122
  • (三)uboot源码分析
  • (一)Dubbo快速入门、介绍、使用
  • (原)本想说脏话,奈何已放下
  • *2 echo、printf、mkdir命令的应用
  • .axf 转化 .bin文件 的方法
  • .net Application的目录
  • .NET HttpWebRequest、WebClient、HttpClient
  • .Net 基于.Net8开发的一个Asp.Net Core Webapi小型易用框架
  • .Net 知识杂记
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表,包含自定义IOS对话框...
  • @JoinTable会自动删除关联表的数据