微信小程序开发基础知识2(黑马)
WXML模板语法-数据绑定
1.数据绑定的原则
1.在data中定义数据
2.在WXML中使用数据
2.在data中定义页面的数据
在页面对应的.js文件中,把数据定义到data对象中即可
3.Mustache语法的格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可,语法格式为:
4.Mustache语法的应用场景
- 绑定内容
- 绑定属性
- 运算(三元运算,算术运算等)
5.动态绑定内容
6.动态绑定属性
7.三元运算
8.算术运算
WXML模板语法-事件绑定
1.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
2.小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap或bind:tap | 手指触摸后马上离开,类似于HTML中的click事件 |
input | bindinput或bind:input | 文本框的输入事件 |
change | bindchange或bind:change | 状态改变时触发 |
3.事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留的屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
4.target和currentTarget的区别
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。此时,对外层的view来说:
- e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
- e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件
5.bindtap的语法格式
在小程序中,不存在HTML中的onclick鼠标点击事件,而且通过tap事件来响应用户的触摸行为。
1.通过bindtap,可以为组件绑定tap触摸事件
2.在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收
6.在事件处理函数中为data中的数据赋值
通过调用this.setData(dataObject)方法,可以给 页面data中的数据重新赋值
7.事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数,例如,下面的代码将不能正常工作:
因为小程序会把bindtap的属性值,统一当作事件名称来处理,相当于要调用一个名称未btnHandler(123)的事件处理函数
7.事件传参
可以为组件提供data-*自定义属性传参,其中*****代表的是参数的名字,示例代码如下:
- info会被解析为参数名字
- 数值2会被解析为参数的值
在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值,示例代码如下:
8.bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
1.通过bindinput,可以为文本框绑定输入事件
2.在页面的.js文件中定义事件处理函数
9.实现文本框和data之间的数据同步
实现步骤:
1.定义数据
2.渲染结构
3.美化样式
4.绑定input事件处理函数
WXML模板语法-条件渲染
1.wx:if
在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加else判断
2.结合使用wx:if
如果要一次性控制多个组件的展示与隐藏,可以使用一个标签将多个组件包装起来,并在标签上使用wx:if控制属性。
注意:并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
3.hidden
在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏
4.wx:if与hidden的对比
1.运行方式不同:
- wx:if以动态创建和移除元素的方式,控制元素的展示和隐藏
- hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏
2.使用建议
- 频繁切换时,建议使用hidden
- 控制条件复杂时,建议使用wx:if搭配wx:elif和wx:else进行展示与隐藏的切换
WXML模板语法-列表渲染
1.wx:for
通过wx:for可以根据指定的数组,循环渲染重复的组件结构,当前循环项的索引用index表示,当前循环项用item表示
2.手动指定索引和当前项的变量名*
- 使用wx:for-index可以指定当前循环项的索引的变量名
- 使用wx:for-item可以指定当前项的变量名
3.wx:key的使用
类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的Key值,从而提高渲染的效率
WXSS模板样式
1.什么是WXSS
WXSS是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。
2.WXSS和CSS的关系
WXSS具有CSS大部分特征,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。
与CSS相比,WXSS扩展的特征有:
- rpx尺寸
- @import样式导入
WXSS模板样式-rpx
1.什么是rpx尺寸单位
rpx是微信小程序独有的,用来解决屏幕适配的尺寸单位
2.rpx的实现原理
rpx的实现原理:鉴于不同设备屏幕的大小不同,为实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)
- 在较大的设备上1rpx所代表的宽度较大
- 在较小的设备上,1rpx所代表的宽度较小
小程序在不同设备上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配
3.rpx与px之间的单位换算*
WXSS模板样式-样式导入
1.什么是样式导入
使用WXSS提供的@import语法,可以导入外联的样式表
2.@import语法格式
@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
WXSS模板样式-全局样式和局部样式
1.全局样式
定义在app.wxss中的样式为全局样式,作用于每一个页面。
2.局部样式
在页面的.wxss文件中定义的样式为局部样式,只作用于当前页面
注意:
- 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
全局配置
1.全局配置文件及常用的配置项
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下
1.pages:记录当前小程序所有页面的存放路径
2.window:全局设置小程序窗口的外观
3.tabBar:设置小程序底部的tabBar效果
4.style:是否启用新版的组件样式
全局配置-window
1.小程序窗口的组成部分
2.了解window节点常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
navigationBarBackgroundColor | HexColor | #000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持black/white |
backgroundColor | HexColor | #fff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉loading的样式,仅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
3.设置导航栏的标题
设置步骤:app.json→window→navigationBarTitleText
4.设置导航栏的背景色
设置步骤:app.json→window→navigationBarBackgroundColor
注意:颜色只能设置为16进制,即#cccccc,不能设置普通文本颜色或其他
5.设置导航栏的标题颜色
设置步骤:app.json→window→navigationBarTextStyle
注意:当前标题颜色仅支持while和black
6.全局开启下拉刷新功能
概念:下拉刷新是移动端的专有名词,指的是通过手指屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
步骤:app.json→window→enablePullDownRefresh的值设置为true
注意:在app.json中启用下拉刷新功能,会作用于每个小程序页面
7.设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:app.json→window→为backgroundColor指定16进制的颜色值#efefef。效果如下:
8.设置下拉刷新loding的样式
当全局开启下拉刷新功能之后,默认窗口的loading样式为白色,如果要更改loading样式的效果,设置步骤:app.json→window→为backgroundTextStyle指定dark值。效果如:
注意:backgroundTextStyle的可选值只有light和dark
9.设置上拉触底的距离
概念:上拉触底是移动端的专有名词(当滚动条距离底部多少距离开始加载数据),通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
步骤:app.json→window→为onReachBottomDistance设置新的数值
注意:默认距离为50px,如果没有特殊需求,建议使用默认值
全局配置-tabBar
1.什么是tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
- 底部tabBar
- 顶部tabBar
注意:
- tabBar中只能配置最少2个、最多5个tab页签
- 当渲染顶部tabBar时,不显示icon,只显示文本
2.tabBar的6个组成部分
1.backgroundColor:tabBar的背景色
2.selectedlconPath:选中时的图片路径
3.borderStyle:tabBar上边框的颜色
4.iconPath:未选中时的图片路径
5.selectedColor:tab上的文字选中时的颜色
6.color:tab上文字的默认(未选中)颜色
3.tabBar节点的配置项
4.每个tab项的配置选项
页面配置
1.页面配置文件的作用
小程序,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置
2.页面配置文件和全局配置的关系
小程序中,app.json中的window节点,可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种要求。
注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准
3.页面配置中常用的配置项
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000 | 当前页面导航栏背景颜色 |
navigationBarTextStyle | String | while | 当前页面导航栏标题颜色,仅支持black/white |
navigationBarTitleText | String | 当前页面导航栏标题文字内容 | |
backgroundColor | HexColor | #fff | 当前下拉页面窗口的背景色 |
backgroundTextStyle | String | dark | 当前页面下拉loading的样式,仅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否为当前页面开启下拉刷新的效果 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px |
网络数据请求
1.小程序中网络数据请求的限制
出于安全行方面考虑,小程序官方对数据接口的请求做出了如下两个限制:
1.只能请求HTTPS类型的接口
2.必须将接口域名添加到信任列表中
2.配置request合法域名
配置步骤:登录微信小程序管理后台→开发→开发设置→服务器域名→修改request合法域名
注意事项:
- 域名只支持https协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可以申请5次修改
3.发起GET请求
调用微信小程序提供wx.request()方法,可以发起GET数据请求,
4.发起POST请求
调用微信小程序提供wx.request()方法,可以发起POST数据请求,
5.在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数
6.跳过request合法域名校验
如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。
此时为了不耽误开发的进度,我们可以在微信开发者工具中,,临时开启“开发环境不校验请求域名、TLS版本及HTTPS证书”选项,跳过request合法域名的校验。
**注意:**跳过request合法域名校验的选项,仅限在开发与调试阶段使用
7.关于跨域和Ajax的说明
跨域问题只存在于基于浏览器的Web开发中,由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”
案例-本地生活
微信小程序开发基础知识2(黑马)相关推荐
- 微信小程序开发基础知识1(黑马)
小程序简介 1.小程序与普通网页开发的区别: 1.运行环境不同:网页运行在浏览器中,小程序运行在微信环境中: 2.API不同:由于运行环境不同,小程序无法调用DOM和BOM的API 3.开发模式不同: ...
- 微信小程序开发—— 基础知识
一.目录结构 二.配置 一个小程序应用程序会包括最基本的两种配置文件.一种是全局配置文件 app.json 和 页面自己的配置文件 page.json. 配置文件中不能出现注释 2.1 全局配置 ap ...
- 微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
- 微信小程序——开发基础
内容说明:这是微信小程序第一次实验报告 本次实验主要实现了三部分内容:开发环境的搭建,开发工具的安装以及比较数字大小的实验案例.在进行实验的过程中,掌握了以下知识内容: 微信小程序开发环境的搭建 ...
- 微信小程序开发储备知识
目录 一.Flex布局 二.移动端相关知识 (1)物理像素 (2)设备独立像素&css像素 (3)dpr比&DPI&PPI (4)移动端适配方案 一.Flex布局 (1)简介 ...
- 微信小程序开发教程:项目二微信小程序开发基础 课后习题
<微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单描述页面样式的单位rpx与px的关系. 2.简 ...
- 微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用 框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
- 微信小程序的基础知识
1.小程序的简介 1.小程序与普通网页开发的区别 1. 运行环境不同:网页运行在浏览器环境中,小程序运行在微信环境中 2.由于运行环境的不同,所以小程序中,无法调用 DOM 和 BOM 的 A ...
- 微信小程序开发基础(02模板与配置)
02 模板与配置 学习目标 能够使用 WXML 模板语法渲染页面结构 能够使用 WXSS 样式美化页面结构 能够使用 app.json 对小程序进行全局性配置 能够使用 page.json 对小程序页 ...
最新文章
- python实现按回车键继续程序_python实现按任意键继续执行程序
- 奔驰宝马路虎等齐降价 最高降幅达8.5万!
- java 自定义注解 生成json_Java使用@JsonDeserialize注解实现自定义反序列化器
- Linux运行exe程序
- win10系统64位安装与配置java环境,安装使用citespace经验
- raw文件格式 Android,手机摄影知识讲堂:关于RAW格式的那些事
- 华东师范 2018年 研究生复试上机题解合集
- Python游戏——Pong
- 计算机应用基础系统总线,2019年自学考试计算机应用基础试题(4)
- uniapp获取用户数据昵称为“微信用户”(小程序)@杨章隐
- ROS urdf rviz xacro文件中的<inertia>详解
- 将UTC、EST时区的时间转化成北京时间(python)
- 南京大学计算机学院英才计划,南京大学以“英才计划”为切入点 向前衔接高中...
- 快递单号查询物流筛选出代收单号
- 物联网板开发入门指南
- 计划模拟--实现生产计划最佳的方法
- 1T和12T单片机的区别,移动app开发
- 乐观锁和悲观锁的原理及应用场景
- webpack打包时提示Invalid configuration object错误
- Microsoft Bitlocker企业级管理部署方案
热门文章
- 51nod 1423:最大二“货”
- macos 升级到 Big Sur 虚拟机的鼠标能动但不能点击
- 徐小贱c语言试卷,纹了这条锦鲤,我遇见了现在的老公 | 纹身大赏No.12
- YiLu代理中住宅IP代理和数据中心/机房IP代理分析及对比
- 智能灯丝灯方案为复古设计注入“ 科技基因 ”
- amd为什么还用针脚_为什么AMD的CPU不采用LGA封装技术?还在继续用针脚?
- 单元格中公式结果为0如何不显示0符号?
- untiy下连接photon
- mysql wait for flush,Mysql线程大量Wating For table flush问题分析
- Xilinx AXI Crossbar相关调试记录