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
对象有区别了。