Практика загрузки мини-программы на разделенном экране

внешний интерфейс WeChat контейнер

Практика загрузки мини-программы на разделенном экране

Когда апплет продолжает повторяться, легко столкнуться с первой проблемой рендеринга экрана. Возможные причины этой проблемы: маленький пакет слишком велик, и ресурсы должны быть загружены; сетевое окружение слишком плохое, скорость загрузки слишком низкая; слишком много узлов рендеринга, а рендеринг требует времени.

В ответ на проблему загрузки пакетов в первый раз в апплете, апплет предлагает функцию загрузки подпакетов, которая здесь подробно описываться не будет.официальная документация

Здесь я выбираю оптимизацию для рендеринга узлов.

Технические решения

В документации API WeChat есть API для оценки узлов и видимых областей.

Объект IntersectionObserver, используемый для определения того, видны ли пользователю определенные узлы и какая пропорция может быть видна пользователем.

В этот момент я подумал, можем ли мы построитьIntersectionObserverСвязь с компонентом заставляет компонент отображать свое собственное содержимое, когда он входит в видимую область, в противном случае он прячется, чтобы достичь цели динамической загрузки модуля.

// 伪代码
// 建立监听
element.observer()

// 处理进入
observer.handleEnterView(() => {
  callback() // 处理回调
  disconnect() // 销毁
})



<!-- component -->
<view class="component">
  <view class="component-header"></view>
  <view class="component-observer" wx:if="{{ observer_status}}"></view>
  <view class="component-content" wx:else>
    <!-- your content -->
  </view>
</view>

стадия развития

После того, как базовое техническое решение установлено, оно начинает переходить на уровень кода

Component({
  data: {
    observer_status: true
  },
  // 在ready写是因为组件在这个时候，才在视图层布局完成
  ready () {
    // 因为我们是把设备的整个可视区域当成了观参照区域，所以这里直接选择relativeToViewport，如果需要其他的观察区域可以调用relativeTo选择参照区域
    this.observer = this.createIntersectionObserver().relativeToViewport()
    // 我这里的做法是，只要观察的节点进入了可视区域，就显示自己本身的内容
    // 实际上这个observer的回调触发时机是观察节点进入或者离开可视区域，我这里选择的是，只要执行了就显示这个区域，并且关闭这个观察
    this.observer.observe('.observer', (res) => {
      this.setData({
        observer_status: false
      })
      this.observer.disconnect()
      this.observer = null
    })
  },
  detached () {
    // 如果未进入可视区域就离开了，也需要销毁自己的观察
    this.observer && this.observer.disconnect()
  }
})

оптимизация

Как вы думаете, это закончилось, нет.

Для небольшой страницы программы она может состоять из шаблона или компонента. Для шаблона его необходимо определить на странице, и если есть много вещей для наблюдения, его необходимо установитьobserveAll:all, но в официальной документации сказано, что одновременный выбор слишком большого количества узлов повлияет на производительность рендеринга.

Для разработки компонентов, если каждый компонент написан таким образом, будет ли он также следоватьobserverAll:allТак же влияет на производительность рендеринга.Непонятно.Если и влияет,то может только уменьшать объект наблюдения,либо делать большой контейнер для наблюдения. Но если каждый компонент будет написан так, это будет очень громоздко.

Вот в чем заключаются преимущества компонентов. При определении компонентов есть очень волшебное свойство, котороеbehaviors. Проще говоря, это фактически механизм повторного использования кода. Использовать напрямуюbehaviorsВы можете заставить компоненты автоматически получать определенные методы и свойства. Используя эту функцию, вы можете написать намного меньше кода в компоненте.

// mixin.js
module.exports = Behavior({
  data: {
    observer_status: true
  },
  ready () {
    this.observer = this.createIntersectionObserver().relativeToViewport()
    // 自己统一好observer节点的class
    this.observer.observe('.component-observer', (res) => {
      this.setData({
        observer_status: false
      })
      this.observer.disconnect()
      this.observer = null
    })
  },
  detached () {
    this.observer && this.observer.disconnect()
  }
})

// Component.js
let mixin = require('你的mixin路径')
Component({
  behaviors: [mixin]
})

<!-- Component.wxml -->
<view class="component">
  <view class="component-header"></view>
  <view class="component-observer" wx:if="{{ observer_status}}"></view>
  <view class="component-content" wx:else>
    <!-- your content -->
  </view>
</view>

Или вы можете сделать весь наблюдатель компонентом, чтобы уменьшить количество наблюдателей и связать некоторые модули.

<!-- Observer.wxml -->
<view class="observer">
  <view class="observer-element" wx:if="{{ observer_status}}"></view>
  <view class="observer-content" wx:else>
    <slot/>
  </view>
</view>

Следует отметить, что для компонента, если наблюдателю нужен узел наблюдения, и этот узел наблюдения должен быть визуальным объектом с высотой, отличной от 0, если вы хотите иметь высоту и не хотите влиять на положение страницы, вы можете использовать некоторые методы взлома

.component-observer {
  height: 1rpx;
  margin-top: -1rpx;
}

некоторые последующие обсуждения

В использованииIntersectionObserver, я пытался использоватьhiddenАтрибуты. Но на самом деле,hiidenОн тоже будет рендериться, но отображаться не будет, и это не увеличит скорость загрузки страницы.

визуализация

Вот демо, которое я только что взял, чтобы получить его, если вам это нужно, вы можете нажатьздесь
Или просмотрите фрагмент кода апплетаhttps://developers.weixin.qq.com/s/oV1RFfmY7H4W

перед использованием

после использования

Если изображение не двигается, вы можете нажать, чтобы просмотреть Видно, что улучшение вполне очевидно

следовать за

Схема ленивой загрузки изображения

изображение имеетlazy-load, но его можно использовать только на странице и в режиме прокрутки. Можно ли использовать его где-то еще?

<!-- image-compponent -->
<view class="observer-picture">
  <image src="{{ _src }}"></image>
</view>

// image-component js
Component({
  properties:{
    imageSrc: {
      type: String,
      value: '',
    },

  },
  data: {
    _src: "default_image"
  },
  ready () {
    // 伪代码
    observer('.observer-picture')
      .then(() => {
        this.setData({
          _src: this.properties.imageSrc
        })
      })
  }
})

прокрутить вниз/вверх

Для обычного просмотра, если вам нужно выполнить загрузку до конца, для этого есть вид прокрутки, но эта производительность будет относительно низкой, и она склонна к застреванию, поэтому вы также можете использовать это для достижения после инкапсуляции слой себя.

позже

Впервые публикую здесь статью, приглашаю всех к обсуждению и обмену идеями

Категории