小程序(内置组件,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.datasettarget触发事件的对象, currentTarget绑定事件的对象。(在冒泡的时候触发)
  • mark:*,在事件对象中获取event.mark。会将冒泡元素上的mask属性绑定的属性也拿取到。这个就和currentTarget, target对象有区别了。
相关推荐
山有木兮木有枝_3 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树17 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐22 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机34 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星35 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构37 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚37 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin38 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45340 分钟前
React项目(移动app)
前端
用户618482402195141 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端