微信小程序知识点(一)

ops/2024/12/23 6:51:39/

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.ppmy.cn/ops/105083.html

相关文章

停止在 AWS 中使用 SSH!原因如下!DevSecOps 视角

我们要解决什么问题&#xff1f;欢迎来到雲闪世界。 我见过多少次安全组从 10.0.0.0/8 或更糟的 0.0.0.0/0 开放端口 22&#xff1f;太多次了&#xff01;但为什么&#xff0c;为什么在有更好的替代方案的情况下&#xff0c;我们在 2024 年仍在使用 SSH&#xff1f;作为一名安全…

2024/9/3黑马头条跟学笔记(一)

D1 视频链接 Day1-05-nacos环境搭建_哔哩哔哩_bilibili 内容介绍 搭建微服务开发环境&#xff0c;登录接口包含注册中心和nacos配置中心 服务端用户…微服务。网关负载均衡转发接口请求 实现微服务间互相通信 接口测试 前后端联调 前置知识 背景介绍 类似今日头条&#x…

对比 PDAF、CDAF 和 LAAF 自动对焦技术

深入解析相位检测自动对焦&#xff08;PDAF&#xff09; 相位检测自动对焦&#xff08;PDAF&#xff0c;Phase Detection Auto Focus&#xff09;是一种高效的自动对焦技术&#xff0c;广泛应用于现代数码相机、无反相机和智能手机摄像头中。为了更好地理解 PDAF&#xff0c;我…

设计模式学习-命令模式

概念 命令&#xff0c;接收者&#xff0c;执行者&#xff0c;一个命令模式由这些基本的组件组成。 接收者 会有一个函数 命令有一个持有接收者并且 有一个 执行函数 执行者 持有一个命令 并且 会执行这个命令 using UnityEngine; using System.Collections; namespace CommondS…

PHP一键创建全球参与探索现代在线投票系统

一键创建全球参与探索现代在线投票系统 &#x1f310;✨ &#x1f680; 开篇&#xff1a;解锁全球互动新纪元 在这个数字化飞速发展的时代&#xff0c;每一个声音都值得被听见&#xff0c;每一份意见都能跨越山海相连。想象一下&#xff0c;只需轻轻一点&#xff0c;就能发起…

sqlite3的db.interrupt方法深入解析

在Node.js环境中&#xff0c;sqlite3库是一个广受欢迎的轻量级数据库库&#xff0c;它为开发者提供了一个简洁的API来与SQLite数据库进行交互。在处理长时间运行或复杂的数据库查询时&#xff0c;有时可能需要中断这些查询。sqlite3库提供了db.interrupt方法来实现这一功能。本…

集合及映射

1、集合类图 1&#xff09;ArrayList与LinkedList 区别 LinkedList 实现了双向队列的接口&#xff0c;对于数据的插入速度较快&#xff0c;只需要修改前后的指向即可&#xff1b;ArrayList对于特定位置插入数据&#xff0c;需要移动特定位置后面的数据&#xff0c;有额外开销 …

HTML静态网页成品作业(HTML+CSS)——动漫樱桃小丸子网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…