Суть на самом деле (гибридное) приложение Между веб-приложением и собственным родным приложением оно имеет богатые интерфейсы для вызова различных функций мобильного телефона, и в то же время оно является гибким и кроссплатформенным.

Отсканируйте код, чтобы просмотреть апплет:

1. Различия в операционной среде

Мини-программы WeChat работают на трех терминалах: iOS, Android и инструменты разработчика для отладки.

Среда выполнения сценария с тремя терминалами и среда, используемая для рендеринга неродных компонентов, различаются:

• В iOS код javascript апплета выполняется в JavaScriptCore и обрабатывается WKWebView в среде iOS8, iOS9, iOS10.
• На Android код javascript апплета анализируется X5 JCore и обрабатывается X5 на основе ядра Mobile Chrome 53/57.
• В инструменте разработки код javascript апплета запускается в nwjs и отображается с помощью Chrome Webview.Из официальной документации
  

project
├── pages
|   ├── index
|   |   ├── index.json  index 页面配置
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表

Каркас апплета WeChat состоит из двух частей: слоя View (их может быть больше одного) и слоя логики App Service (одна).Слой View используется для рендеринга структуры страницы, а слой AppService — для логическая обработка, запросы данных и вызовы интерфейса выполняются в потоке.

Уровень представления визуализируется с помощью WebView, а уровень логики запускается с помощью JCore.

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

Сосредоточьтесь на wxs:

Благодаря просмотру иСлужба приложений — это другой поток. Он используется для передачи данных. Когда некоторые данные необходимо обработать в представлении, они могут быть обработаны wxs, как определено ниже.<wxs module="tools">,Инструкции по применению

index.js

//获取应用实例
const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },
  //事件处理函数
  bindViewTap: function() {
  },
  onLoad: function() {
  }
})

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{tools.bar(motto)}}</text>
    <text class="user-motto">{{tools.foo}}</text>
  </view>
  <wxs module="tools">
  var foo = "'hello world' from comm.wxs";
  var bar = function(d) {
    return '啥子玩意'+d;
  }
  module.exports = {
    foo: foo,
    bar: bar
  };
  </wxs>
</view>

3. Стартовая загрузка апплета

Рабочий механизм

Есть две ситуации, когда апплет запускается: «холодный запуск» и «горячий запуск». Если пользователь уже открыл определенный апплет, а затем снова открывает апплет в течение определенного периода времени, нет необходимости перезапускать в это время, просто переключите апплет в фоновом состоянии на передний план, этот процесс является горячим запуск; холодный запуск относится к пользователю Когда апплет открывается в первый раз или открывается снова после того, как апплет активно уничтожается WeChat, апплет необходимо перезагрузить и запустить.

механизм обновления

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

Рабочий механизм

• Нет понятия перезапуска апплета
• Когда апплет переходит в фоновый режим, клиент будет поддерживать рабочее состояние в течение определенного периода времени, а по истечении определенного периода времени (в настоящее время 5 минут) он будет активно уничтожен WeChat.
• Когда сигнал тревоги системной памяти поступает более двух раз за короткий промежуток времени (5 с), апплет будет уничтожен.

4. Просмотр (просмотр страницы)

Слой представления написан на WXML и WXSS и отображается компонентами.

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

1. Просмотр — WXML

Компилятор wxml: wcc преобразует файл wxml в js Метод выполнения: wcc index.wxml

2. Просмотр — WXSS

• WXSS(WeiXin Style Sheets)
  
• Компилятор wxss: wcsc преобразует файл wxss в js Метод выполнения: wcsc index.wxss
  

3. Вид - Компонент

• Компоненты апплета основаны на стандарте веб-компонентов.

• Реализация веб-компонентов с помощью Polymer Framework

4. Вид — собственный компонент

• В настоящее время Native реализует следующие компоненты:
  
• Слой собственного компонента находится над слоем WebView.
  

5. Предварительная загрузка WebView

Каждый раз, когда в программу добавляется небольшое дополнение к текущей странице, встроенная дополнительная предварительная загрузка WebView

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

Шесть, сервис приложений (логический слой)

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

1. Вход апплета App(), вход страницы Page()

3. Обеспечить богатые API, такие как пользовательские данные WeChat, сканирование, оплата и другие возможности, специфичные для WeChat.

4. Каждая страница имеет независимую область действия и предоставляет возможности модульности.

5. Привязка данных, распределение событий, управление жизненным циклом, управление маршрутизацией

Рабочая среда

IOS - JSCore

Android — парсер X5 JS

DevTool — ядро ​​nwjs Chrome

1. Служба приложений — привязка

• Привязка данных использует синтаксис Mustache (двойные фигурные скобки) для переноса переменных, динамические данные берутся из данных соответствующей страницы, и данные могут быть изменены с помощью метода setData.
  
• Метод записи привязки события такой же, как и атрибут компонента, в виде ключа и значения, ключ начинается с привязки или перехвата, а затем следует тип события, например, bindtap, catchtouchstart, а значение равно строка, которую необходимо определить в соответствующей странице с тем же именем Функция.
  

2. Служба приложений — жизненный цикл

3. Служба приложений — API

API взаимодействует с Native через WeixinJSBridge.

4. Служба приложений — маршрутизатор

• navigateTo(OBJECT)
  

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

• redirectTo(OBJECT)
  

Закройте текущую страницу и перейдите на страницу в приложении.

• navigateBack(OBJECT)
  

Закрыть текущую страницу и вернуться на предыдущую страницу или многоуровневую страницу. Вы можете получить текущий стек страниц с помощью getCurrentPages()) и решить, сколько слоев нужно вернуть.

5. Опыт разработки мини-программ

1. Проблемы с маленькими программами

Апплеты по-прежнему отображаются с использованием WebView, а не собственного рендеринга.

Его необходимо разрабатывать независимо, и его нельзя запускать в среде, отличной от WeChat.

Разработчики не могут расширять новые компоненты.

Библиотека js, зависящая от среды браузера, не может быть использована, поскольку она выполняется с помощью JCore, а объект окна или документа отсутствует.

Локальные (изображения, шрифты и т. д.) нельзя использовать в WXSS.

WXSS конвертируется в js вместо css.

Каскадные селекторы не поддерживаются в WXSS.

Апплет не может открыть страницу или запустить приложение.

2. Преимущества небольших программ

Заранее создайте новый WebView, чтобы подготовиться к отрисовке новой страницы.

Уровень представления и уровень логики разделены, управляются данными и не манипулируют DOM напрямую.

Используйте Virtual DOM для локальных обновлений.

Все используют https для обеспечения безопасности при передаче.

Добавьте модуль rpx, чтобы изолировать размер устройства и облегчить разработку.

rpx（responsive pixel）:
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，
1rpx = 0.5px = 1物理像素。
设备          rpx换算px (屏幕宽度/750)  px换算rpx (750/屏幕宽度)
iPhone5      1rpx = 0.42px           1px = 2.34rpx
iPhone6      1rpx = 0.5px            1px = 2rpx
iPhone6Plus  1rpx = 0.552px          1px = 1.81rpx

7. Запуск кода

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

Среди них O — это обратный вызов вышеописанного define('app.js', callback), а значение обратного вызова передается в трех параметрах, что скрывает другие свойства.

Восемь, предложения по оптимизации (официальные предложения)

Как работает setData

Уровень представления апплета в настоящее время использует WebView в качестве носителя рендеринга, а уровень логики использует независимый JavascriptCore в качестве рабочей среды. Архитектурно и WebView, и JavascriptCore являются независимыми модулями и не имеют каналов для прямого обмена данными. В настоящее время передача данных между уровнем представления и логическим уровнем фактически обеспечивается обеими сторонами.evaluateJavascriptосуществленный. То есть данные, передаваемые пользователем, должны быть преобразованы в строку для передачи, и в то же время преобразованное содержимое данных встраивается в JS-скрипт, а затем передается в независимые среды с обеих сторон путем выполнения JS-скрипт.

а такжеevaluateJavascriptНа выполнение данных влияет множество способов, и данные, поступающие на уровень представления, не поступают в режиме реального времени.

Распространенные ошибки операции setData

1. Чаще заходите в setData

В некоторых из проанализированных нами случаев некоторые небольшие программы будут запускаться очень часто (в миллисекундах).setData, что приводит к двум последствиям:

• В Android пользователи будут чувствовать себя застрявшими при скольжении, а обратная связь по операции серьезно задерживается, потому что поток JS компилируется, выполняется и рендерится, не в состоянии вовремя передавать события пользовательских операций на логический уровень, а логический уровень не может своевременно передать обработка результатов операции на уровне логики, уровень представления;
• Отрисовка происходит с задержкой.Поскольку JS-поток WebView всегда занят, время связи между логическим уровнем и уровнем страницы увеличивается, и с момента получения сообщения с данными на уровне представления прошло несколько сотен миллисекунд.Результат рендеринга не в реальном времени;

2. Передайте много новых данных каждый раз, когда setData

Зависит отsetDataБазовая реализация , мы знаем, что наша передача данных на самом делеevaluateJavascriptПроцесс скрипта, когда объем данных слишком велик, время компиляции и выполнения скрипта будет увеличиваться, занимая поток WebView JS,

3. SetData на странице фонового состояния

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

Ресурсы изображений

• В настоящее время основными проблемами производительности ресурсов изображений являются большие изображения и изображения с длинным списком, которые могут привести к увеличению использования памяти клиентом iOS, что приведет к повторному использованию системой страницы апплета.
  
• На iOS страница апплета состоит из нескольких WKWebViews.Когда системной памяти мало, некоторые из WKWebViews будут переработаны. Из случаев, которые мы проанализировали в прошлом, использование больших изображений и изображений с длинным списком приведет к повторному использованию WKWebView.

Оптимизация размера пакета кода

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

1. Загрузка подпакета
   Подпакет апплета для оптимизации времени загрузки при первом запуске апплета
   
2. Очистите неиспользуемый код и ресурсы

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

предварительная загрузка данных

принцип

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

Эта разница в механизме апплета как раз и позволяет лучше реализовать предварительную загрузку. Обычно мы привыкли писать извлечение данных в событии onLoad. Но страница1 апплета переходит на страницу2, и есть задержка в 300 мс ~ 400 мс до загрузки страницы2. Как показано ниже:

Из-за характеристик апплета вполне возможно предварительно получить данные на странице 1, а затем использовать данные непосредственно на странице 2, так что можно избежать 300-400 мс перенаправления. Как показано ниже:

Поток представления рендеринга и AppServcie не зависят друг от друга, и js, работающий в AppServcie, не будет блокировать рендеринг представления.

Официальный пример также использует этот метод: сначала запрашивайте данные в приложении и используйте данные в index.js.

Подробнее см. в этом документе (https://mp.weixin.qq.com/s/EvzQoSwWYUmShtI_MkrFuQ)

Если есть ошибки, указывайте на них и вместе исправляйтесь.

Наконец-то столкнулся с сопутствующими проблемамиВопросы по поиску в сообществе разработчиков

Справочное содержание:

• Анализ архитектуры апплета WeChat
  
• Основной принцип реализации апплета WeChat weapp
  
• Что такое веб-компоненты
  
• Углубленная интерпретация разработки апплета WeChat
• Салон технологий Cloud + Community - разработка апплета Wegeek WeChat для гибкости
  
• Понимать техническую архитектуру мини-программ WeChat
  
• Анализ архитектуры мини-программы WeChat (часть 1)