С момента своего появления WEEX неизбежно использовался для конкуренции с React Native. React Native заявляет: «Учись один раз, пиши где угодно», а WEEX заявляет: «Пиши один раз, работай везде». На мой взгляд, лучше никого нет, только кто больше подходит. Ниже я расскажу о введении WEEX. (Если вы еще не знаете React Native и хотите начать, вы можете прочитать[Организация] ReactNative Quick Start Notes)

Приложение NetEase Yanxuan для разработки Weex

Ничего не говори, давай сначала почувствуем эффект Weex. Ниже приведена демонстрация, которую я сделал с помощью weex, 4*8 часов (прерывистая), которая также включает время на сбор материала, наступление на сводку ямы и т. д.

Вот исходный адрес github:GitHub.com/как будет/продолжение…Спасибо 【Star】【Fock】 за вашу поддержку

Должен сказать, что использование Weex для разработки приложений — это очень круто для нас, чисто фронтенд-персонала.Пока вы знакомы с его грамматикой, вы можете писать приложения вручную за неделю. Он чрезвычайно подходит для изоморфных потребностей разработки с низкими требованиями к взаимодействию, сжатым временем и недостаточной рабочей силой.

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

Теперь поговорим о вводных знаниях.

Write Once, Run Everywhere

Weex предлагает универсальное согласованное техническое решение.

Прежде всего, опыт веб-разработки одинаков для всех сторон. Включает дизайн синтаксиса и инженерные ссылки.
Во-вторых, дизайн компонентов и модулей Weex обсуждается разработчиками iOS, Android и Интернета и имеет определенную общность и универсальность.
Weex разрабатывает один и тот же код, который можно выполнять на разных терминалах, избегая повторяющихся затрат на разработку нескольких терминалов.

На пути изоморфизма WEEX более тщательный, чем ReactNative, он «почти» сделал это: «Вы используете vue для написания веб-приложения, а я, кстати, скомпилирую его в нативное приложение для ios и android для вас».

Что касается того, почему было построено это колесо, чиновник сделал следующее заявление.

1. Сегодня в техническом сообществе большое количество веб-разработчиков, и Weex может предоставить большему количеству веб-разработчиков возможность создавать высокопроизводительные и удобные мобильные приложения. 2. Веб-разработка сама по себе очень эффективна и гибка, что совпадает с динамической проблемой мобильных терминалов, которую Weex хочет решить. 3. Веб-стандарты и опыт разработки являются результатом совместных обсуждений и разработок многих ведущих и превосходных технологических компаний, а их собственные проекты и концепции чрезвычайно высоки. 4. Обеспечение качества, в то же время Weex также надеется воспользоваться этой возможностью, чтобы усердно работать, чтобы внести свой вклад в стандарт. 5. Сеть — это стандартизированная технология, а стандарт сам по себе — сила Основание на стандарте, соблюдение стандарта и близость к стандарту означает наличие большего количества возможностей. 6. Экосистема и сообщество Интернета сегодня очень процветают.Существует множество зрелых инструментов, библиотек, инженерных систем и лучших практик, которые можно использовать, внедрять и изучать.

На мой взгляд, WEEX на самом деле является продуктом команды Alibaba для повышения эффективности производства.В таких отделах, как Taobao, которым требуется многосторонняя унифицированная итерация и быстрая итерация, три стороны соглашаются на стандарт, который легко унифицировать.С ферментацией времени, постепенно появляется прототип этого типа строительных лесов, и после большой сенсации, вызванной открытым исходным кодом Facebook ReactNative, я не могу сидеть на месте ^_^

Что ж, поговорим об этом, разберем плюсы и минусы WEEX.

аттестат зрелости

Прежде чем приступить к работе с Weex, вам необходимо получить следующие знания, которые помогут вам быстрее освоить их. Узел:Учебник по Node.jsвид:«Официальное руководство по Vue.js»ES6:Начало работы с ECMAScript 6Затем следует введение синтаксиса разработки для iOS и Android и, конечно же, использование редакторов.

окружающая обстановка

Требования к системной среде

IOS : MacOS, 黑苹果 Android :MacOS, Linux, Windows

Среда конфигурации

Вы можете обратиться к официальной документации для установки необходимых зависимостеймы ex.apache.org/talent/expensive/color…, Вы также можете установить следующую среду напрямую

node
npm
weex-toolkit
XcodeУстановите инструменты командной строки Xcode IDE и Xcode (зависимости разработки IOS)
Android Studio

Загрузите необходимые плагины: a) JDK1.8+ b) Show Package Details c) Android SDK Build Tools d) Android Support Repository

Настройте базовую среду:а) ANDROID_HOME (если у вас возникнут проблемы во время работы, обратитесь к этой статьеКраткое описание.com/afraid/ah77396301…) б) JAVA_HOME

Hello Weex

Начало работы в официальном документе Hello World — это веб-сторона, за которой следуетИнтегрируйте Weex в существующие приложения

Тем не менее, если вы, как веб-интерфейсный разработчик, не понимаете нативную голосовую связь, их внедрение не сыграет хорошей руководящей роли, потому что веб-разработчики клиентских интерфейсов стремятся унифицировать интерфейсный мир (веб + Android + IOS). ), «зависимость от других» может быть только временной.

Поэтому имеет смысл быстро создать и запустить чистое приложение Weex.

Если вы не нашли туториал по созданию проекта в официальном туториале, вы можете прочитать эту статью«WEEX быстро создает проект Hello World»

Vue Native

Weex решил пожать руку Vue 2.0 в итеративном процессе, потому что эта версия Vue добавила дизайн Virtual-DOM и прекомпилятор, так что фреймворк можно отделить от синтаксического анализа HTML и CSS во время выполнения и полагаться только на JavaScript, поэтому , После того, как Vue сотрудничал с WEEX, он получил возможность использовать JS для предварительной компиляции пользовательского интерфейса нативного компонента.

Как и React Native, некоторые называют WEEX Vue Native.

Если вы еще не знаете Vue, вы можете сначала изучить рекомендуемые на [Подготовительном курсе].«Официальное руководство по Vue.js».

Тогда давайте поговорим о разнице между Vue в WEEX

Отличие Vue от WEEX

Хотя WEEX написан на языке vue, в конце концов, он должен работать на разных платформах.Хотя поддерживается большинство грамматик, некоторые грамматики все же отличаются.

Синтаксические различия

1. «html-тег»

В настоящее время Weex поддерживает базовые контейнеры (div), текст (текст), изображения (изображение), видео (видео) и т. д.компоненты, Обратите внимание, что это компонент, а не тег, хотя он очень похож на тег html, что касается других тегов, вы можете в основном использовать вышеуказанные компоненты для объединения.

2. В среде Weex нет DOM

Потому что Weex парсит vue и получает не dom, а нативное дерево компоновки

3. Поддержка ограниченных событий

Не все типы событий в Интернете поддерживаются, пожалуйста, обратитесь к«Универсальные события»

4. Нет спецификации, но можно вызывать собственный API

В Weex нативный API мобильных устройств можно вызывать, регистрируя и вызывая модули. Некоторые из этих модулей встроены в Weex, например буфер обмена, навигатор, хранилище и т.д."буфер обмена" "навигатор управления навигацией" "локальное хранилище"Чтобы сохранить универсальность платформы, Weex имеет ограниченное количество встроенных собственных модулей, но Weex предоставляет возможность горизонтального масштабирования и может расширять собственные модули.«Расширение iOS» а также«Расширение Android».

различия стилей

Стили в Weex анализируются собственным средством визуализации. Из соображений производительности и функциональной сложности Weex делает некоторые компромиссы для характеристик CSS. 1. Weex поддерживает только один селектор имени класса, не поддерживает реляционные селекторы и не поддерживает селекторы атрибутов. 2. Масштаб на уровне компонентов, чтобы поддерживать согласованность веб-сайта и нативного, необходимо<style scoped>написание 3. Поддерживается базовая модель коробки и раскладка flexbox.Подробнее см.Документация по общему стилю Weex. Но следует отметить, что,

не поддерживаетсяdisplay: none;
Атрибут стиля не поддерживает сокращение (улучшает эффективность синтаксического анализа)
Flex макет должен обращать внимание на веб-совместимость
CSS-анимация и 3D-стили не поддерживаются.

Разработка и отладка Weex

синтаксис vue

Например, ниже приведен упрощенный код домашней страницы демо-приложения Yanxuan.

<template>
    <div class="wrapper">
        <text class="iconfont"></text>
        <home-header></home-header>
        <scroller class="main-list" offset-accuracy="300px">
            <refresher></refresher>
            <div class="cell-button" @click="jumpWeb('https://m.you.163.com')">
                <yx-slider :imageList="YXBanners" ></yx-slider>
            </div>
            <div class="cell-button">
                <block-1 :title="block1.title" :items="block1.items"></block-1>
            </div>
        </scroller>
    </div>
</template>
<style scoped>
    .iconfont {  font-family:iconfont;  }
    .main-list{ position: fixed; top: 168px; bottom: 90px; left: 0; right: 0;  }
</style>
<script>
    var navigator = weex.requireModule('navigator');
    import util from '../../src/assets/util';
    import Header from '../components/Header.vue';
    import refresher from '../components/refresh.vue';
    import YXSlider from '../components/YXSlider.vue';
    import Block1 from '../components/Block1.vue';
    export default {
        components: {
            'home-header': Header,
            'refresher': refresher,
            'yx-slider': YXSlider,
            'block-1': Block1
        },
        data () {
            return {
                YXBanners: [
                    { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-1.jpg'},
                    { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-2.jpg'},
                    { title: '', src: 'http://doc.zwwill.com/yanxuan/imgs/banner-3.jpg'}
                ]
            }
        },
        methods: {
            jumpWeb (_url) {
                const url = this.$getConfig().bundleUrl;
                navigator.push({
                    url: util.setBundleUrl(url, 'page/web.js?weburl='+_url) ,
                    animated: "true"
                });
            }
        }
    }
</script>

Если приведенный выше код появляется отдельно от проекта, в принципе невозможно узнать, что это проект weex. Здесь вы действительно можете почувствовать опыт веб-разработки weex

только в названии

<template>
  <div>
    <text v-for="(v, i) in list" class=“text”>{{v}}</text>
    <image style="" src=“"></image>
    <video class="video" :src="src" autoplay controls @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
  </div>
</template>

Ярлыки, которые обычно используются в проектах weex:<div/>,<text/>,<image/>,<video/>(Компоненты рассчитываются отдельно), поэтому четыре тега в основном могут удовлетворить потребности большинства сценариев.Хотя этот тег используется так же, как тег в рамках веб-проекта, тег здесь больше не является тегом html, часто упоминаемым в наш передний порт. , а тег weex, который существует только в названии, является именно компонентом weex.

пройти черезweex-загрузчик, vue-загрузчик, weex-vue-рендерингКонечным результатом преобразования синтаксического анализа является фактический компонент, и этот дизайн предназначен только для достижения цели «опыта веб-разработки». Но нам, разработчикам верхнего уровня, нужно знать, в какого «призрака» мы «играем» каждый день.

Кастрированный CSS

На самом деле неуместно использовать кастрированную версию для описания поддержки css weex, но если ее измерять с точки зрения «опыта веб-разработки», то это прилагательное тоже понятно. (Я возлагаю большие надежды на weex здесь ^_^)

единица измерения

Все значения свойств css в weex указаны в единицахpx, его также можно опустить, система по умолчанию будет использоватьpxБлок.

Селектор

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

/* 支持单个类名选择器 */
.one-class {
  font-size: 36px;
}
/* 不支持关系选择器 */
.parent > .child {
  padding-top: 10px;
}
/* 不支持属性选择器，不支持 v-cloak指令 */
[v-cloak] {
  color: #FF6600;
}

Это только ограничение на определение стиля, и оно не влияет на использование имен классов стилей.К тегу можно добавить несколько имен классов стилей, например:

<template>
  <div class="one two three"><div>
</template>

коробочная модель

Weex поддерживает базовую структуру блочной модели CSS, но следует отметить, что

box-sizingЗначение свойства по умолчанию равноborder-box
margin,padding,borderАтрибуты и т. д. в настоящее время не поддерживают сокращение слияния.

FlexBox

Weex имеет высокую поддержку макета flexbox, но все еще есть некоторые свойства, которые не поддерживаются, напримерalign-items:baseline;,align-content:space-around;,align-self:wrap_reverse;Ждать.

Конкретный алгоритм поддержки и компоновки weex для flexbox можно понять из этой статьи.Механизм компоновки Weex на основе алгоритма FlexBox, и здесь повторяться не будем.

доминантный рецессивный

На стороне ios и android weex не поддерживаетdisplayАтрибуты.

Следовательно, нельзя использоватьdisplay:none;Чтобы контролировать явность и неявность элементов, поэтому в синтаксисе vuev-showУсловный рендеринг не работает.

мы можем использоватьv-ifвместо этого или используйтеopacity:0;симулировать.

Следует отметить, что нельзя использовать ios и android.opacity:0;полностью имитироватьvisibility: hidden;, потому что, когда непрозрачность будет меньше или равна 0,01, собственный элемент управления исчезнет, а пробел все еще будет, но пользователь не сможет выполнять интерактивные операции, а при нажатии будет возникать эффект прозрачности.

CSS 3

Weex поддерживает атрибуты css3.Хотя этой поддержки недостаточно, она намного мощнее, чем «непригодный для использования» RN.

Следующие атрибуты нам нужно знать о ее поддержке до разработки

Преобразование: в настоящее время поддерживаются только 2D-преобразования.
переход: версия SDK v0.16.0+ поддерживает анимацию CSS, которую можно использовать со встроенными компонентами в зависимости от ситуации.animationРеализовать анимационное взаимодействие
linear-gradient: В настоящее время поддерживаются только двухцветные градиенты.
семейство шрифтов: в настоящее время weex поддерживает только пользовательские шрифты в форматах ttf и woff.

Библиотека сторонних инструментов

Благодаря расширенной версии инструмента для упаковки webpak weexpack, поддержка сторонних фреймворков также стала естественным явлением.

Обычно используютсяvuex,vue-routerи т. д., необходимая сторонняя библиотека инструментов может быть введена в соответствии с реальной ситуацией в проекте.

управление пакетами npm

Управление пакетами npm — это метод управления пакетами, знакомый разработчикам интерфейса. Вот почему и ReactNative, и Weex выбирают этот метод управления.

Ниже приведен файл package.json этого проекта.Я не буду его здесь объяснять.Для незнакомых друзей нажмите здесь ->Введение в использование NPM

{
  "name": "yanxuan-weex",
  "version": "1.0.0",
  "description": "a weex project",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
    "dev": "weex-builder src dist -w",
    "serve": "webpack-dev-server --config webpack.dev.js -p --open"
  },
  "keywords": ["weex"],
  "author": "zwwill",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.4.2",
    "vue-router": "^2.7.0",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.3.0",
    "weex-html5": "^0.4.1",
    "weex-vue-render": "^0.11.2"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.26.1",
    "history": "^4.7.2",
    "quick-local-ip": "^1.0.7",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.4.2",
    "weex-builder": "^0.2.7",
    "weex-loader": "^0.4.5",
    "weex-router": "0.0.1"
  }
}

Адаптация размера пользовательского интерфейса

Ширина экрана по умолчанию (область просмотра) контейнера Weex составляет 750 пикселей, и все компоненты на странице будут использовать ширину экрана 750 пикселей.

Это очень похоже на логическое изображение мобильных устройств, например, физическая ширина пикселя iPhone 6 составляет 750 пикселей, а ширина логического пикселя — 750 пикселей.

Type	iPhone 3G	iPhone 4	iPhone 6	iPhone 6Plus
физический пиксель	320x480	640x960	750x1134	1080x1920
логический пиксель	320x480	320x480	375x667	414x736
соотношение пикселей	@1x	@2x	@2x	@3x

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

Type	iPhone 3G	iPhone 4	iPhone 6	iPhone 6Plus
физический пиксель	320x480	640x960	750x1134	1080x1920
Пиксели дисплея	750x1125	750x1125	750x1134	750x1333
соотношение пикселей	@0.427x	@0.85x	@1x	@1.44x

Поэтому, когда мы используем weex для адаптации пользовательского интерфейса, нет так называемой карты @2x и карты @3x.Все размеры масштабируются Weex на основе 750 в качестве базовой ширины.

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

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

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

локальная отладка

Weex имеет различные методы отладки.Если режим отладки RN освобождает отладку собственной разработки, то можно сказать, что метод отладки weex дает веб-режиму возможность отлаживать собственные приложения.

метод первый

Этот метод в основном используется для устранения ошибок и обнаружения проблем с расположением элементов управления.

# 调试单个页面
$ weex debug your_weex.vue
# 调试整个工程
$ weex debug your/path -e App.vue

После выполнения команды отладки указанный файл будет упакован в JSBundle, будет запущен сервис weex Devtool (доступный по адресу http://localhost:8088, как показано на рисунке ниже), и будет доставлен файл JSBundle. на сервис и папку weex по пути внутри (http://localhost:8088/weex/App.js, что собственно и является содержимым QR-кода в правой части рисунка ниже).

Используйте приложение Weex Playground, чтобы отсканировать левый QR-код, чтобы войти в режим отладки, см. рисунок ниже.

Еще раз отсканируйте QR-код справа и нажмите [инспектор], чтобы войти в режим отладки.

Каждый элемент управления представляет собой одну и ту же структуру данных

<view class="WXText" frame="{{0,0},{414,736}}" hidden="NO" alpha="1" opaque="YES"></view>

класс: представляет тип акустического пространства
кадр: указывает координаты и размер пространства
Скрытый: представляет явное и неявное значение, установленное видимостью в css.
альфа: непрозрачность, значение, заданное непрозрачностью в css
opaque: по умолчанию установлено значение YES, и включен переключатель оптимизации производительности системы рисования, то есть реальный цвет после наложения нескольких прозрачных блоков не вычисляется, тем самым снижается нагрузка на GPU. ясно, есть ли конкретное место для установки этого переключателя в weex.Друзья сердца могут учиться.

Способ второй

Этот метод в основном используется для разработки и отладки, попробуйте понаблюдать за результатами

$ weex your_weex.vue

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

$ sudo weex your_weex.vue

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

Эффект, показанный на приведенном выше рисунке, является эффектом страницы H5. Обычно мы используем приложение Weex Playground для сканирования кода, чтобы увидеть реальный эффект машины после написания всей отдельной страницы, или вы также можете использовать реальную машину, чтобы наблюдать за работающий эффект кода во время написания. , скорость от пересборки пакета до перерисовки каждый раз по-прежнему очень высока.

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

Принцип Weex

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

Пакет

Любой, кто знаком с RN, знает, что выпуск RN на самом деле является выпуском JSBundle, и то же самое относится и к Weex, но разница в том, что Weex заключает субподряд над проектом и публикует несколько JSBundle. Поскольку weex разрабатывается независимо на одной странице, каждая страница будет упаковывать страницу vue/we в отдельный пакет JSBundle с помощью упаковщика weex. Преимущество этого заключается в уменьшении размера одного пакета и в том, чтобы сделать его достаточно небольшим и легким. эффективность инкрементных обновлений.

# 仅打包
$ npm run build
# 打包+构建
$ weex build ios
# 打包+构建+安装执行
$ weex run ios

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

Упакованный JSBundle имеет два формата

# 由.vue文件打包出来的包格式（简写），使用vue2.0语法编写
// { "framework": "Vue"} 
/******/ (function(modules) { 
          .......
/******/ })

# 由.we文件打包出来的包格式（简写），使用weex语法编写
// { "framework": "Weex" }
/******/ (function(modules) { 
          .......
/******/ })

Различные заголовки должны указать, какой синтаксис использовать для анализа этого JSBundle.

На данный момент мы подготовили «горячий пакет обновления», и следующим шагом является отправка пакета и его выполнение.

аутсорсинг

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

【WeexSDK】 включает

[JS Framework] Среда выполнения JSBundle

[JS-Native Bridge] ПО промежуточного слоя или коммуникационный мост, также называемый [среда выполнения Weex]

[Собственный механизм рендеринга] Анализ инструкций, выданных стороной js, для рендеринга собственного макета элемента управления.

воплощать в жизнь

Клиенты WEEX для iOS и Android [jsframework] используют движок JavaScript для выполнения пакета JS, отправляя нормализованные инструкции слоям рендеринга на каждом конце, планируя рендеринг клиента и другие возможности. Ядро JavaScriptCore выбирается под iOS, а ядро V8 предоставляется UC (оба конца RN — это ядро JavaScriptCore под Android).

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

{
  tag: 'div',
  data: {
    staticStyle: { justifyContent: 'center' }
  },
  children: [{
    tag: 'text',
    data: {
      staticClass: 'txt'
    },
    context: {
      $options: {
        style: {
          freestyle: {
            textAlign: 'center',
            fontSize: 200
          }
        }
      }
    },
    children: [{
      tag: '',
      text: '文字'
    }]
  }]
}

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

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

Этот процесс происходит в [Weex Runtime] [Weex SDK].

Самая общая [Weex Runtime] инициирует инструкции по рендерингу.callNative({...})Есть RenderEngine для завершения рендеринга

В заключение

Файл weex упакован в один файл JSBundle.
Опубликуйте его на аутсорсинговом сервере, отправьте на клиент пользователя через горячее обновление и передайте в [Weex SDK] для синтаксического анализа.
[JS Framework] в SDK выполняет скрипт Bundle для создания виртуального DOM.
Виртуальный DOM анализируется и преобразуется в инструкции по выполнению через среду выполнения [Weex Runtime] на каждом конце.
[Native RenderEngine] Выполнение операции рендеринга после получения команды и рендеринг всего интерфейса.

Официальная картинка:

Расширение с картой:

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

1. Полностраничный режим

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

Первая демонстрация строгого отбора в этой статье — это использование второго полноэкранного режима с использованием Weex для разработки всего приложения, во время которого Weex имеет много недостатков в этом режиме, таких как управление StatusBar, переключение вкладок, настраиваемая анимация открытия, 3DTouch, Виджет и т.д. Другие нативные фичи не имеют готовых API, нужно расширять самим, а то и вовсе нельзя. Поэтому он не может полностью «убить» оригинал.

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

2. Режим собственного компонента

Используйте Weex как компонент iOS/Android, аналогичный ImageView. Этот тип спроса распространяется на все основные ссылки Taobao, такие как домашняя страница, основные результаты поиска, компонентизация транзакций и т. д. Основная часть нативной страницы такого типа уже очень стабильна, но высокий спрос на локальную динамику приводит к частым выпусков, и решение таких проблем также находится в центре внимания Weex.

3. Компонентный режим H5

Используйте Weex в H5, аналог WVC. Некоторые более сложные или специальные страницы H5 не могут быть полностью преобразованы в полностраничный режим Weex (или RN) в краткосрочной перспективе, например интерактивные страницы, некоторые сложные страницы каналов и т. д. Решение этой болевой точки состоит в тонкой настройке существующей страницы H5 и внедрении Native для решения таких проблем, как взрыв памяти для длинных списков, неплавная прокрутка и плохая анимация / жесты.

Кроме того, WVC будет интегрирован в Weex и станет режимом компонентов Weex H5.

Ощущения во время реализации строгого отбора App Demo

Vue-Router & Tab

Поскольку Weex не инкапсурует компоненты вкладки, автор использует множество методов для реализации функции вкладки переключения.

1. vue-router: Идея маршрутизатора проста в управлении, но каждый коммутатор — это новый экземпляр, режима вкладок нет 2. Непрозрачность, видимость: здесь следует отметить, что механизм рендеринга Weex отличается от веб-.Установка непрозрачности или видимости для мужского слоя не может одновременно скрыть позиционирование.position:fixed;дочерний элемент. 3, положение, преобразование: измените положение слоя вкладки, этот метод позиционируется какposition:fixed;по-прежнему недействителен для дочерних элементов.

image & iconfont

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

Иконочный шрифт, используемый всеми иконками в этой демонстрации.

Сайт настоятельно рекомендуется здесьwww.iconfont.cn.

На этой платформе вы можете найти практически все значок, которые вам нужны, вы можете загрузить свой значок в созданный вами проект. В то же время система также обеспечивает генерацию ресурсов TTF, WOFF и ускорение CDN и сжатие GZIP, это очень оборудовано Weex?

Однако есть и риск, то есть, если в один прекрасный день Али перестанет поддерживать и перерабатывать ресурсы платформы, ваше приложение может стать вот таким, набитым коробками или заполнившим вашу страницу H5

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

webview

UIWebView — это обычный элемент управления, который мы используем для разработки приложений, но API, упакованного Weex, для нас явно недостаточно.pagestart,pagefinish,errorИ не инкапсулирован как Rn, какonShouldStartLoadWithRequestAPI, перехватывающее запросы адресов, на мой взгляд, несколько неразумно, да и непонятен замысел создателей колеса.

представление

Производительность — это большая тема, поэтому я не буду ее здесь раскрывать, просто упомяну несколько моментов, на которые нужно обратить внимание при разработке.

Точка влияния на производительность: обновление пользовательского интерфейса > ответ на событие пользовательского интерфейса > фоновая операция
Разумная оптимизация заставок и анимации, заставок и консолей легко вызвать сбой приложения, требует внимания
Уменьшить частоту общения js натив
Оптимизируйте структуру списка, чтобы уменьшить нагрузку на перестановку и перерисовку
Откладывание низкоприоритетной и трудоемкой работы

Статус Weex

Weex решил

Мой релиз я решаю (горячее обновление)

Язык сценариев имеет собственное "горячее обновление". Weex оптимизирует стратегию горячего обновления RN, заранее привязывает WeexSDK к клиенту, а также подпакетирует и инкрементно обновляет JSBundle, что значительно повышает эффективность горячего обновления.

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

Проблемы с производительностью

Weex — это легкая, масштабируемая и высокопроизводительная рама. Интеграция также очень удобна, может быть встроена непосредственно в страницу в HTML5, также может быть встроена в собственный пользовательский интерфейс. Потому что ReactNative и то же самое будет называться Native в конце нативных элементов управления, поэтому уровень производительности выше, чем у Hybrid.

Унифицированный трехтерминальный

Хотя это смелая практика, она сыграла свою роль в объединении большого клиентского сообщества.Очевидно, что Али сделал первый шаг в этом отношении. Это в основном решает проблему растраты ресурсов, вызванную равными требованиями трех сторон.

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

Это означает, что объединение трех концов недостаточно тщательно, но в текущих условиях это предложение является оптимальным решением, но повышает эффективность разработки. Давайте подождем и посмотрим, как большой фронтенд объединит три страны в будущем.

играть в игры

Для некоторых игр с однородным визуальным взаимодействием и без особых требований к производительности Weex по-прежнему подходит.

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

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

Weex сдался «временно»

Хотя говорят, что событие объединения полезно, оно не без вреда.

Дифференциация

Для некоторых проектов с преследованием дифференцированного и идеального опыта они могут сходить только или сдаваться.

Автономные исправления ошибок

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

Персонализация

Например, кнопка пульсации Android, 3DTouch, виджет, версия iWatch и т. д., эти функции пока недоступны в настоящее время, я не знаю, добавит ли Weex их в официальные документы в будущем.

утверждение

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

Ссылаться на

[ 1 ] Официальная документация Weex - мы ex.apache.org/talent/refer-gift… [ 2 ] исследование сцены - Нативная оптимизация производительности и стабильности - https://yq.aliyun.com/articles/69005 [ 3 ] дверь ива - Подробно объясните процесс компиляции Weex JS Framework — https://yq.aliyun.com/articles/59935?spm=5176.8067842.tagmain.66.1QA1fL. [ 4 ] Али Байчуань - Подробный обзор высокопроизводительного динамического решения Weex от Alibaba — https://segmentfault.com/a/1190000005031818 [ 5 ] Пучок траура тает и скрывает половину мороза - Как Weex работает с клиентом iOS — http://www.jianshu.com/p/41cde2c62b81