DAY2
一、学习目标
1. 能够使用 WXML 模板语法渲染页面结构
2. 能够使用 WXSS 样式美化页面结构
3. 能够使用 app.json 对小程序进行全局性配置
4. 能够使用 page.json 对小程序页面进行个性化配置
5. 能够知道如何发起网络数据请求
二、数据绑定
2-1、插值表达式![请添加图片描述](https://i-blog.csdnimg.cn/blog_migrate/53298af2c7fd477b4d2bf260f2931414.png)
2-2、Mustache语法的应用场景
- 绑定内容(就是插值表达式)
- 绑定属性
- 运算(三元运算、算术运算)
2-2-1、绑定属性
2-2-2、三元运算
三、事件绑定
类型 绑定方式 事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开,类似于 HTML 中的 click 事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发
3-1、事件对象的属性列表
3-2、target 和 currentTarget 的区别
3-3、bindtap的语法格式
3-4、在事件处理函数中为data中的数据赋值
3-5、事件传参(data-info=‘{{123}}’)
info是属性123是属性值
3-6、bindinput跟bindtap一样
3-7、条件渲染
1. wx:if
2. wx:else if
3. wx:else
4. <block></block>相当于vue中的template,是虚拟dom,可以控制多个组件的显示隐藏,起到包裹作用,不会渲染
5. hidden控制元素的显示隐藏,相当于v-show
6. flag为true就是隐藏否则显示
3-7、列表渲染
1. wx:for="{{arr}}"
2. wx:key="id"
四、wxss模板样式
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
- rpx 尺寸单位
- @import 样式导入
4-1、rpx实现原理
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,
在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
- 在较小的设备上,1rpx 所代表的宽度较小
- 在较大的设备上,1rpx 所代表的宽度较大
4-2、rpx与px之间的单位换算
1rpx=0.5px
4-3、@import样式导入
@import 'wx.css'
五、全局配置
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
1. pages
记录当前小程序所有页面的存放路径
2. window
全局设置小程序窗口的外观
3. tabBar
设置小程序底部的 tabBar 效果
4. style
是否启用新版的组件样式
5-1、tarBar的六个组成部分
六、页面配置文件
七、数据请求
1. 小程序只支持https://开头的请求地址
2. 可以在小程序开发工具跳过https限制,但是只能在开发阶段使用
3. 小程序不存在跨域问题
4. 使用request必须把药请求的域名添加到request合法域名当中
wx,request