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

微信小程序知识点(一)

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>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 视频压缩工具哪个好?无损压缩工具分享
  • C语言:基本数据类型 char, short int, int
  • java后端开发-Mybatis连接数据库步骤
  • k3s中使用GPU资源
  • CommonJS与ESModule标准
  • uni-app - - - - - 使用uview-plus详细步骤
  • 深度学习之 OpenCV 图像边缘检测算法解析及代码演示
  • 【mysql】mysql目录结构和源码和mysql基础练习
  • 008、架构_MDS
  • DNS解析:深入解析与实战应用
  • 【C语言】通讯录的实现(详解)
  • 网络技术基础
  • 基于VUE的校园二手物品交易管理系统的设计与实现 (含源码+sql+视频导入教程)
  • CTFhub通关攻略-SSRF篇【1-5关】
  • python网络爬虫(四)——实战练习
  • [译]CSS 居中(Center)方法大合集
  • Angular2开发踩坑系列-生产环境编译
  • LintCode 31. partitionArray 数组划分
  • MySQL常见的两种存储引擎:MyISAM与InnoDB的爱恨情仇
  • OSS Web直传 (文件图片)
  • Vue学习第二天
  • 从零开始学习部署
  • 翻译--Thinking in React
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • 一天一个设计模式之JS实现——适配器模式
  • 一些css基础学习笔记
  • 再谈express与koa的对比
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • ‌前端列表展示1000条大量数据时,后端通常需要进行一定的处理。‌
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #systemverilog# 之 event region 和 timeslot 仿真调度(十)高层次视角看仿真调度事件的发生
  • (2)(2.4) TerraRanger Tower/Tower EVO(360度)
  • (2024)docker-compose实战 (9)部署多项目环境(LAMP+react+vue+redis+mysql+nginx)
  • (C)一些题4
  • (二)fiber的基本认识
  • (附源码)springboot 校园学生兼职系统 毕业设计 742122
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (十一)图像的罗伯特梯度锐化
  • (杂交版)植物大战僵尸
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • .equals()到底是什么意思?
  • .gitignore文件_Git:.gitignore
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .net CHARTING图表控件下载地址
  • .NET MVC之AOP
  • .NET 服务 ServiceController
  • .NET 快速重构概要1
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .net遍历html中全部的中文,ASP.NET中遍历页面的所有button控件
  • .net与java建立WebService再互相调用
  • .NET值类型变量“活”在哪?
  • .net中我喜欢的两种验证码