小程序视图层学习笔记

1.在自定义组件中实现双向数据绑定

自定义组件代码

javascript 复制代码

// custom-component.js
Component({
  properties: {
    myValue: String
  }
})

html 复制代码

<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

页面代码

html 复制代码

<custom-component model:my-value="{{pageValue}}" />

当自定义组件中的input值变化的时候，myValue也会跟着变化，同时页面的pageValue也能变，这跟vue完全不同，vue是不允许修改property中的值的。另外有一点需要注意，属性值不能使用驼峰命名法，使用model:myValue是错的，应该是model:my-value

2.获取节点相交状态

可以用来查看某个节点是否可以被用户看到

以下示例代码可以在目标节点（用选择器 .target-class 指定）每次进入或离开页面显示区域时，触发回调函数。

javascript 复制代码

Page({
  onLoad: function(){
    this.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目标节点 id
      res.dataset // 目标节点 dataset
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect.top // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }
})

3.响应页面显示区域的变化

当手机屏幕旋转或者在pc、pad上查看小程序的时候，可能会导致小程序页面尺寸发生变化，这时候可以监听页面尺寸变化，做响应的适配

javascript 复制代码

Page({
  onResize(res) {
    res.size.windowWidth // 新的显示区域宽度
    res.size.windowHeight // 新的显示区域高度
  }
})

javascript 复制代码

Component({
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // 新的显示区域宽度
      res.size.windowHeight // 新的显示区域高度
    }
  }
})

4.动画

在小程序中可以使用css、wx.createAnimation、wx.animate等方法给元素设置动画。其中常用的是css和wx.animate

js 复制代码

this.animate(selector, keyframes, duration, callback)

使用animate案例如下：

html 复制代码

<view class="box red" id="container">我是容器</view>
<view class="box blue" id="container2">容器2</view>
<view class="btn-group">
	<button bindtap="startAni" type="primary">开始动画</button>
</view>
<view class="btn-group">
	<button bindtap="startAni2" type="primary">开始动画2</button>
</view>

javascript 复制代码

startAni(){
    // @ts-nocheck
    this.animate('#container', [
      { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
      { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
      { opacity: 0, rotate: 90, backgroundColor: '#FF0000' },
      ], 2000, function () {
        // @ts-ignore
        this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
          console.log("清除了#container上的opacity和rotate属性")
        })
    }.bind(this))
  },
  startAni2(){
    this.animate('#container2', [
      { scale: [1, 1], rotate: 0, ease: 'ease-out'  },
      { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
      { scale: [2, 2], rotate: 90 },
    ], 2000, function () {
      // @ts-ignore
      this.clearAnimation('#container2', function () {
        console.log("清除了.block上的所有动画属性")
      })
    }.bind(this))
  }

调用animate后会生成一些样式，如果要清除样式，可以使用clearAnimation方法。这样动画结束后，元素还能恢复到初始的状态。实际测试中有一点是个例外，当把元素的opacity设置为0后，即使后面清除了opacity，也没用管用，元素还是透明的。其他样式，比如rotate和scale，清除后，元素就恢复到初始样子了

js 复制代码

this.clearAnimation(selector, options, callback)

滚动驱动动画

我们发现，根据滚动位置而不断改变动画的进度是一种比较常见的场景，这类动画可以让人感觉到界面交互很连贯自然，体验更好。因此，从小程序基础库 2.9.0 开始支持一种由滚动驱动的动画机制。

接口定义如下：

js 复制代码

this.animate(selector, keyframes, duration, ScrollTimeline)

案例如下：当用户向下滑动页面的时候，用户的头像将由正方形，变成原型，并且缩回到顶部导航栏的位置。(注意头像的变化)

js 复制代码

  this.animate('.avatar', [{
    borderRadius: '0',
    borderColor: 'red',
    transform: 'scale(1) translateY(-20px)',
    offset: 0,
  }, {
    borderRadius: '25%',
    borderColor: 'blue',
    transform: 'scale(.65) translateY(-20px)',
    offset: .5,
  }, {
    borderRadius: '50%',
    borderColor: 'blue',
    transform: `scale(.3) translateY(-20px)`,
    offset: 1
  }], 2000, {
    scrollSource: '#scroller',
    timeRange: 2000,
    startScrollOffset: 0,
    endScrollOffset: 85,
  })

5. 初始渲染缓存

小程序框架 / 视图层 / 初始渲染缓存

静态初始渲染缓存

若想启用初始渲染缓存，最简单的方法是在页面的 json 文件中添加配置项 "initialRenderingCache": "static"

js 复制代码

{
  "initialRenderingCache": "static"
}

如果想要对所有页面启用，可以在 app.json 的 window 配置段中添加这个配置

json 复制代码

{
  "window": {
    "initialRenderingCache": "static"
  }
}

这种情况下，初始渲染缓存记录的是页面 data 应用在页面 WXML 上的结果，不包含任何 setData 的结果。

自定义渲染缓存时机

静态初始渲染缓存只在页面首次渲染完成后生成渲染缓存，在 onLoad 或之后的生命周期新增的页面内容无法进入缓存中。如果想要在自定义的时机生成缓存，可以配置 "initialRenderingCache": "capture"

js 复制代码

{
  "initialRenderingCache": "capture"
}

此时，初始渲染缓存不会被自动启用，还需要在页面中调用 this.setInitialRenderingCache() 才能启用

kotlin 复制代码

Page({
  data: {
    loading: true
  },
  onLoad: function() {
    this.setData({
      loading: false
    })
    this.setInitialRenderingCache() // 渲染缓存会在此时生成
  }
})

在初始渲染缓存中添加动态内容

js 复制代码

{
  "initialRenderingCache": "dynamic"
}

此时，初始渲染缓存不会被自动启用，还需要在页面中调用 this.setInitialRenderingCache(dynamicData) 才能启用。其中， dynamicData 是一组数据，与 data 一起参与页面 WXML 渲染。

js 复制代码

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: '正在加载' // 这一部分数据不会真的参与页面渲染，仅仅用于生成缓存。也并*不等价*于一次 setData 调用
    })
  }
})

html 复制代码

<view wx:if="{{loading}}">{{loadingHint}}</view>

从原理上说，在动态生成初始渲染缓存的方式下，页面会在后台使用动态数据重新渲染一次，因而开销相对较大。因而要尽量避免频繁调用 this.setInitialRenderingCache ，如果在一个页面内多次调用，仅最后一次调用生效