WEEX-EROS | Руководство по началу работы

Android iOS Vue.js Weex

Вместо кучи принципов лучше сразу ввестиerosЧто я могу сделать?

eros основан на weex, он позволяет учащимся писать собственные приложения для iOS/Android с помощью синтаксиса vue и API..

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

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

опыт

Встроенная ДЕМО на iOS ios версия скачать скачать андроид версию
eros-demo
ios下载
android 下载

Разработчики могут отсканировать QR-код, чтобы загрузить приложение eros для получения опыта. Чтобы открыть приложение в первый раз на iOS, вам нужноНастройки -> Общие -> Управление устройствами Доверяйте сертификату разработки.

эрос статус

В настоящее время у eros разрабатываются десятки приложений и онлайн, в том числе разрабатываются зарубежные приложения.starLife (100+ страниц), есть и отечественные разработкиСбор пчел (60+ страниц),а такжеЗапущенные приложения имеют размер от 0 до 50+ страниц., Индустрия распределена в области информации, медицины, инвестиций, магазинов, правительства, офиса и так далее.

Сама техническая команда Benmu Medical (Jingyitong) также разработала три онлайн-приложения на основе weex, которые можно загрузить из Apple Store и App Store:

  • Health Capital (версия приложения Jingyitong, более 100 страниц, многие функции еще не открыты)
  • Медицинский помощник Бенму (30+ страниц)
  • Помощник врача Бенму (более 20 страниц)

Так что разработчики могут быть уверены, что это не проект KPI (у компании нет KPI), а исходный код открыт на основе протокола MIT.

как появился эрос

Начать нужно с weex, давайте посмотрим непосредственно на схему:

weex原理

Схема weex разделена на две части: сервер и клиент.

Server

weex file:Это наш файл .vue (или официальный файл .we), такой же, каким мы обычно занимаемся фронтенд-разработкой.

transformer:Взяв за пример разработку vue, в браузере мы обычно пишем.vueдокументы иes6Для синтаксиса, который в настоящее время не поддерживается браузерами, используйте внешний инструмент упаковки ресурсов.webpackпереждатьvue-loader,babel-loaderокончательно превратился вes5Код распознается браузером, и файл ресурсов, скомпилированный в weex, может работать в браузере, что, естественно, одно и то же.

работает в браузереes5Код нельзя запустить напрямую на стороне клиента (например, в браузере есть BOM, DOM, а на стороне клиента нет), поэтому существует множество ограничений в разработке клиентской части через weex.

При компиляции файла статического ресурса клиента это делается черезweex-loaderЧтобы загрузить эти файлы weex, написанные с ограниченным синтаксисом, и, наконец, скомпилировать их в читаемый клиентомjs-файл, то есть,JS Bundle.

Заинтересованные студенты могут узнать больше об этой части.Углубленный принцип реализации трансформатора в Weex

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

Client

Цитата с официального сайта Weex.

Клиенты Weex для iOS и Android будут запускать механизм JavaScript для выполнения пакетов JS и в то же время отправлять стандартизированные инструкции на уровень рендеринга на каждом конце, а также планировать рендеринг на стороне клиента и различные другие возможности. Мы выбрали ядро ​​JavaScriptCore под iOS и ядро ​​v8, предоставленное UC под Android. Это дает надежную гарантию с точки зрения производительности и стабильности.

Чтобы лучше использовать ресурсы всего мобильного приложения, движок JavaScript, который мы предоставляем на стороне клиента, является одноэлементным, то есть все пакеты JS совместно используют экземпляр ядра JavaScript, и в то же время контекст изолирован. для каждого пакета JS во время выполнения. Сделайте так, чтобы каждый пакет JS работал эффективно и безопасно. Мы также предустановили JS Framework, например Vue 2.0, разработчикам не нужно упаковывать JS Framework в каждый пакет JS, что значительно уменьшает размер пакета JS и дополнительно обеспечивает скорость открытия страницы.

clientДля внешнего интерфейса, чем больше вы знаете, тем лучше. Неважно, если вы этого не знаете, но у weex есть очень важная функция, то есть weex строит JS Bridge, который можно настроить клиентом.moduleа такжеcomponent, чтобы интерфейс и клиент имели возможность взаимодействовать.

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

официальная документация weex

Введение в эрос

eros — это основанное на weex решение для инкапсуляции метода написания vue, ориентированного на внешний интерфейс. Из-за специфики разработки приложений eros уделяет больше внимания всему проекту приложения. методы, предоставляемые приложением vue.app.

Блок-схема эроса выглядит следующим образом:

eros原理

что эрос может решить

  • Подробная документация для устранения ям в процессе строительства окружающей среды.
  • Набор кода компилируется в родные приложения iOS и Android на обоих концах.
  • Большое количество модулей инкапсулировано, чтобы сделать интерфейсную разработку удобной для нативных операций.
  • поставкаappboardМеханизм для уменьшения размера пакета и его изменения в режиме реального времени.
  • Встроен полный набор виджетов, которые можно модифицировать в зависимости от бизнеса.
  • Посредническая модель для централизованного управления бизнесом.
  • Обеспечивает логику обновления добавочного выпуска на стороне сервера.
  • Scaffolding может напрямую генерировать самые последние шаблоны для разработки.
  • Scaffolding запускает службу для просмотра эффектов разработки в реальном времени и отладки отладки.
  • Скаффолдинг обновляет зависимости eros, необходимые для платформы разработки.
  • Scaffolding поддерживает встроенный пакет соответствующей платформы.
  • Скаффолдинг поддерживает создание полных пакетов, добавочных пакетов и встроенную логику для взаимодействия с серверами обновлений.
  • Scaffolding поддерживает синхронное обновление содержимого шаблона.
  • Scaffolding поддерживает два метода разработки: вход weex в vue и ввод js.
  • служба поддержкиweex debug

что эрос не может сделать

В разработке eros также есть много ограничений, которые необходимо учитывать самим разработчикам.

  • Код weex по-прежнему имеет много проблем с совместимостью на стороне браузера, и все eros в настоящее время не поддерживают на стороне браузера.
  • eros не может использовать рынок weex, если у вас есть опыт нативной разработки, вы можете получить к нему доступ самостоятельно
  • Спасибо эросу заJS BundleМеханизм выполнения использует механизм appboard для уменьшения размера пакета js, что приводит к необходимости специальной обработки для отладки weex.
  • Поскольку текущая библиотека weex ui с открытым исходным кодом не поддерживаетtree-shaking, официально представленный веб-пакет также имеет версию 1.xx.Несмотря на то, что строительные леса eros обновили веб-пакет, он не настроен с встряхиванием деревьев, поэтому текущий способ введения кода должен ограничивать множество методов написания, чтобы уменьшить размер JS Bundle, а eros предоставит соответствующую библиотеку компонентов пользовательского интерфейса для решения этих проблем.
  • Пакет, созданный eros, немного больше.Для решения этой проблемы клиент eros динамически загружает разрабатываемые зависимости.
  • Если вы столкнулись со сложными страницами, такими как мгновенные сообщения, eros рекомендует использовать нативную реализацию, а weex все еще пытается справиться с такими потребностями.

поддерживающий

  • Android 4.1 (API 16)
  • iOS 8.0+
  • WebKit 534.30+

начать эрос

Монтаж лесов:

$ npm i eros-cli -g

Если вы находитесь в Китае, мы по-прежнему рекомендуем вам использовать cnpm для установки строительных лесов.

$ cnpm i eros-cli -g

Если в процессе установки сообщается об ошибке, это связано с тем, что eros-cli использует node-sass.Есть много способов решить эту проблему.Вы можете найти и решить ее самостоятельно.

Дарвин для iOS:

  • Xcode
  • CocoaPods
    • Обновите среду Ruby:$ sudo gem update --system
    • Удалите существующий образ Ruby:$ gem sources --remove https://rubygems.org/
    • Добавьте рубиново-фарфоровое зеркало:$ gem source -a https://gems.ruby-china.org/
    • Установите CocoaPods:$ sudo gem install cocoapods
    • Если приведенная выше команда сообщает об ошибке, выполните:$ sudo gem install -n /usr/local/bin cocoapods --pre
    • Наконец выполните:$ pod setupПроцесс долгий, пожалуйста, терпеливо дождитесь завершения выполнения

Дарвин/Windows/Linux для Android:

  • Загрузить и установитьJDK.
  • Загрузить и установитьAndroid Studio.

JDK — это комплект для разработки JAVA, а AndroidStudio — это среда разработки для Android, Эти два элемента не будут подробно описаны.

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

Установка симулятора

  • В разработке для ios xcode уже поставляется с симулятором.
  • разработчики Android могут скачатьGenymotion.

Генерация шаблона

  1. Во-первых, шаблон разработки автоматически генерируется через скаффолдинг (Мы не рекомендуем использовать sudo для выполнения).
$ eros init

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

eros-init
2. Загрузите необходимые зависимости Загрузите внешние зависимости.

$ npm install

Загрузите зависимости eros sdk.

$ eros install （由于部分库和网络原因，会导致很慢）

Установка eros (медленная из-за некоторых библиотек и сетевых причин) позволит вам выбрать загрузку зависимостей:

  • ios: зависимости, необходимые для разработки eros ios
  • android: зависимости, необходимые для разработки eros android

Каждый раз, когда eros исправляет ошибку или разрабатывает/изменяет модули и компоненты, просто установите eros, пожалуйста, закройте xcode перед обновлением ios, android выскочит синхронизация в редакторе android studio, просто нажмите.

安卓同步

eros installВыполнять install.sh нужно в каталоге iOS/Android, поэтому лучше всего использовать такие инструменты, как Git Bash, в системе Windows, иначе его нельзя загрузить.

  1. После установки зависимостей:

  • iOS: автоматически откроетсяXcode, затем выберите эмулятор, нажмите кнопку воспроизведения (запустить) в верхнем левом углу, вы можете увидеть встроенную демонстрацию eros во встроенном пакете.

  • Android: требуется еще несколько шагов для создания разработчика проекта в первый раз, и каждый раз после установки eros будет появляться запрос на синхронизацию:

  1. Нажмите выше AndroidStudioФайл--->Создать--->Импортировать проект.
  2. Найдите адрес eros в вашем регионе и выберитеplatforms/android/WeexFrameworkWrapper, нажмитеOK.
  3. После сборки проекта нажмите на панель инструментов над AndroidStudio.Runдля запуска проекта.

Уведомление:

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

Так что демоверсию eros можно запускать в симуляторе.

eros-demo

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

До разработки

Давайте сначала представим моменты, которые вам нужно знать при разработке eros:

Server JS Bundle

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

Если номер порта, который вы настроили, равен 8899, введите в браузереlocalhost:8899/distВы можете увидеть JS Bundle, сгенерированный пакетом.

И прежде чем разные носители отладки получат доступ к этим пакетам JS через локальный хост,Оба должны убедиться, что они находятся в одной и той же локальной сети., а при посещении ситуация иная:

перевозчик файл hosts Нужно ли вам вручную изменять сетевой прокси
Симулятор iOS файл хостов общего компьютера ненужный
Эмулятор Android имеют нужно
iOS реальное устройство имеют нужно
Android реальное устройство имеют нужно

Симулятор iOS особенный, потому что симулятор iOS и Mac используют одни и те же сетевые настройки.

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

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

127.0.0.1   app.weex-eros.com

После настройки к нему можно получить доступ в браузерах разных операторовhttp://app.weex-eros.com/distПакет JS ниже.

Client JS Bundle

Выше описано, как получить доступ к JS Bundle через службу. Затем мы отключаем реальную машину и отключаем кабель для передачи данных, и сеть отключается. Без источника JS Bundle, что должен делать пользователь, если он пуст?Ответ — JS Bundle, встроенный в приложение., мы также называем эту часть JS Bundle как内置包, этот процесс называется打内置包.

Перехватчик перехватчик

Итак, вопрос в том, как мы сообщаем приложению, нужно ли ему обращаться к сервисному пакету или к встроенному пакету? ответInterceptorвыключатель.

Interceptor

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

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

Структура проекта

Структура проекта, представляющая интерес для разработки, приведена ниже:

.
├── config
│   ├── eros.dev.js                     // 脚手架配置文件
│   └── eros.native.js                  // 客户端配置文件
├── platforms                           
│   ├── android                         // Android 平台主项目和依赖
│   └── ios                             // iOS 平台主项目和依赖
└── src
    ├── assets                          // 本地静态资源存放，一般可存放图片
    ├── iconfont                        // 本地 iconfont 存放
    ├── js
    │   ├── components                  // 组件，存放了经过修改的 weex-ui 和 bui
    │   ├── config                      // 项目开发配置
    │   │   ├── apis.js                 // 接口别名配置
    │   │   ├── index.js
    │   │   ├── pages.js                // 路由别名配置
    │   │   └── push.js                 // 个推事件处理
    │   ├── css                         // 可抽离公共 css 逻辑
    │   ├── mediator                    // 中介者
    │   ├── pages                       // 页面开发，所有页面都放置在这里
    │   └── widget                      // widget 源码
    └── mock
        └── test                        // mock 服务，在 eros.dev.js 可进行配置

Есть несколько моментов, на которые следует обратить внимание

  • eros.dev.jsесли изменилось,Это если вы бегаетеeros devСлужбу необходимо отключить, чтобы строительные леса могли повторно прочитать файл конфигурации.(Новые записи об упаковке будут часто добавляться во время разработки)
  • eros.native.jsдаФайл конфигурации, прочитанный клиентом, в настоящее время считывается из встроенного пакета, когда клиент открывает приложение., поэтому, когда этот файл изменится, вам нужно повторно распечатать встроенный пакет eros pack и повторно запустить приложение, чтобы изменения вступили в силу.

Hello Eros

Давайте просто разработаем Hello World:

  1. первыйОтключить перехватчик в отладке, разрешите приложению доступ к пакету службы. В это время страница обновления должна быть пустой, так как службы нет.
  2. Запустите службу разработки в корневом каталоге проекта.eros dev, после успешного запуска обновите встроенную демонстрационную страницу.На самом деле, вы можете изменять код в pages/eros-demo произвольно.После обновления вы можете увидеть эффект.Если вам интересно, вы можете попробовать это везде.

советы: Дважды щелкните кнопку отладки, чтобы обновить.

  1. Создайте новый в каталоге pagesHello.vueдокумент.
    Hello.vue
    Напишите в файле очень простой синтаксис:
<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello，</text>
        <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
  1. Исправлятьeros.dev.jsВ экспорте, если вам это не нужно, вы можете удалить все пути в eros-demo и заполнить только новую запись файла:
"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue"
],

Обратите внимание, что две вышеперечисленные находятся во взаимно однозначном соответствии с appBoard и посредником в eros.native.js.Если между двумя сторонами модификации нет соответствия, будет сообщено об ошибке.Рекомендуется не изменять это в обычное время. 5. Сообщите приложению, что я хочу снова изменить домашнюю страницу, изменитеeros.native.jspage.homePage путь в:

"page": {
    "homePage": "/pages/Hello.js",
}
  1. Отключитьeros devСлужить, потому что вы хотите сообщить об изменениях в файле конфигурации скаффолдинга.
  2. eros packНажмите на встроенный пакет, потому что вы хотите сообщить приложению об изменениях в файле конфигурации.
  3. Перезапустите приложение.

На данный момент разработана главная страница:

首页
Давайте изменим и сделаем переход между страницами и попробуем виджет: 9. ОпятьpagesСоздать новую страницу в каталогеEros.vue

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hi!</text>
        <text class="title">Enjoy it!</text>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
.title{
    font-size: 60;
}
</style>
  1. Исправлятьeros.dev.jsСкажите лесам добавить страницу:
"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue",
    // eros
    "js/pages/Eros.vue"
],
  1. Зарегистрировать маршрут, изменитьjs/config/pages.js, очистите существующую конфигурацию в демо:
export default {
    'Eros': {
        title: 'Eros',
        url: '/pages/Eros.js',
    },
}

URL-адрес здесь предназначен для заполнения относительного пути пакета JS, упакованного в каталог dist (сейчас такого пакета JS нет, вам нужно перезапустить службу разработки, чтобы прочитать конфигурацию), обратите внимание, что, поскольку это пакет JS, он заканчивается на .js. 12. Перезапускаем eros dev,обновляем,а изменений нет.На данный момент не получается перейти на вновь созданную страницу,так как настроен только роутинг,а метод перехода не срабатывает.Нам нужно модифицировать Это.Hello.vue:

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello，</text>
        <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros" @click="showEros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton },
        methods: {
            // 这里给按钮添加 showEros 事件来跳转
            showEros() {
                this.$router.open({
                    name: 'Eros'
                })
            }
        }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
  1. Дважды щелкните кнопку отладки, чтобы обновить, логика перехода завершена!
    router

До сих пор Hello world был написан, вы можете написать свой бизнес в соответствии с документом.

Эрос и демо адаптированы из демо Netease Yanxuan (спасибоzwwillоткрытый исходный код и руководство), разработчики также могут ссылаться на:

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

Инкрементальный выпуск

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

Существует два сценария выпуска приложения:

  • При изменении кода в каталоге ios/android (включая зависимости от платформы установки eros) нам необходимо повторно опубликовать его на рынке, чтобы снова пройти логику проверки, а пользователям необходимо перейти на рынок, чтобы загрузить его снова. .
  • При изменении бизнес-логики в проекте, например при добавлении новой страницы, изменении логики текущей страницы и т. д., что в конечном итоге приводит к изменениям в JS Bundle, может использоваться инкрементная публикация, пользователь перезапускается, чтобы принять эффект.

В то же время eros-cli также поддерживает создание полных пакетов и создание инкрементных пакетов:

Сгенерировать полный пакет:

$ eros build

Создание дополнительных пакетов:

$ eros build -d

В настоящее время построение инкрементального релиза все еще довольно проблематично, когда разработчик закончит разработку приложения, вы можете обратиться к нему.eros-publishДля создания добавочных сервисов публикации опытные учащиеся также могут развернуть их на компьютере-издателе.eros-cli, напишите свою собственную систему публикации.

Так же, как существующие разработчики eros на основеeros-publishЯ написал свою собственную систему инкрементного релизаlygtq-eros-publish, и с открытым исходным кодом, большое спасибоhodgevkвклад.

Суммировать

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

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

Категории