微信小程序知识点(一)

news2024/9/22 23:24:44

1.条件判断:

wx:if,wx:elif,wx:else 和Hidden的区别

wx:if等是动态实现组件的,符合条件,页面上就新增一个组件,不符合,就会在也页面上加载,而Hidden只是控制页面的组件的显示与否,就算不显示,组件也会在DOM页面的存在。

2.循环:wx:for

wx:for后面跟一个数据集合,标识循环加载某一种的类型的控件,一般后面需要指定一个wx:key的字段。

3.发起数据请求 wx:request

向服务端发起数据请求使用wx:request ,这里不能称作ajax啥的,因为ajax是针对网页的,而小程序的宿主是微信客户端,

 wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:"GET",
      success:(res)=>{
        //console.log(res.data)
        this.setData({
          gridList:res.data
        })
      }
    })

4.控件事件绑定:bindtap

如果要给控件增加点击事件,不是用onClick,而是定义bindtap="function"来定义,然后在页面对应的js文件中实现事件逻辑。

5.数据交互和渲染

在页面对应的js文件中,都会有全局的data数据集合,里面定义一些json类型的数据信息,比如data:{"name":"tom"},如果wxml文件中需要使用里面的数据,语法为{{name}}。两个花括号里面放置数据名,也可以进行三元表达式的使用。

6.页面导航跳转

1.声明式导航:

<navigator>组件,定义open-type属性,指定要跳转的页面的url地址,跳转到tabBar类型的页面时,open-type为switchTab

<navigator url="/pages/info/info" open-type="switchTab">消息</navigator>

跳转到非tabbar页面时,open-type为navigate

<navigator url="/pages/info/info" open-type="navigate">消息</navigator>
2.编程式导航:

编程式跳转指的是通过按钮或其他组件的bindtap事件代码来定义。

使用wx.switchTab和wx.navigateTo分别来操作跳转到tabBar页面和费tabBar页面:如下代码:

<button type="primary" bind:tap="gotoMessage">消息</button>
<button type="primary" bind:tap="gotoInfo">个人信息</button>
  //跳转到消息页面
  gotoMessage(e){
    wx.switchTab({
      url: '/pages/message/message',
    })
  },
  //跳转到info页面
  gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },

7.导航传参

1.声明式导航传参

参数放置在url配置中,路径与参数用?分隔、参数名与参数值用=相连,不同参数直接用&分隔,与网页的传参类似:代码示例如下:

<navigator url="/pages/info/info?name=tom&age=20" >个人信息</navigator>

在左侧底部查看参数是否传递过来:可以看到,参数已经传递过来了

2.编程式导航传参

 在wx.navigateTo(Object object)方法中设置需要传递的参数:

 //跳转到info页面
  gotoInfo(){
    wx.navigateTo({
      url: '/pages/info/info?name=jerry&age=18',
    })
  },

3.在onLoad事件接收导航参数 

通过页面后台js中的onLoad事件,从参数options里面获取外部传递过来的相关参数。

我们可以使用页面的data集合来接收他们,并且通过{{}}方式显示在页面上: 

 data: {
    query :{}
  },

 onLoad(options) {
    this.setData({query:options})
  },
<text >姓名:{{query.name}}</text>
<text >年龄:{{query.age}}</text>

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

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

相关文章

C#绘制常用工业控件(仪表盘,流动条,开关等)

目录 1&#xff0c;使用Graphics绘制Toggle。 效果&#xff1a; 测试代码&#xff1a; Toggle控件代码&#xff1a; 2&#xff0c;使用Graphics绘制Switch。 效果&#xff1a; 测试代码&#xff1a; Switch控件代码&#xff1a; 3&#xff0c;使用Graphics绘制PanelHe…

【Nest 学习笔记】AOP切片编程

切片编程 AOP 把通用逻辑抽离出来&#xff0c;通过切面的方式添加到某个地方&#xff0c;可以复用和动态增删切面逻辑。 中间件 Middleware Middleware 中间件属于全局中间件&#xff08;Middleware 是 Express 的概念&#xff09; 常用于对请求接口进行日志记录 // main.ts …

七. 部署YOLOv8检测器-load-save-tensor

目录 前言0. 简述1. 案例运行2. 补充说明3. 代码分析3.1 main.cpp3.2 create_data.py 结语下载链接参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习课程第六章—部署分类器&…

GMeLLo:结合知识图谱的 LLM 多跳问答技术,效果显著提升

1. GMeLLo 提出的背景 1.1 多跳问答 多跳问答的难度往往比较大&#xff0c;因为不仅要追溯事实&#xff0c;还要聚合与串联事实。 事实的来源可以是知识图谱、表格、自由格式文本&#xff0c;或者是这些来源的异构组合。 随着大型语言模型的发展&#xff0c;基于提示的方法…

安科瑞ACR10R网络电力仪表 CE认证 带外置互感器

产品概述&#xff1a; ‌‌安科瑞ACR10R网络电力仪表是一种集成了多种电力参数测量、电能计量、电能监测和考核管理等多种功能于一体的电力仪表。它适用于冶炼、钢铁、电焊、半导体等高能耗行业的节能改造工程&#xff0c;同时也适用于分布式光伏并网柜的功率监测、电力需求侧…

sqli-labs靶场通关攻略 56-60

主页有sqli-labs靶场通关攻略 1-55 第五六关 less-56 步骤一&#xff1a;闭合方式&#xff1a;?id1)-- 步骤二&#xff1a;查询数据库 ?id-1) union select 1,2,database() -- 步骤三&#xff1a;联合查询 查出网站的数据库表名 ?id-1) union select 1,2,group_concat(t…

探索AntSKPro AI知识库一体机:离线智能的便捷之选

在数字化时代&#xff0c;信息的获取和处理速度是企业和个人效率的关键。然而&#xff0c;网络连接的不稳定性常常成为阻碍。AntSKPro AI知识库一体机&#xff0c;一款专为离线环境设计的智能设备&#xff0c;以其卓越的性能和用户友好的设计&#xff0c;正在重新定义离线AI解决…

双指针--优选算法

个人主页&#xff1a;敲上瘾-CSDN博客 个人专栏&#xff1a;游戏、数据结构、c语言基础、c学习、OJ题 前言&#xff1a; 该篇文章我们主要来学习的是双指针算法&#xff0c;对于该类算法我们可以直接来做题&#xff0c;从题中去感知该算法的魅力&#xff0c;最后再从题中做总…

【数据结构】—— 线性表

目录 前言一、顺序表1.1 顺序表的定义及其特点1.2 顺序表的C语言实现1.2.1 定义顺序表1.2.2 初始化1.2.3 插入1.2.4 删除1.2.5 查找 二、链表2.1 链表的定义2.2 单向链表的实现2.2.1 定义单向链表2.2.2 创建链表2.2.3 插入元素2.2.4 删除元素2.2.5 查找 2.3 双向循环链表 前言 …

选刊风向标!985大学近十年发文热门IEEE期刊盘点

本期盘点同济大学近十年有关IEEE旗下发文较多的期刊&#xff0c;一起来看看哪些是双一流大学热门发文期刊&#xff1a; 1、IEEE Transactions on Cybernetics • 影响因子&#xff1a;9.4 • JCR1区&#xff0c;中科院1区-Top • 检索数据库&#xff1a;SCIE • 期刊分区&a…

stable diffusion的安装

stable diffusion的安装 一、前言二、安装python环境1、已经安装python环境&#xff0c;但非3.10.6版本&#xff08;可以不看&#xff09; 三、安装stable diffusion四、运行五、启动报错1、Torch is not able to use GPU2、Installing open_clip 卡住3、报错提示 "git&qu…

systemverilog中的DPI-C用例介绍

文章目录 前言一、dpi_longint二、dpi_packed_array三、dpi_structure四、相关参考总结 前言 本文主要基于VCS内置的三个关于DPI-C的使用用例&#xff0c;记录一下DPI-C的使用方法。测试用例的路径为$VCS_HOME/doc/examples/testbench/sv/。测试用例包括&#xff1a;dpi_longi…

自然语言处理:第四十三章 视觉RAG:变革传统深度学习模型开发流程,开创下一代多模态视觉模型的新时代

文章链接:微信公众平台 (qq.com) 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff…

Chaper 09 深入理解Promise

文章目录 前言一、异步编程二、Promise 前言 在JavaScript中&#xff0c;异步编程是一个重要的概念。随着应用程序的复杂性增加&#xff0c;处理异步操作的方式也变得更加复杂。Promise是一种用于处理异步操作的对象&#xff0c;它提供了一种更清晰和更强大的方式来管理异步代…

智能的JavaScript开发工具WebStorm v2024.2全新发布

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具&#xff0c;被广大中国JS开发者誉为"Web前端开发神器""强大的HTML5编辑器""智能的JavaSscript IDE"等。与IntelliJ IDEA同源&#xff0c;继承了IntelliJ IDEA强大的JS部分的功能。 立即获…

学生防近视台灯什么品牌好?学生护眼台灯怎么选?收下这份攻略

根据中国报告大厅的数据&#xff0c;近年来&#xff0c;随着科技的不断进步&#xff0c;台灯行业亦得到了快速发展。早期的台灯主要采用白炽灯作为光源&#xff0c;但随着LED技术的日益成熟&#xff0c;LED台灯已成为市场主流。目前&#xff0c;台灯行业正处于高速发展阶段&…

【吊打面试官系列-Redis面试题】Redis 过期键的删除策略?

大家好&#xff0c;我是锋哥。今天分享关于 【Redis 过期键的删除策略】面试题&#xff0c;希望对大家有帮助&#xff1b; Redis 过期键的删除策略&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 1、定时删除:在设置键的过期时间的同时&#xff0c;创建…

19 - 路径搜索的综合

---- 整理自狄泰软件唐佐林老师课程 文章目录 1. 需求2. 一些工具3. 编译规则的依赖4. 实验 1. 需求 工程项目中不希望源码文件夹在编译时被改动&#xff08;只读文件夹&#xff09;在编译时自动创建文件夹&#xff08;build&#xff09;用于存放编译结果编译过程中能够自动搜…

java基本程序设计结构与数据类型

1.一个简单程序的编写、编译与运行 编写如下的Main.java public class Main{public static void main(String[] args){System.out.println("Hello World");} }上面的程序有几个要注意的点&#xff1a; ①public 是访问修饰符&#xff0c;用来表示其他程序对Main类的…

【C++】vector(下)--下篇

个人主页~ vector&#xff08;上&#xff09;~ vector&#xff08;下&#xff09;–上篇~ vector 二、模拟实现3、test.cpptest1test2test3test4test5test6 三、一个难题 二、模拟实现 3、test.cpp test1 这个没啥好说的&#xff0c;就是尾插和迭代器都能正常使用 //测尾…