微信小程序 day1

1. wxml常用标签

标签	作用	属性
view	实现页面布局	块元素，相当于div
block	包裹页面元素	只是包裹，不会再页面渲染，类似于template
scoll-view	页面内元素内部滚动	scroll-x：横向滚动； scroll-y：纵向滚动
swiper	轮播图，标签内套swiper-item	indicator-dots：面板指示点是否显示； indicator-color：指示点颜色； indicator-active-color：激活指示点颜色； autoplay：自动切换； interval：自动切换间隔时长； circular：是否衔接滑动
text	文本组件，相当于span	selectable：长按选中
rich-text	富文本组件	nodes:可以将字符串渲染为UI结构
button	按钮标签	type：primary提交成功、default默认灰色、warn警告色； size：default为块级按钮、mini为小按钮； plain：Booleans、按钮是否镂空，背景色透明； disable：Booleans、是否禁用； loading：Booleans、按钮前是否加加载样式
image	图片组件、默认w:300,h:500	modescaleToFill：不保持纵横比，完全拉伸； aspectFit：保持纵横比，长边完全显示； aspectFill：保持纵横比，短边完全显示； widthFix：缩放模式，高度自动变化，比例不变； heightFix：缩放模式，宽度自动变化，比例不变

2. API三大分类

2.1 事件监听

以on开头，用来监听某些事的触发

举例：wx.inwindowEesize(function callock)  ---   监听窗口尺寸变化事件

2.2 同步API

以sync结尾的API都是同步API

同步API的执行结果，可用过函数返回值直接获取，如果执行出错会抛出异常

举例：wx.seStorageSync('key','value')向本地存储写内容

2.3 异步API

类似于jQuery中的$ajex(option)，需要通过success、fail、complete接收调用的结果

举例：wx.request() 发起网络数据请求，通过success回调函数接收数据

3. 常用事件

3.1tap

bindtap/bind:tap ：  手指触碰事件，类似于click事件

修改data的数据

通过this.setData()方法修改data数据，通过this.data访问数据

传参

通过 data-数据名 = ‘值’ ，通过e.target.dataset.数据名获取

3.2input

bindinput/bind:input：  文本输入事件

修改data的数据

通过this.setData()方法修改data数据，通过this.data访问数据

传参

通过 data-数据名 = ‘值’ ，通过e.target.dataset.数据名获取

3.3wx:if

通过创建、移除、控制显示与隐藏，当条件为true时显示元素

3.4hidden

通过切换样式显示隐藏，类似于display，当条件为false时显示元素

3.5wx:for

循环渲染

方法

wx:for-index：指定当前循环页的索引变量名

wx:for-item：指定当前项的变量名

wx:key：提高渲染效率