微信小程序—— 1 基础

组件：

1. text与view的区别

   1. text中回车键有换行效果，而view中没有

2. input中type类型：

   可选值	说明	默认
   text	文本输入键盘	√
   number	数字输入键盘	-
   idcard	身份证输入键盘	-
   digit	带小数点的数字键盘	-

3. 全局样式和页面样式

   1. 页面样式需要导入：
       @import "文件名";
   2. 全局样式在app的根目录下，不需要导入
   3. 页面样式的优先级高于全局样式
   

4. wxss选择器

   选择器	示例	说明
   .class	.container	选择所有class="container"的组件
   #id	#id	选择id="#id"的组件
   element	view	选择所有view组件
   element, element	view, text	选择所有view组件和所有text组件
   ::after	view::after	在view组件内的后面插入内容
   ::before	view::before	在view组件内的前面插入内容

5. 配置文件

   1. 页面级配置

      navigationBarBackgroundColor	导航栏背景颜色，默认为“#000000”
      navigationBarTextStyle	导航栏标题颜色，仅支持black、white（默认）
      navigationBarTitleText	导航栏的标题文字内容
      backgroundColor	窗口的背景色，默认为“#ffffff”
      backgroundTextStyle	下拉loading的样式，仅支持dark（默认）、light
      onReachBottomDistance	页面上拉触底事件触发时距页面底部距离（单位为px），默认为50
      enablePullDownRefresh	是否全局开启下拉刷新，默认为false
      disableScroll	默认为false。设为true时，页面整体不能上下滚动

   2. 应用级配置

      属性	说明
      pages	页面路径列表
      window	全局的默认窗口表现
      tabBar	底部 tab 栏的表现
      networkTimeout	网络超时时间
      debug	是否开启调试模式，默认为false
      requiredBackgroundModes	需要在后台使用的能力，如“音乐播放”
      plugins	使用到的插件

      1. networkTimeout

         request	Number	wx.request()的超时时间（毫秒），默认为60000
         connectSocket	Number	wx.connectSocket()的超时时间（毫秒），默认为60000
         uploadFile	Number	wx.uploadFile()的超时时间（毫秒），默认为60000
         downloadFile	Number	wx.downloadFile()的超时时间（毫秒），默认为60000

6. 页面逻辑

   1. page（）函数参数对象属性：

      属性	类型	说明
      data	Object	页面的初始数据
      onLoad	Function	生命周期回调函数，监听页面加载
      onReady	Function	生命周期回调函数，监听页面初次渲染完成
      onShow	Function	生命周期回调函数，监听页面显示
      onHide	Function	生命周期回调函数，监听页面隐藏
      onUnload	Function	生命周期回调函数，监听页面卸载

      onPullDownRefresh	Function	页面事件处理函数，监听用户下拉动作
      onReachBottom	Function	页面事件处理函数，页面上拉触底
      onShareAppMessage	Function	页面事件处理函数，用户单击右上角的分享按钮
      onPageScroll	Function	页面事件处理函数，页面滚动会连续触发
      其他	Any	开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问。

      注意：
      使onPullDownRefresh,OnReachBottom,OnPageScroll函数生效，需加两个参数在对应的json文件中
      
      "onReachBottomDistance": 20, //距离越大，越容易触发
        "enablePullDownRefresh": true // 默认为false
      

   2. e.target和e.currentTarget的区别：

      1. e.target获取子元素的属性集合
      2. e.currentTarget获取父元素的属性集合

7. 冒泡事件：

   属性	类型
   touchstart	手指触摸动作开始
   touchmove	手指触摸后移动
   touchcancel	手指触摸动作被打断，如来电提醒，弹窗
   touchend	手指触摸动作结束
   tap	手指触摸后马上离开
   longpress	手指触摸后，超过350ms再离开。如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

   绑定冒泡事件和非冒泡事件：

   bindtap: 冒泡
   catchtap: 不冒泡
   

8. app.js的生命周期函数：App()函数

   onLaunch****()****和****onShow()****函数*触发后返回的字段：

   ppath：打开小程序的路径。

   pquery：打开小程序的query。

   pscene：打开小程序的场景值。

   pshareTicket：获取到shareTicket。

   preferrerInfo：获取来源于小程序、公众号的AppId等。

   App()****函数中还可以保存一些在所有页面中共享的数据

组件

1. swiper****组件常用属性

   可选值	说明	默认
   indicator-dots	Boolean	是否显示面板指示点，默认为false
   indicator-color	Color	指示点颜色，默认为rgba(0,0,0,.3)
   indicator-active-color	Color	当前选中的指示点颜色，默认为#000000
   autoplay	Boolean	是否自动切换，默认为false
   current	Number	当前所在滑块的index，默认为0
   current-item-id	String	当前所在滑块的item-id（不能同时指定current）
   interval	Number	自动切换时间间隔（毫秒），默认为5000
   duration	Number	滑动动画时长（毫秒），默认为500
   circular	Boolean	是否采用衔接滑动，默认为false

   vertical	Boolean	滑动方向是否为纵向，默认为false
   bindchange	EventHandle	current改变时会触发change事件

2. include主要用途：

   p将代码拆分到多个文件中，可以更方便地查找代码。

   p将代码公共部分抽取出来。通过外部文件引入。

3. scroll-view****组件的属性及说明

   可选值	说明	默认
   scroll-x	Boolean	允许横向滚动，默认为false
   scroll-y	Boolean	允许纵向滚动，默认为false
   scroll-top	Number / String	设置竖向滚动条的位置
   scroll-left	Number / String	设置横向滚动条的位置
   bindscrolltoupper	EventHandle	滚动到顶部/左边时触发的事件
   bindscrolltolower	EventHandle	滚动到底部/右边时触发的事件
   scroll-with-animation	Boolean	在设置滚动条位置时是否使用动画过渡
   scroll-into-view	String	设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）
   bindscroll	EventHandle	滚动时触发的事件

   scrollLeft：横向滚动条左侧到视图左边的距离。
   scrollTop：纵向滚动条上端到视图顶部的距离。
   scrollHeight：纵向滚动条在Y轴上最大滚动距离。
   scrollWidth：横向滚动条在X轴上最大的滚动距离。
   deltaX：横向滚动条的滚动状态。
   deltaY：纵向滚动条的滚动状态。
   

4. image****组件属性及说明

   可选值	说明	默认
   src	String	图片资源地址
   mode	String	图片裁剪、缩放的模式，默认为'scaleToFill'
   lazy-load	Boolean	图片是否懒加载，默认为false。只针对page与scroll-view下的image有效
   binderror	HandleEvent	图片发生错误时的事件
   bindload	HandleEvent	图片载入完成时的事件

   scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。适用于容器与图片宽高比相同的情况，如果不同，图片会变形。
   aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片
   aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略图
   widthFix	宽度不变，高度自动变化，保持原图宽高比不变

   image****组件9种裁剪模式

   可选值	说明
   top	不缩放图片，只显示图片的顶部区域
   bottom	不缩放图片，只显示图片的底部区域
   center	不缩放图片，只显示图片的中间区域
   left	不缩放图片，只显示图片的左边区域
   right	不缩放图片，只显示图片的右边区域

   top left	不缩放图片，只显示图片的左上边区域
   top right	不缩放图片，只显示图片的右上边区域
   bottom left	不缩放图片，只显示图片的左下边区域
   bottom right	不缩放图片，只显示图片的右下边区域

5. slider****组件属性及说明：滑块

   可选值	类型	说明
   block-size	Number	滑块的大小，取值范围为12~28，默认为28
   block-color	Color	滑块的颜色，默认为#ffffff
   show-value	Boolean	是否显示当前value，默认为false
   bindchange	EventHandle	完成一次拖动后触发的事件
   bindchanging	EventHandle	拖动过程中触发的事件

6. this作用域分析：

   1.在Page({})里面，this关键字指代Page({})整个对象

   2.因此可以通过this关键字访问或者重新设置Page({})里data的变量

   3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象

   4.虽然在wx.request({})里没法使用this获取Page({})对象，但是可以在wx.request({})外面先把this存在某个变量中，所以就有了 var that =this 这个声明。此时that指代Page({})整个对象，这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量