Framework7是一个基于MIT授权的Web前端框架,可以用于制作基于Web技术的界面,适用于移动端,也能用于桌面端。

Framework7(下面简称F7)看起来主要是通过获取赞助来维持其开发的。作者似乎做的很不错,除了F7,还开发和维护了其他几个前端框架:

F7有Core版本,以及面向Vue、React、Svelte等框架的版本,这几个版本应该不能混用。

Framework7/Core

Installation

可以通过https://framework7.io/cli/创建工程,也可以通过模板https://framework7.io/templates/创建工程。

yarn global add framework7-cli卡了挺长一段时间,是不是需要下载一些外网的资源?!

也可以手动安装:npm install framework7

命令行是framework7,也有简写的f7可以使用。执行f7 create --ui会弹出一个网页来设置所创建工程的参数:

  • 工程是在当前目录创建的
  • 默认的打包器是Vite
  • 如果选择Custom Build,会自动开启Vite和Less

默认界面是一个移动端界面。 组件是以f7结尾的文件。组件由HTML模板以及脚本构成,其标的作为一个函数通过export default导出。

App HTML Layout

……

Initialize App

创建一个Framework7类型标的,然后挂载到某个DOM节点上。

App / Core

解释了可用的参数。

Framework7 Package Structure

Lite版本不包含Framework7 Component (Router Component) 。

F7 Component似乎是基于Snabbdom的。

Framework7 Svelte

Introduction to Framework7 Svelte

使用的是Framework7的Router

Kitchen Sink

下载https://github.com/framework7io/framework7/源码,安装gulp到全局。

执行yarn install之后,执行yarn run svelte

因为gulp用到了rm这个命令,所以Windows下最后在WSL中执行。

Framework7 Svelte Package Structure

……

App Layout

……

Initialize App

……

Svelte Component Extensions

……

可以使用F7提供的router。

Store

可以使用F7提供的状态管理,也可以使用Svelte的状态管理。

Blog

Framework7 Svelte

看起来蛮简单的,默认提供的组件都封装成了svelte风格。

可以使用F7的route模块。

Meet Aurora — New Framework7 Desktop Theme

F7的桌面主题是Aurora,在4.2.0引入。

theme为auto的情况下,在Electron环境下自动设为aurora。

于是乎,除了ios和MD之外,多了一个主题,以前二选一的局面打破。好多CSS标类的前缀和后缀都由aurora专属的了。对所用主题进行条件判断的时候,也需要注意到Aurora这个主题。

一些控件,比如Picker、Pull To Refresh等原先只适用于触屏的控件也是适配了鼠标操作,可以看到有些控件上鼠标的悬停效果。

增加了新的专属的Appbar组件,类似于移动端的Navbar/Toolbar。

其他

Web应用原生化工具

  • Cordova,可以将Web应用封装成原生的iOS、Android以及Electron应用
  • Capacitor,可以将Web应用封装成原生的iOS、Android应用

Vite

Vite地下选用的打合器是Rollup。 把server/host选项设置为false,可以让vite只侦听本地。

参考文章

(完)