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

В этой статье мы рассмотрим различные способы обработки загрузки в мини-программе WeChat.

Загрузка по умолчанию

Мини-программа WeChat предоставляет счетчик загрузки по умолчанию. Если вам не нужно ничего особенного, просто сообщение пользователю: «Эй, здесь что-то загружается, пожалуйста, не уходи».

Показать счетчик перед асинхронным действием

wx.showLoading({title: "Loading..."})

Когда асинхронное действие завершено, вы можете скрыть счетчик

wx.hideLoading()

Обычный шаблон, который я использую, — это синтаксис try and catch в javascript.

wx.showLoading({title: "Loading..."});
try {
  // Some async action, like a request, note that try and catch works better with async and await syntax
} catch(error) {
  // Handle the error that occur
} finally {
// finally executes no matter if the code in try block succeed or fail, so we don't have a spinner that's spinning forever
 wx.hideLoading();
}

Официальный документ: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

Потяните вниз, чтобы обновить

Потянуть вниз для обновления — это функция, с помощью которой пользователь может обновить страницу без перезагрузки всего приложения.

Это характерно для страниц, на которых часто меняются данные, например.

  • Страница статуса заказа
  • Список рекомендаций
  • Список бронирования

Для этого выполните следующие действия:

  1. Установите enablePullDownRefresh в true либо в файле app.json, либо в файле .json отдельной страницы (app.json применяет изменение ко всему приложению)
  2. В файл js страницы добавьте onPullDownRefresh() на том же уровне, где вы обычно добавляете обратный вызов жизненного цикла.
  3. Внутри onPullDownRefresh() выполните методы для получения новых данных или чего-то еще, что вы хотите сделать.
  4. После завершения асинхронного действия не забудьте выполнить wx.stopPullDownRefresh() А то точки сверху никуда не денутся

Официальный документ:

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh

Ленивая загрузка изображения

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

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

Тег image мини-программы WeChat имеет метод bindload Это обратный вызов, который срабатывает при загрузке изображения.

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

Важное примечание: используйте непрозрачность, чтобы скрыть элемент вместо wx:if, иначе bindload не сработает.

Полный пример здесь:



GitHub — davidyu37/wx-lazy-image-component
Внесите свой вклад в разработку davidyu37/wx-lazy-image-component, создав учетную запись на GitHub.github .com



Создать скелет

Скелет не относится к вашим скелетам в шкафу. Это способ показать что-то на экране вместо пустого экрана.

WeChat Devtool предоставляет секретную кнопку для создания файла скелета. Он просматривает текущие стили страницы и создает ее скелетную версию.

  1. Нажмите на файл скелета

2. Он генерирует два файла для этой страницы

3. Включите файл скелета в или страницу wxml

<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
<block wx:if="{{!loading}}">
// Your main page's content
</block>

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

Бесконечная прокрутка

Если вы не знаете о бесконечной прокрутке, это эффект, при котором вы можете прокручивать страницу вечно. Кто-то может возразить, что именно по этой причине некоторые социальные сети вызывают такое привыкание.

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

Для этого вам также понадобится поддержка серверной части.

Стандартом для большинства серверных API разбиения на страницы обычно является добавление параметров page и limit к запросу.

limit — это значение, указывающее, сколько записей должно возвращаться API.

page — это значение, указывающее, из какого инкремента он должен загружаться.

Во внешнем интерфейсе вы можете использовать onReachBottom() для запуска запроса к API.

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

Вы обновите локальное значение page для следующего запроса.

Page({
 data: {
  page: 1,
  dataToDisplay: []
 },
 onReachBottom() {
   this.loadData();
 },
 async loadData() {
   const { page } = this.data;
   // Make request with page value
   // Concatenate result with the current dataToDisplay
   // Update page with +1 increment
 }
})

Официальный документ:

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onreachbottom

Другие источники:

Если вы просто хотите попрактиковаться с каким-нибудь бесплатным API, вот их список:



GitHub — public-apis/public-apis: общий список бесплатных API
общий список бесплатных API. Внесите свой вклад в разработку public-apis/public-apis, создав учетную запись на GitHub.github.com



В противном случае, если вы хотите инвестировать в себя, чтобы узнать больше о мини-программе WeChat или управлении проектами, посетите www.shanghaicoders.com.