目录
1.WXML数据模板
数据绑定
事件绑定
小程序中常用的事件
事件对象的属性列表
target和currentTarget的区别
bindtap的语法格式
在事件处理事件中为data中的数据赋值
事件传参与数据同步
事件传参
bindinput的语法绑定事件
文本框和data的数据同步
条件渲染
wx:if
结合使用wx:if
列表渲染
wx:for
wx:key
2.WXSS模板样式
wxss和css的区别
rpx的实现原理
样式导入
全局样式和局部样式
全局配置
window
tabBar
配置tabBar选项
3.网络数据请求
小程序网络数据请求限制
配置request合法域名
发起GET请求和POST请求
在页面刚加载时请求数据
跳过request合法校验
跨域和Ajax的说明
1.WXML数据模板
数据绑定
数据绑定的规则：在js文件的data中定义数据，在WXML中使用数据
Mustache语法 即用双括号将数据包裹起来 <view>{{要绑定的数据名称}}</view>
Mustache语法主要用于绑定内容、绑定属性和运算（三元运算、算术运算）
进行三元运算时一定要注意书写的格式 randomNum1:Math.random() * 10 中间的空格是不能省略的，这里表示生成的是10以内的随机数
进行算术运算也要注意格式，randomNum2:Math.random().tofixed(2) 表示生成一个带有两位小数的随机数，前面内容写在data中，进行运算时写在WXML中，直接在双括号中进行运算
事件绑定
小程序中常用的事件
tap bindtap或bind:tap 手指触摸后马上离开，类似于click点击事件
input bindinput或bind:input 文本框的输入事件
change bindchange或bind:change 状态改变时触发
事件对象的属性列表
event.type 获得event的事件类型
event.target 触发事件的组件的一些属性值集合
event.detail 额外的信息
target和currentTarget的区别
target是触发该事件的源头组件（本人），而currentTarget则是当前事件所绑定的组件（父亲）
例如：在view中放置button，点击按钮时，点击事件以冒泡的方式向外扩散，也会触发view的tap事件处理函数，对于外层组件view来说e.target是内部的按钮组件，而e.currentTarget是当前的view组件
bindtap的语法格式
在事件处理事件中为data中的数据赋值
通过调用this.setData({})方法来给数据重新赋值，数据的初赋值要写在data{}中
事件传参与数据同步
事件传参
再给事件命名时，不能直接在名字后面加上属性值，可以再添加一个data-*组件和Mustache组合来传参，其中*指的是参数的名字（起一个名字），Mustache的双花括号中放参数
在js文件中，通过event.target.dataset.参数名来获得参数，注意这里的方法与之前调用的方法是不同的，大的方法是this.setData({})，这个小的是dataset
bindinput的语法绑定事件
在js文件中通过event.detail.value来获取文本框最新的值
效果就是每输入一个值，显示框会把当前文本框的全部内容输出一次
文本框和data的数据同步
可以先给input设置一个value值（文本框的名字）放在Mustache中，在js文件中先在data中给msg初始赋值，之后在函数中使用this.setData方法，调用event.detail.value即可显示当前文本框的全部内容，包括初始赋值和在文本框中直接输入的内容，
可以在wxss中对文本框的样式进行设置
wxml
js
wxss
条件渲染
wx:if
使用wx:if="{{condition}}"来判断是否渲染该代码块，也可以用wx:elif和wx:else来判断，注意书写格式
在下面的案例中，要提前把type的值写在data中，再在wxml中写view时进行判断
结合<block>使用wx:if
使用<block>包裹，可以避免不必要的渲染，提高渲染性
为true时显示元素，为false时隐藏元素
hidden
可以在data中写一个flag，让后在view标签中使用hidden结合Mustache，将flag放进去，条件为true时隐藏，false时显示
***wx:if和hidden的对比
列表渲染
wx:for
该方法可将指定的数组循环渲染，在data中创建一个数组如：array:['苹果','橙子','西瓜']，之后再wxml中写一个view，中间的渲染写法是 索引是：{{index}} 当前项是：{{item}}
wx:key
使用wx:key，即可以根据列表中的某个值去查找对应的想要值，比如可以根据id去输出对应的name值
注意列表的写法，以及key的代码 <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
2.WXSS模板样式
wxss和css的区别
rpx的实现原理
将所有的设备屏幕，在宽度上等分为750份，即当前屏幕的总宽度是750rpx
样式导入
可以创建一个新文件夹，在其中创建一个公共的wxss文件，一些公有的属性样式可以写在里面，想用的时候在当前的wxss文件中import一下，如@import"common/common.wxss"
全局样式和局部样式
全局样式是写在app.wxss中的，局部样式写在页面中的.wxss文件中
当二者冲突时，局部样式会覆盖全局样式；当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
全局配置
window
导航栏背景颜色一般不是文本颜色，以#开头；导航栏标题颜色，黑色或者白色
enablePullDownRefresh 是布尔类型值，表示是否下拉表单，为true
backgroundColor 是下拉表单后，上面的一部分窗口的背景色
backgroundTextStyle 是下拉表单后，上面的一部窗口中会有加载的小圆点，小圆点的颜色只能是dark或者light
onReachBottomDistance 是上拉触底距离，当滚动条距离底部50px时就加载新的数据，在书写的过程中，一般默认是50，后面不需要加单位，一般不建议修改这个值
tabBar
tabBar分为底部和顶部
tabBar中最少2个、最多5个tab标签；当渲染顶部tabBar时，不显示icon图标，只显示文本
同样是在app.json中配置的tabBar，每个tab中必须包含list，而list中又必须包含pagePath和text两个属性
配置tabBar选项
必须要把tabBar的页面放在最前面，否则加载不出来
3.网络数据请求
小程序网络数据请求限制
只能请求HTTPS类型的接口，必须将接口的域名添加到信任列表中
配置request合法域名
发起GET请求和POST请求
调用微信小程序的wx.request()方法，网址、请求方式、发送数据、回调函数
在页面刚加载时请求数据
跳过request合法校验
跨域和Ajax的说明
