一、目标
- 能够使用WXML模板语法渲染页面结构
- 能够使用WXSS样式美化页面结构
- 能够使用app.json对小程序进行全局性配置
- 能够使用page.json对小程序页面进行个性化配置
- 能够知道如何发起网络数据请求
二、目录
- WXML模板语法
- WXSS模板样式
- 全局配置
- 页面配置
- 网络数据请求
- 案例-本地生活(首页)
WXML模板语法-数据绑定
1.数据绑定的基本原则
①在data中定义数据
②在WXML中使用数据
2.在data中定义页面的数据
3.Mustache语法格式
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可。语法格式为:
5.动态绑定内容
6.动态绑定属性
7.三元运算
8.算术运算
WXML模板语法-事件绑定
1.什么是事件
2.小程序中常用的事件
3.事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下表所示:
4.target和currentTarget的区别
target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。 点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。
此时,对于外层的view来说:
- e.target指向的是触发事件的源头组件,因此,e.target是内部的按钮组件
- e.currentTarget指向的是当前正在触发事件的那个组件,因此,e.currentTarget是当前的view组件
5.bindtap的语法格式
在小程序中 ,不存在HTML中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为 6.在事件处理函数中为data中的数据赋值
7.事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作: 因为小程序会把bindtap的属性值,统一当做事件名称来处理,相当于要调用一个名称为btnHandler(123)的事件处理函数
7.事件传参(data-*="{{参数}}")
可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字,示例代码如下:
最终:
- info会被解析成参数的名字
- 数值2会被解析为参数的值
在事件处理函数中,通过event.target.dataset.参数名即可获取到具体参数的值。 8.bindinput的语法格式
在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:
①通过bindinput,可以为文本框绑定输入事件: ②在页面的.js文件中定义事件处理函数:
9.实现文本框和data之间的数据同步
实现步骤:
①定义数据
②渲染结构
③美化样式
④绑定input事件处理函数 WXML模板语法-条件渲染
1.wx:if
也可以用wx:if和wx:else来添加else判断:
2.结合<block>使用wx:if
如果想要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用wx:if控制属性,示例如下: 注意:<block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。
3.hidden
在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏:
4.wx:if与hidden的对比
①运行方式不同
- wx: if以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏
②使用建议
- 频繁切换时,建议使用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样式导入
rpx
1. 什么是rpx尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位
2.rpx的实现原理
rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx吧所有设备的屏幕,在宽度上等分为750份(当前屏幕的总宽度为750px)
- 在较小的设备上,1rpx所代表的宽度较小
- 在较大的设备上,1rpx所代表的宽度较大
3.rpx与px之间的单位换算*
WXSS模板样式-样式导入
1.什么是样式导入
使用WXSS提供的@import语法,可以导入外联的样式表
2.@import的语法格式
@import后跟需要导入的外联样式表的相对路径,用;表示语法结束。
WXSS模板样式-全局样式和局部样式
1.全局样式
定义在app.wxss中的样式为全局样式,作用于每一个页面。
2.局部样式
在页面的.wxss文件中定义的格式为局部样式,只作用于当前页面。
注意:
①当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
②当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式(如果全局样式的权重大于局部样式则会覆盖局部样式)
全局配置
1.全局配置文件及常用的配置项
小程序根目录下的app.json文件式小程序的全局配置文件。常用的配置项如下:
①pages
- 记录当前小程序所有页面的存放路径
②window
- 全局设置小程序窗口的外观
③tabBar
- 设置小程序底部的tabBar效果
④style
- 是否启用新版的组件样式
全局配置-window
1.小程序窗口的组成部分
2.了解window节点常用的配置项
3.设置导航栏的标题
设置步骤:app.json->window->navigationBarTitleText
4.设置导航栏的背景色
设置步骤:app.json->window->navigationBarBackgroundColor 只能用16进制表示
5.设置导航栏的标题颜色
设置步骤:app.json->window->navigationBarTextStyle
注意:navigationBarTextStyle的可选值只有black和white
6.全局开启下拉刷新功能
概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉下滑动操作,从而重新加载页面数据的行为。
设置步骤:app.json->window->把enablePullDownRefresh的值设置为true
注意:在app.json中启用下拉刷新功能,会作用于每个小程序页面
7.设置下拉刷新时窗口的背景色
8.设置下拉刷新时loading的样式
当全局开启下拉刷新功能之后,默认窗口的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个组成部分
3.tabBar节点的配置项
4.每个tab项的配置选项
案例:配置tabBar
1.需求描述
2.实现步骤
①拷贝图标资源
②新建3个对应的tab页面
③配置tabBar选项
3.步骤1-拷贝图标资源
①把资料目录中的images文件夹,拷贝到小程序项目根目录中
②将需要用到的小程序分为3组,每组两个,其中:
- 图片名称中包含-active的是选中之后的图标
- 图片名称中不包含-active的是默认图标
3.步骤2-新建3个对应的tab页面
3.步骤3-配置tabBar选项
①打开app.json配置文件,和pages、window平级,新增tabBar节点
②tabBar节点中,新增list数组,这个数组中存放的,是每个tab项的配置对象
③在list数组中,新增每一个tab项的配置对象。对象中包含的属性如下:
- pagePath指定当前tab对应的页面路径[必填]
- text制定当前tab上按钮的文字[必填]
- iconPath指定当前tab未选中时候的图片路径[可选]
- selectediconPath指定当前tab被选中后高亮的图片路径[可选]
注意:tabBar页面在创建的时候必须在前面创建
页面配置
1.页面配置文件的作用
小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果进行配置
2.页面配置和全局配置的关系
小程序中,app.json中的window节点,可以全局配置小程序中每个页面的窗口表现
如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求
3.页面配置中常用的配置项
网络数据请求
1.小程序中网络数据请求的限制
出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:
①只能请求HTTPS类型的接口
②必须将接口的域名添加到信任列表中
2.配置request合法域名
需求描述:假设在自己的微信小程序中,希望请求http://www.escook.cn/域名下的接口
配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意事项:
①域名只支持https协议
②域名不能使用IP地址或localhost
③域名必须经过ICP备案
④服务器域名一个月内最多可申请5次修改
3.发起GET请求
调用微信小程序提供的wx.request()方法,可以发起GET数据请求,示例代码如下:
4.发起POST请求
调用微信小程序提供的wx.request()方法,可以发起POST数据请求,示例代码如下:
5.在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数,示例代码如下:
5.跳过 request合法域名校验
注意:跳过request合法域名校验的选线,仅限在开发与调试阶段使用!
6.关于跨域和Ajax的说明
跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”
总结
①能够使用WXML模板语法渲染页面结构
- wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
②能够使用WXSS样式美化页面结构
- page、window、tabBar、style
③能够使用page.json对小程序页面进行个性化配置
- 对单个页面进行个性化配置、就近原则
④能够知道如何发起网络数据请求
- wx.request()方法、onLoad()事件