Weweb — это интерфейсная платформа, совместимая с синтаксисом апплета, который можно использовать для написания односторонних веб-приложений. Если у вас уже есть апплет, вы можете запустить свой апплет в браузере через него. В современной популярной небольшой программе он может максимально увеличить ваш небольшой программный код, он имеет следующие преимущества:
- Кроссплатформенный, один набор кода работает на нескольких концах (мини-программы, h5 и прямая упаковка в приложения Android и ios в будущем — это не мечта)
- Поставляется с общими компонентами, прекрасно наследует встроенные компоненты апплета
- Совместим с синтаксисом Applet RPX, что облегчает страницу для адаптации к различным моделям
Этот проект реализуется на основе Framework Applet Frame Framework, встроенной в инструмент разработчика апплета. После тщательного изучения официального низкоуровневой структуры апплета мы реализовали службу и просмотр двигателя апплета, работающего на веб-стороне.wewebОн может адаптироваться к требованиям производительности веб-стороны.По сравнению с родной структурой небольших программ, в основном есть следующие настройки:
- Основная библиотека фреймворка была значительно уменьшена, а ненужные части Интернета были удалены, чтобы значительно уменьшить размер основной библиотеки.
- Упростите исходную трехуровневую архитектуру до двухуровневой архитектуры службы и представления.
- Ресурсы страниц и фреймворки обычно не используются, встроенные компоненты загружаются асинхронно, что уменьшает размер основной библиотеки и повышает скорость загрузки.
- Поддержка пользовательской страницы входа вместо функции входа в WeChat
- Удалите небольшую процедуру, чтобы ограничить уровень страницы
- Реализована js-версия компиляторов wxml и wxss для соответствия требованиям кроссплатформенной компиляции и беспрепятственной интеграции в Интернет.
Применимая сцена
- Мне нравится метод разработки небольших программ, или я умею разрабатывать только небольшие программы, и хочу писать веб-приложения с помощью метода разработки небольших программ.
- После разработки апплета я также хочу иметь ту же функцию, что и приложение h5, и надеюсь повторно использовать код апплета.
- Отладка некоторых функций апплета на стороне браузера вместо инструмента разработчика апплета
развивать
Метод разработки может быть непосредственно применен к тому, как вы использовали для разработки апплета без дополнительных расходов на обучение, но после разработки апплета апплет компилируется и преобразуется в соответствующее приложение H5 через два метода работы, описанные ниже, а затем Просто брось скомпилированный код на сервере
бегать
Сначала установите его в системуnode, официальный установочный пакет также установит для вас инструмент управления зависимостямиnpm
Способ 1: Используйте инструмент командной строки cli для прямого преобразования апплета
Установить:
npm install weweb-cli -gЗапустите пример:
#./demos/demo20170111/这是小程序的存放路径
weweb ./demos/demo20170111/Options:
- -h, --help вывести справочную информацию
- -V, --version вывести информацию о версии
- -o, --open использовать Chrome для открытия апплета, только для Mac
- -l, --list использовать браузер по умолчанию, чтобы открыть историю обновлений
- -p, --port \ Указать порт службы, по умолчанию 2000
- -d, --dist \ указать сгенерированный путь
- -t, --transform конвертировать только апплет, а не веб-сервис
Способ 2. Соберите и запустите вручную:
# clone [weweb]项目后安装依赖
npm i
# 构建核心库：
npm run build
# 运行示例：
./bin/weweb ./demos/demo20170111/
# 压缩app代码：使用环境变量 NODE_ENV=production
NODE_ENV=production ./bin/weweb demos/demo20170111
# 替换编译器：当默认编译出错时使用环境变量 DFT_CMP=true 可切换为微信开发者工具自带的编译器
DFT_CMP=true ./bin/weweb demos/demo20170111
# 环境变量可以组合使用
NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111онлайн демо
QR-код демонстрационного апплета выглядит следующим образом:
Нажмите здесь, чтобы просмотреть онлайн-демонстрацию h5, скомпилированную webeb
Вы можете сравнить разницу между апплетом и приложением h5, созданным после конвертации.
исходный код демо
Меры предосторожности
По умолчанию WEWEB компилирует WXML и WXSS, но компилятор все еще находится в пробной фазе, некоторые случаи могут быть не полностью измерены, если во время WEWEB будут обнаружены какие-то ненормальные условия, вы можете попробовать переключиться на официальный компилятор WeChat. эта проблема. Добро пожаловать к нам, как проблемыissue. мы исправим это как можно скорее
# 切换成微信开发者工具自带的编译器：使用环境变量 DFT_CMP=true 如下：
DFT_CMP=true ./bin/weweb demos/demo20170111После перехода на H5 возникнут проблемы, связанные с невозможностью поддержки некоторых API интерфейсами междоменного доступа и отделением от среды WeChat. Мы можем передать в апплетеapp.jsonфайл добавленwewebЭлементы конфигурации для решения некоторых распространенных проблем:
- Вход: после преобразования в H5 собственный метод входа в апплет не будет поддерживаться.
loginUrlпункт для установки вызоваwx.loginСтраница входа, на которую переходит, когда
/**
* 此处的loginUrl地址必须是在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
- После преобразования в H5 связанные интерфейсы, которые зависят от среды WeChat, не будут поддерживаться, например: вход в систему и т. д., и их необходимо будет преобразовать в режим, совместимый с H5, самостоятельно.
- После преобразования апплета в H5, при особых обстоятельствах, отдельные стили могут быть немного ненормальными, и вам придется самостоятельно настраивать и обеспечивать совместимость.