微信小程序DAY2

DAY2

一、学习目标

 1. 能够使用 WXML 模板语法渲染页面结构 
 2. 能够使用 WXSS 样式美化页面结构 
 3. 能够使用 app.json 对小程序进行全局性配置
 4. 能够使用 page.json 对小程序页面进行个性化配置 
 5. 能够知道如何发起网络数据请求

二、数据绑定

2-1、插值表达式

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