小程序（内置组件，wxs, 事件）

button

open-type

getUserInfo：获取用户信息。

然后绑定bindgetUserInfo事件。这种方式拿取到的并不是真实的用户信息，而是微信的默认信息。

js 复制代码

 <button
     open-type="getUserInfo"
     bindgetuserinfo="getUserInfo"
 >
 </button>
 
 getUserInfo(res) {
     // res
 }

所以现在都需要通过这种方式。

js 复制代码

    
    <button
      bindtap="getUserInfo"
    >
    </button>
 

    getUserInfo() {
     // 在元素上绑定一个不同的点击事件，然后时间内部调用下面这个方法获取。
        wx.getUserProfile({})
    }

image

src书写路径： /开头表示当前项目的根目录。

默认宽高： 320 X 240

mode属性：当图片很大，并且未设置图片宽高的情况下图片的展示形式。

js 复制代码

    // top 只显示图片上上边部分。
    // bottom 只显示图片下边部分。
    // 默认值 scaleToFill 表示将图片压缩后填充到宽高。
    // aspectFill。等比缩放，然后占满整个容器，但是图片可能显示不完整。但是图片不会变形。
    // aspectFit。 等比缩放。图片全部显示，但是容器会有空白。
    // widthFix。表示宽度占满容器，高度自动适应计算。（使用最多）
    // heightFix。表示高度占满整个容器，宽度自动适应计算。

scroll-view

需要设置scroll-view的高度。

如果设置为横向排列，那么他的高度计算还是根据纵向排列高度计算的。所以我们一定要给定一个固定高度。
他设置scroll-x,只是代表他可以横向滚动，但是不是说他是flex布局。并且设置flex布局时，需要设置enable-flex属性才会起作用。
scroll-into-view：可以使点击的元素滚动到当前位置。对应子元素的id，只能以字母开头
scroll-with-animation: 滚动的动画效果。
当scroll-wiew设置宽度时，一定要设置white-space: nowrap,来保证内容不换行。
scroll事件对象detail.deltaX > 0表示向右滚动。反之向左。

rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

所以我们在拿到以iphone6为设计稿时，直接将 设计值 * 2rpx 即可做到适配。

隐藏元素

hidden和wx:if的区别

hidden控制隐藏和显示是控制是否添加hidden属性，通过display控制。
wx:if是控制组件是否渲染的。

wx:for

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。不需要使用{{}}包裹。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。 如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

修改属性值和索引值

js 复制代码

    wx:for-index="idx" wx:for-item="itemName"

使用block

使用block有两个好处

将需要进行遍历或者判断的内容进行包裹。
将遍历和判断的属性放在block便签中，不影响普通属性的阅读，提高代码的可读性。

wxs

为什么要设计WXS语言呢？

在WXML中是不能直接调用Page/Component中定义的函数的。
但是某些情况, 我们可以希望使用函数来处理WXML中的数据(类似于Vue中的过滤器)，这个时候就使用WXS了。

WXS使用的限制和特点：

WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。因为它运行在webview线程中，jscore线程和webview是隔离的。
由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

wxs使用注意事项

只能通过commonjs语法导出变量。
不能编写es6语法。
<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

事件

默认触发的是冒泡阶段，如果想要触发捕获阶段，我们需要设置capture-bind / capture-catch来绑定事件。其中capture-bind / capture-catch有一个区别，前者不会阻止事件传递，但是后者会阻止事件传递。当当前绑定的元素触发事件后就不会再向下传递。

事件是通过bind/catch这个属性绑定在组件上的。
key以bind或catch开头, 从1.5.0版本开始, 可以在bind和catch后加上一个冒号。
同时在当前页面的Page构造器中定义对应的事件处理函数, 如果没有对应的函数, 触发事件时会报错。
触发事件时，会收到一个事件对象 event。

组件共同事件

如果一个组件绑定了tap, longpress，那么长按抬起时，将不会触发tap事件。

事件对象的基础属性

touches和changedTouches不同

touches表示当前有多少作用点在该元素上。
changedTouches表示当前作用点和上一次作用点变化的作用点信息。
在touchend中会有不同。touches为空，changedTouches有值。
多指触摸时会有不同。

传递事件参数的方式

data-*, 在事件对象中获取event.currentTarget.dataset / event.target.dataset。 target触发事件的对象, currentTarget绑定事件的对象。(在冒泡的时候触发)
mark:*,在事件对象中获取event.mark。会将冒泡元素上的mask属性绑定的属性也拿取到。这个就和currentTarget, target对象有区别了。