kbone
Проект kbone ( с открытым исходным кодом на GitHub ) реализует адаптер, который имитирует среду браузера на уровне адаптации, так что код, написанный для веб-разработки, может работать без изменений в мини-приложении. Существует несколько стартовых шаблонов (среди них Vue , React и Preact ), которые упрощают процесс адаптации для веб-разработчиков, переходящих с этих фреймворков.
Новый проект можно создать с помощью инструмента kbone-cli . Мастер запрашивает, с каким фреймворком инициализировать проект. Приведенный ниже фрагмент кода демонстрирует работу Preact. В приведенном ниже фрагменте кода команда mp собирает мини-приложение, команда web собирает веб-приложение, а build создает рабочее веб-приложение.
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
Приведённый ниже фрагмент кода демонстрирует простой компонент счётчика, который затем изоморфно отображается в мини-приложении и веб-приложении. Накладные расходы мини-приложения значительны, судя по структуре DOM.
import { h, Component } from "preact";
import "./index.css";
class Counter extends Component {
state = { count: 1 };
sub = () => {
this.setState((prevState) => {
return { count: --prevState.count };
});
};
add = () => {
this.setState((prevState) => {
return { count: ++prevState.count };
});
};
clickHandle = () => {
if ("undefined" != typeof wx && wx.getSystemInfoSync) {
wx.navigateTo({
url: "../log/index?id=1",
});
} else {
location.href = "log.html";
}
};
render({}, { count }) {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{count}</span>
<button onClick={this.add}>+</button>
<div onClick={this.clickHandle}>跳转</div>
</div>
);
}
}
export default Counter;
<button> . 
kbone-ui
Проект kbone-ui ( с открытым исходным кодом на GitHub ) — это UI-фреймворк, который упрощает как разработку мини-приложений, так и разработку на Vue.js с помощью kbone. Компоненты kbone-ui имитируют внешний вид и функциональность встроенных компонентов мини-приложений WeChat (см. также Компоненты выше). Демонстрационный пример , работающий непосредственно в браузере, позволяет изучить доступные компоненты.
WeUI
WeUI — это набор базовых библиотек стилей, соответствующих стандартному визуальному интерфейсу WeChat. Официальная команда дизайнеров WeChat разработала дизайн внутренних веб-страниц и мини-приложений WeChat, чтобы сделать восприятие пользователями интерфейса более единообразным. Он включает такие компоненты, как button , cell , dialog , progress , toast , article , actionsheet и icon . Существуют различные версии WeUI, например, weui-wxss для мини-приложений WeChat, оформленных с помощью WXSS (см. раздел «Стилизация» выше), weui.js для веб-приложений и react-weui для компонентов WeChat React.
Оми
Omi — это самопровозглашенный кроссфреймворк для фронтенда ( с открытым исходным кодом на GitHub ). Он объединяет веб-компоненты, JSX, виртуальный DOM, функциональный стиль, наблюдатель или прокси в один фреймворк, отличающийся небольшим размером и высокой производительностью. Его цель — позволить разработчикам писать компоненты один раз и использовать их везде, например, в Omi, React, Preact, Vue.js или Angular. Написание компонентов Omi очень интуитивно понятно и практически лишено шаблонного кода.
import { render, WeElement, define } from "omi";
define("my-counter", class extends WeElement {
data = {
count: 1,
};
static css = `
span{
color: red;
}`;
sub = () => {
this.data.count--;
this.update();
};
add = () => {
this.data.count++;
this.update();
};
render() {
return (
<div>
<button onClick={this.sub}>-</button>
<span>{this.data.count}</span>
<button onClick={this.add}>+</button>
</div>
);
}
});
render(<my-counter />, "body");
Омиу
Omiu — это кроссплатформенная библиотека компонентов пользовательского интерфейса ( с открытым исходным кодом на GitHub ), разработанная на основе Omi, которая выводит пользовательские элементы стандартных веб-компонентов.
ВеПИ
WePY — это фреймворк, позволяющий создавать мини-приложения с использованием компонентной разработки. Благодаря предварительной компиляции разработчики могут выбрать наиболее подходящий для них стиль разработки мини-приложений. Детальная оптимизация фреймворка, а также использование промисов и асинхронных функций делают разработку мини-приложений проще и эффективнее. В то же время WePY — это развивающийся фреймворк, который во многом перенял оптимизированные инструменты для фронтенда, а также концепции и идеи проектирования фреймворков, в основном из Vue.js.
<style lang="less">
@color: #4d926f;
.num {
color: @color;
}
</style>
<template>
<div class="container">
<div class="num" @tap="num++">{{num}}</div>
<custom-component></custom-component>
<vendor-component></vendor-component>
<div>{{text}}</div>
<input v-model="text" />
</div>
</template>
<config>
{ usingComponents: { customComponent: '@/components/customComponent', vendorComponent:
'module:vendorComponent' } }
</config>
<script>
import wepy from "@wepy/core";
wepy.page({
data: {
num: 0,
text: "Hello World",
},
});
</script>
vConsole
Проект vConsole предоставляет легковесный, расширяемый инструмент для фронтенд-разработки мобильных веб-страниц. Он предлагает отладчик, похожий на DevTools, который можно внедрять непосредственно в веб-приложения и мини-приложения. Демонстрация показывает открывающиеся возможности. vConsole включает вкладки для журналов, системы, сети, элементов и хранилища.
веб
Проект weweb ( с открытым исходным кодом на GitHub ) — это базовый фронтенд-фреймворк для фреймворка мини-приложений Hera , который, как утверждается, совместим с синтаксисом мини-приложений WeChat, поэтому вы можете писать веб-приложения в стиле мини-приложений. В документации обещается, что если у вас уже есть мини-приложение, вы можете запустить его в браузере благодаря weweb. В моих экспериментах это не работало надежно для существующих мини-приложений, скорее всего, потому что проект давно не обновлялся, из-за чего его компилятор пропускал изменения в платформе WeChat.
Благодарности
Данная статья была рецензирована Джо Медли , Кейси Баскесом , Милицей Михайловией , Аланом Кентом и Китом Гу.