weweb

Введение

weweb — это интерфейсный фреймворк, совместимый с синтаксисом программ WeChat. С его помощью можно создавать веб-приложения, используя синтаксис для разработки программ WeChat. Если у вас уже есть программа WeChat, вы можете запустить её в браузере с помощью weweb. А если вы знакомы с синтаксисом Vue, то можете использовать wepy для создания программы WeChat и преобразовать её с помощью weweb для запуска в веб-браузере.

Преимущества

• Кроссплатформенность: один и тот же код может работать на разных платформах (программы WeChat, H5, а в будущем — даже приложения).
• Встроенные компоненты: weweb включает в себя все необходимые компоненты, которые есть в программах WeChat.
• Совместимость с rpx: страницы легче адаптировать под разные устройства.

Проект основан на встроенном фреймворке для разработчиков программ WeChat. После тщательного изучения внутренней структуры программ WeChat разработчики weweb создали сервис и движок просмотра для работы программ WeChat в веб-среде. Чтобы weweb соответствовал требованиям к производительности в интернете, были внесены следующие изменения:

• Ядро библиотеки было значительно сокращено: удалены части, не связанные с интернетом, что привело к уменьшению размера ядра библиотеки.
• Трёхслойная архитектура была упрощена до двухслойной: сервиса и просмотра.
• Ресурсы страниц и встроенные компоненты загружаются асинхронно: это ускоряет загрузку.
• Поддержка пользовательских страниц входа: заменяет функцию входа через WeChat.
• Устранены ограничения на уровень вложенности страниц в программах WeChat.
• Реализован компилятор для wxml и wxss, который позволяет компилировать код для разных платформ без проблем.

Сценарии использования

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

Разработка

Процесс разработки похож на создание программы WeChat: вам не нужно изучать новые методы, просто разработайте программу WeChat, а затем преобразуйте её с помощью методов, описанных ниже, чтобы создать приложение H5. Затем разместите скомпилированный код на сервере.

Запуск

Сначала установите Node, официальный установочный пакет также установит инструмент управления зависимостями npm.

Метод 1: использование инструмента командной строки cli

Установка:

npm install weweb-cli -g

Запуск примера:

weweb ./demos/demo20170111/

Опции:

• -h, --help — вывод справки.
• -V, --version — вывод версии.
• -o, --open — открыть программу WeChat с помощью Chrome (работает только на Mac).
• -l, --list — открыть историю обновлений с помощью браузера по умолчанию.
• -p, --port <port> — указать порт сервера (по умолчанию 2000).
• -d, --dist <dir> — указать путь для генерации кода.
• -t, --transform — только преобразовать программу WeChat, но не запускать сервер.

Способ 2: ручная сборка и запуск:

# клонировать проект после установки зависимостей
npm i

# собрать ядро библиотеки:
npm run build

# запустить пример:
./bin/weweb ./demos/demo20170111/

# сжать код приложения: используйте переменную среды NODE_ENV=production
NODE_ENV=production ./bin/weweb demos/demo20170111

# заменить компилятор: когда стандартный компилятор выдаёт ошибку, используйте переменную окружения DFT_CMP=true, чтобы переключиться на компилятор, встроенный в инструменты разработчика WeChat
DFT_CMP=true ./bin/weweb demos/demo20170111

# переменные среды можно комбинировать
NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111

Команды разработки

# автоматически выполнять перестройку
npm run dev

# автоматический перезапуск сервера
npm run autostart

Онлайн-демонстрация demo

[демо-код]

[онлайн-демонстрация H5]

Примечание

По умолчанию weweb использует собственный компилятор для обработки wxml и wxss. Однако этот компилятор всё ещё находится в стадии тестирования, и некоторые случаи могут быть не полностью проверены. Если вы столкнётесь с какими-либо проблемами во время использования weweb, вы можете попробовать переключиться на официальный компилятор инструментов разработчика WeChat, чтобы посмотреть, решит ли это проблему. Если возникнут проблемы, пожалуйста, сообщите нам. Мы постараемся исправить их как можно скорее.

# переключитесь на компилятор инструментов разработки WeChat: используйте переменную среды DFT_CMP=true следующим образом:

DFT_CMP=true ./bin/weweb demos/demo20170111

После преобразования в H5 могут возникнуть проблемы с междоменными запросами и функциями, которые зависят от среды WeChat. Мы можем решить некоторые распространённые проблемы, добавив конфигурацию weweb в файл app.json программы WeChat:

• Вход: после преобразования в H5 вход через программу WeChat будет недоступен. Вы можете настроить URL-адрес входа в файле app.json, чтобы перейти на страницу входа при вызове wx.login.

/**
 * Здесь loginUrl должен быть адресом программы WeChat, зарегистрированным в app.json
 */

"weweb":{
  "loginUrl":"/page/H5login"
}

/**
 * После успешного входа вызовите wx.loginSuccess();
 * Этот API может автоматически вернуться на исходную страницу
 */

success : function(rt){
  if(rt.result){
    var login = require("../../modules/login/index.js");
    app.globalData.userInfo = rt.result;
    login.setLoginInfo(rt.result);
    wx.loginSuccess();
  }else{
    toast.show(self,rt.status.status_reason||'Ошибка входа');
  }
}

• Междоменные запросы: если серверный интерфейс не поддерживает JSONP, вы можете добавить параметр requestProxy, чтобы установить адрес прокси-сервера на стороне сервера, чтобы реализовать междоменный запрос.

/**
 * Здесь /remoteProxy — это прокси-интерфейс, реализованный в weweb server.
 * В реальном проекте замените его на свой реальный адрес прокси.
 * Если интерфейс поддерживает возврат формата jsonp, настройка не требуется
 */

"weweb":{
  "requestProxy":"/remoteProxy"
}

Эффект преобразования

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

Благодарность

На начальном этапе разработки weweb мы опирались на реализацию проекта [wept]. Часть кода также основана на [wept] или была изменена на его основе. Большое спасибо автору [wept], chemzqm, за его бескорыстный вклад.

Если у вас есть хорошие идеи или предложения, пожалуйста, отправьте их нам в виде [issue] или [PR], чтобы внести свой вклад в оптимизацию [weweb]. Если вам нравится weweb, пожалуйста, поставьте ему звезду.

Лицензия

MIT