С момента запуска мини-программы WeChat крупные компании последовали ее примеру, желая получить часть пула трафика WeChat. Наша компания не исключение, вся наша front-end команда последние полгода в основном занималась разработкой небольших программ. До и после были разработаны четыре или пять небольших программ. Я всегда чувствую, что есть что оставить после себя, не только зафиксировать ямы, на которые мы наступили в те годы, но и надеяться, что все больше не попадут в ямы.
Ямы, на которые мы наступали в те годы
-
Стили CSS не могут ссылаться на локальные ресурсы изображений, только на онлайн-ресурсы (
background-image), ссылки на локальные ресурсы изображений можно использовать только<image>Этикетка. -
{{}}не может выполнять методы функций,{{}}Поддерживаются только базовые простые операции и операторы расширения ES6. Обычная обработка, такая как форматирование цен, может выполняться только в коде js, а затем отображаться в шаблоне.this.setData({ price: this.formatPrice(this.data.price) }) -
в состоянии пройти
wxsмодульное решение{{}}Проблема в том, что функция не может быть выполнена. Это можно сделать для имитации работы фильтров в vue.js.<!-- wxml模板 --> <wxs src="../../modules/formatPrice.wxs" module="tools" /> <view>价格：{{tools.formatPrice(price)}}</view>// wxs模块 var formatPrice = function (price){ price = price >> 0; return Number(price / 100).toFixed(2); } module.exports = { formatPrice } -
Апплет не поддерживает обмен ссылками на Моменты.Общей практикой на данный момент является генерация картинки с кодом страничного апплета в локальный альбом. А пользователь отправляет его в круг друзей и сам пересылает. интерфейс может использовать
canvasДля достижения уменьшите нагрузку на сервер. Но будет проблема неровности изображения не понятно. Рекомендуется, чтобы изображение для предварительного просмотра и изображение, сохраненное на реальном устройстве, имели разные размеры. Картинка, сохраненная в реальной машине, реализуется по ширине 750. Оно больше, чем изображение для предварительного просмотра, поэтому изображение, сохраненное на мобильном телефоне, будет намного четче. -
Макет апплета использует единицу измерения rpx, а черновик пользовательского интерфейса рисуется в соответствии с шириной 750. Размер черновика пользовательского интерфейса можно использовать напрямую. Но на некоторых моделях
1rpxне будет отображаться. Эффекта 1px можно добиться с помощью H5. -
Для адаптации нижней присоски iphoneX можно использовать медиазапрос или через
wx.getSystemInfoПолучите модель для оценки.Ссылаться на@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } -
Страница A -> страница B, операция страницы B запускает обновление данных страницы A. Обычно есть два способа вернуться, чтобы обновить данные страницы А (наша компания использует план 2):
- Слушайте событие onShow на странице A и бездумно обновляйте данные страницы, когда запускается событие onShow.
- Межстраничная связь осуществляется через EventBus.
-
Разработка сложных компонентов, разработка трехуровневых селекторов связей для провинций и городов, а также коды адресов, используемые для получения базы адресов WeChat, не совпадают с кодами провинций и городов, используемых в бизнесе.
-
Уровень пути к странице не может превышать 10 уровней.
-
Небольшие программы загружаются в подпакеты WeChat имеет следующие ограничения на размер небольших программ.
- Размер всех подпакетов всего апплета не должен превышать 8M
- Размер одного подпакета/основного пакета не может превышать 2M
Сравнение основных платформ программы WeChat Mini
- wepy
- mpvue
- Taro
wepy
Wepy следует рассматривать как самый ранний фреймворк для разработки небольших программ, предоставляющий синтаксис и функции, подобные vue.js, и наиболее широко используемый фреймворк на данном этапе. Несколько небольших программ, которые я разработал, также используют структуру wepy. Позвольте мне сначала рассказать о том, почему я выбрал именно этот фреймворк.
- Стиль синтаксиса, подобный Vue.js, подходит для оригинального стека технологий нашей команды.
- Поддержка компонентизации (в то время официальный API WeChat не поддерживал компонентизацию)
- Поддержка загрузки внешних пакетов npm
- Поддержка записи ES6
В процессе использования wepy на ранней стадии у wepy есть свои баги. К счастью, разработчик своевременно реагирует и может покрыть большинство сценариев.
Но одна из самых больших ловушек — это то, как реализован компонент wepy.Компоненты используют статически скомпилированные компоненты, то есть компоненты компилируются в страницу на этапе компиляции, и каждый компонент является уникальным экземпляром.Несколько компонентов совместно используют одни и те же данные. И компоненты компилируются статически. В результате компонент A, на который есть ссылка на странице A и странице B, скопирует две копии кода на страницу A и страницу B. Полученное в результате разделение компонентов не привело к уменьшению размера упаковки. После того, как официальный API WeChat стал поддерживать компонентное программирование на более позднем этапе, мы постепенно реконструировали некоторые относительно основные и более крупные компоненты с помощью оригинального звукового API.
mpvue
Разработанный командой Meituan, mpvue, как и wepy, также предоставляет опыт разработки небольших программ, аналогичный vue.js. Как опоздавший, он захватил большую долю рынка wepy (ps: наша команда также недавно рассматривает возможность перехода с wepy на mpvue). Принцип этого фреймворка немного сложнее, чем у wepy.mpvue изменяет реализацию среды выполнения и компилятора Vue.js, обеспечивая опыт разработки, который ближе к vue.js.
Taro
Taro — это набор решений для разработки с несколькими терминалами с открытым исходным кодом, созданный командой Jingdong, который следует спецификации синтаксиса React. Я мало что знаю о React и Taro, поэтому не буду много объяснять. См. Блог команды разработчиков и код для получения более подробной информации.Многотерминальная унифицированная среда разработки - Taro
я смотрю апплет
Я хотел бы поговорить о моем понимании мини-программ WeChat с технической точки зрения, я думаю, что мини-программы — очень хорошее техническое решение для гибридного приложения. Нам предстоит многому научиться, и это можно применить к техническому решению нашего гибридного приложения. Понимание и изучение технических принципов небольших программ также может лучше оптимизировать наш код.
Разделение слоя рендеринга и логического слоя
Независимая среда выполнения JS дает некоторые преимущества по сравнению с веб-просмотром, который обрабатывает рендеринг страницы и выполнение JS одновременно:
- js не может динамически вставлять узлы на страницу и мешать отрисовке страницы, что решает проблемы безопасности и контроля, иначе просмотр апплета в онлайне становится бессмысленным.
- Разделение слоя рендеринга и логического слоя снижает нагрузку на webview, а выполнение js и рендеринг страницы можно выполнять параллельно, и не будет ситуации, что выполнение js застрянет в рендеринге главной страницы.
- Несколько страниц могут совместно использовать среду выполнения JS, данные легко обмениваются, и весь жизненный цикл апплета использует один и тот же контекст, что близко к работе с приложением.
Недостатком является:
- Существует гораздо больше потребления веб-просмотра и передачи данных JCore, и данные должны быть сериализованы в строковый формат для передачи.
Автономная загрузка пакета
Автономная загрузка пакетов, обычное гибридное приложение загружает страницы H5 через веб-просмотр, а внешние страницы размещаются на стороне сервера. Хотя гибкость гарантирована. Но производительность загрузки и скорость сети имеют большое значение. Белый экран долго переключает страницы. Как загрузить автономный пакет апплета. Загружайте все интерфейсные ресурсы одновременно в локальный, а затем распаковывайте. Значительно улучшенный пользовательский интерфейс. Однако, чтобы предотвратить процесс загрузки офлайн-пакетов во времени, официальные лица WeChat также строго ограничивают размер небольших программных пакетов. (В случае загрузки подпакета размер подпакета не может превышать 2М, то есть загружаемый в первый раз ресурс не может превышать 2М)
Множественная архитектура веб-просмотра
В архитектуре страницы с несколькими веб-представлениями каждый раз, когда апплет открывает новую страницу, для ее отображения будет использоваться новое веб-представление. Чтобы веб-просмотр не потреблял память. Уровень ограничения апплета не может превышать 10 слоев.
предварительно загрузить веб-просмотр
При предварительной загрузке веб-просмотра WeChat предварительно загрузит еще один wkwebview (платформа ios) и поместит его в фоновый режим, экономя время инициализации wkwebview, когда пользователь открывает апплет.