Небольшой опыт разработки апплета WeChat

Апплет WeChat

1. Проблемы со стилем

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

1.1 кнопка кнопка

Иногда нам нужно реализовать пользовательскую функцию пересылки, но повторно установить элементы кнопки стиля, на этот раз вы можете обнаружить, что независимо от того, насколько установлен стиль кнопки,Его границы не могут быть удалены. Позже я узнал, что это былопосле псевдоэлемента(Если это браузер, если есть псевдоэлементы, которые сразу видны в инструментах разработчика, апплет работать не будет, что, я думаю, все-таки немного изъедено).

решение:

.btn::after{
  border:none;
}

Кстати, стиль кнопки апплета WeChat по умолчанию указан в списке:

button {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    color: #000000;
    background-color: #F8F8F8;
}

На эти свойства еще нужно обратить внимание.

1.2 изображение

Элемент изображения апплета имеетmodeСвойства для установки режима обрезки и масштабирования изображения, а ширина компонента изображения по умолчанию составляет 300 пикселей, а высота — 225 пикселей. То есть, если вы не установите атрибут режима, а только установите значение ширины, изображение обязательно будет деформировано, потому что высота изображения теперь составляет 225 пикселей вместо адаптивной.

Предлагаются два решения:

  1. Установите свойство режима
// mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
// 我常用的模式是：
// widthFix 宽度不变，高度自动变化，保持原图宽高比不变
// 也就是说设置mode="widthFix"后只设置width属性，图片也可以自适应

// wxml
<image
    mode="widthFix"
    class="info--head"
    src="{{src}}"></image>
// wxss
.info--head {
    width: 750rpx;
}
  1. Не устанавливайте атрибут режима, установите ширину и высоту, чтобы зафиксировать ширину и высоту картинки, и она не будет слишком деформирована.Я думаю, что это в основном подходит для карусельных картинок и миниатюр страниц списка.

1.3 фиксированное позиционирование

настраиватьposition: fixed;Элемент не может существовать в элементе scroll-view, желательно в самом внешнем слое, иначе в системе ios возникнут различные проблемы.

2. Жизненный цикл

2.1 Вход на главную страницу -> вход на подстраницу -> возврат на главную страницу

Жизненный цикл: главная страница onLoad -> главная страница onShow -> главная страница onReady -> подстраница onLoad -> подстраница onShow -> подстраница onReady -> подстраница onUnload -> главная страница onShow.

Видно, что в этом процессеonСкрыть дочернюю страницуне срабатывает.

2.2 переключаться между вкладками

Предыдущая вкладка onHide -> текущая вкладка onShow.

Вы можете видеть, что в процессе 1 и 2 страница TAB не будет запускатьсяonUnloadмероприятие.

2.3 onСкрыть время триггера

Вызывается, когда страница скрывается/перекрывается фоном. Такие какnavigateToилиНижняя вкладка переключается на другие страницы,Ждать.

2.4 время триггера onUnload

页面卸载时触发。 Такие какredirectToилиnavigateBack

2.5 chooseImage

Это большая яма, с которой я столкнулся.При вызове wx.chooseImage API он фактически запускает страницуonHideа такжеonShowсобытие, вероятно, потому, что яТриггер onHide при переключении на фонНе понял достаточно глубоко? ? ? Проект, над которым я работал раньше, был связан с IM.Я сказал, почему история чата перепуталась после того, как я выбрал картинку.Это действительно занимало у меня много времени в то время.Это была действительно редька и яма.

2.6 возникли проблемы

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

Еще кое-что,Очень важный, если в веб-просмотре есть таймер, вы должны установить атрибут src веб-просмотра пустым при выходе из страницы апплета, иначе веб-просмотр, похоже, не будет уничтожен? В любом случае, мой таймер все еще там, и его можно решить, установив src пустым.

3. поддержка нпм

Официальное введение состоит всего из 4 шагов:

  1. Выполните команду в апплете, чтобы установить пакет npm:npm install;
  2. Щелкните строку меню в инструментах разработчика: Инструменты --> Сборка npm;
  3. Установите флажок «Использовать модули npm»;
  4. Пакет npm готов к использованию после завершения сборки.

После того, как сделал это снова, хорошо, хорошо.

что??? я делаю что-то не так? Всего 4 шага, могу ли я ошибиться? Позже я проверил и обнаружил, что отсутствует очень важный шаг:файл package.json.对呀，平时做项目的时候这个文件都是最不可或缺的，怎么到了微信小程序就给忘了呢，看来还是读书太少了。

Решение:

  1. использовать сначалаnpm initСоздайте новый файл package.json в корневом каталоге проекта.
  2. Тогда следуйте официальному документу и делайте, я не буду его писать.

4. Новый API

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

4.1 wx.getImageInfoПолучить информацию о картинке

Этот API используется для получения ширины, высоты, пути, ориентации, типа и другой информации об изображении.Видно, что можно получить не только ширину и высоту изображения, но иАдрес сетевого образа заменяется адресом локального образа, Конечно, сетевой образ должен быть настроен с именем домена загрузки, прежде чем он начнет действовать.

4.2 FileSystemManager.readFileЧтение содержимого локального файла

Указав кодировку, вы можете получить эффекты, аналогичные html5 FileReader, такие как чтение файлов в формате base64. Есть еще много кодировок, поддерживаемых апплетом, можете сами посмотреть официальную документацию.

4.3 FileSystemManager.getFileInfoПолучить локальный временный файл или информацию о файле локального кеша под апплетом

Этот API в основном используется для получения размера файла, который является атрибутом размера. Если вам также нужны сводки файлов, вы можете использовать приведенный ниже API.

4.4 wx.getFileInfoПолучить информацию о файле

Этот API в основном используется для получения информации о размере и дайджесте файла и в настоящее время поддерживает как md5, так и sha1.

4.5 wx.pageScrollToПрокрутите страницу до нужной позиции

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

4.6 Резюме

Фактически, все apis перечислены apis, которые мне нужно использовать при совершении обмена мгновенными сообщениями между апплетами и облаками Tencent Im. Официальные документы Tencent Cloud im находятся только на веб-стороне. Все функции должны быть инкапсулированы самими как правило, в порядке.мгновенные сообщения загрузить фотографииЭто яма, IM может отправлять только файлы в кодировке base64. Если бы я не увидел, что апплет поддерживает кодировку base64, я бы чуть не сдался.

Без учета сжатия картинок, от выбора картинок до отправки мгновенных сообщений с картинками, только на стороне апплета мне приходится вызывать 4 API, нельзя ли упростить апплет?

5. Получить информацию о пользователе getUserInfo

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

какие? ? ? Официальное заявление настолько ясно, что есть только 3 решения, каждое из которых не может обойти кнопку, что я могу сделать? В итоге мне пришлось долго разговаривать, и я поставил перед ними все чужие маленькие программки, чтобы они видели, есть ли кнопки одна за другой, и у меня наконец-то получилось.

6. Резюме

Честно говоря, как разработчик, я по-прежнему предпочитаю эту платформу веб-разработки, программа микро-канала на самом деле является ямой, если вы можете, на самом деле не хотите делать небольшую программу микро-канала ах К сожалению, нет, если о (╥﹏╥) о.

Категории