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
……
Navigation Router
可以使用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只侦听本地。
参考文章
- Cordova Frameworks: Ionic vs. Framework7
- Ionic框架的十大替代品
- Why you should use an Electron alternative
- 提到了Tauri(Rust)、Neutralino.js(C/C++)
- The 6 best CSS UI libraries for your Electron app
- 提到了Phonton、F7、Antd、Semantic UI、React Desktop、Bootstrap
- Building an Electron File Explorer with Quasar
- Quasar和Vue组合看起是一个开发Electron应用的选择
- File manager written in TypeScript & React
- electron 源码保护方案探讨。
- 提到了使用V8的Snapshot技术、bytecode、wasm
(完)