迷你应用开源项目

Thomas Steiner

Twitter GitHub Glitch Mastodon 首页

注意 ：本文属于文章集，其中每篇文章都是基于前几篇文章。如果您刚刚到达这里，不妨从头开始阅读。

千克

kbone 项目（GitHub 上的开源）实现了一个适配器，用于在自适应层中模拟浏览器环境，这样为网页编写的代码无需更改即可在迷你应用中运行。有多个起始模板（其中 Vue、React 和 Preact）可让开发者更轻松地使用这些框架进行入门体验。

可以使用 kbone-cli 工具创建新项目。向导会询问要使用哪个框架启动项目。以下代码段展示了 Preact 演示。在下面的代码段中，mp 命令用于构建迷你版应用，web 命令用于构建 Web 应用，build 用于构建正式版 Web 应用。

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

以下代码段展示了一个简单的计数器组件，该组件随后在迷你应用和 Web 应用中以异形方式呈现。迷你应用的开销非常大，完全从 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;

在微信开发者工具中打开的 Preact kbone 模板演示版应用。请注意复杂的 DOM 结构，以及加号和减号按钮实际上并不是 <button> 元素的原因。

在网络浏览器中打开的 Preact kbone 模板演示版应用。请注意 DOM 结构。

kbone-ui

kbone-ui 项目（GitHub 上的开源）是一个界面框架，可促进迷你应用开发以及使用 kbone 进行 Vue.js 开发。kbone-ui 组件可模拟微信的内置迷你应用组件的外观和风格（另请参阅上文的组件）。通过直接在浏览器中运行的演示，您可以探索可用组件。

显示表单相关组件的 kbone-ui 演示。

WeUI

WeUI 是一组基本样式库，与微信的默认视觉体验一致。微信官方设计团队针对微信内部网页和微信迷你应用进行了量身定制的设计，让用户对使用体验更加统一。它包含 button、cell、dialog、progress、toast、article、actionsheet 和 icon 等组件。WeUI 有多个不同的版本，例如适用于采用 WXSS 样式的微信迷你应用的 weui-wxss（请参阅上文的样式设置）、适用于 Web 应用的 weui.js，以及适用于微信 React 组件的 react-weui。

显示开关的 WeUI 演示版应用。

近江

Omi 是一个自称的前端跨框架框架（GitHub 上的开源）。它将 Web Components、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 是一个基于 Omi 开发的跨框架界面组件库（GitHub 上的开源），可输出标准 Web 组件的自定义元素。

显示开关的 Omiu 演示版应用。

WePY

WePY 是一个框架，可让迷你应用支持组件化开发。通过预编译，开发者可以选择自己喜欢的开发风格来开发迷你应用。对框架的详细优化以及 Promise 和异步函数的引入，都使迷你应用项目的开发变得更容易、高效。同时，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>

WePY“使用入门”文档。

vConsole

vConsole 项目为移动网页提供了一款可扩展的轻量级前端开发者工具。它提供了一个类似于开发者工具的调试程序，可直接注入 Web 应用和迷你应用。通过演示，可以找到可以改进的商机。vConsole 包含“日志”“系统”“网络”“元素”和“存储”标签页。

显示元素资源管理器的 vConsole 演示版应用。

Web

weweb 项目（GitHub 上的开源）是 Hera 迷你应用框架的底层前端框架，该框架声称与微信迷你应用的语法兼容，因此您可以采用迷你应用的方式编写 Web 应用。该文档承诺，如果您已有一款迷你应用，那么借助 weweb，您可以在浏览器中运行该应用。在我的实验中，这种方法对于当前的迷你应用并不可靠，很可能是因为项目最近没有发现更新，导致其编译器错过微信平台中的更改。

显示受支持的微信 API 列表的 Hera 迷你应用框架文档。

使用 weweb 编译的 weweb 迷你版应用，可在浏览器中运行。

成功 ：在下一章中，您将学习如何以迷你应用的方式进行编程。

致谢

本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 审核。