程序人生 A log of my life

js ui

Framework7

移动端UI框架,提供Mat和iOS两个样式,对iOS原生的模拟达到了非常逼真的模拟。

Quasar

桌面、移动自适应UI框架,演示页面看起来很不错,文档写的很好。下面是Getting Started的精简版本:

#列出可以用的模板,不是必须的步骤
quasar list
#default是模板名
quasar init default helloworld
cd helloworld
npm install
#运行dev server
quasar dev

上面用的default模板基本上基于VUE的webpack模板,所以可以参考vue的资料,quasar dev具备hot reload特性。

quasar layout

quasar layout(QLayout)很有特色,支持了一个自定义的九宫格,可以对整体的布局通过九个字符做自定义,参考下图:

四个角落的h/f可以控制header、footer是否延伸到左右,上下的大写的H/F控制header、footer是否绝对定位,左右的L/R则控制左右的侧栏(left和right)是否独立滚动,所有的组合起来,还是蛮灵活的,这里有测试页面

QLayout下面的slot除了上面header、footer、left、right还可以有navigation,这样组合起来的话,大部分常规的ui布局都可以做到了,下面是一个例子:

<q-layout ref="layout" view="lHh Lpr fff">
    <q-toolbar slot="header" class="glossy">
      <q-btn flat @click="$refs.layout.toggleLeft()">
        <q-icon name="menu" />
      </q-btn>
      <q-toolbar-title>
        <div slot="subtitle"></div>
      </q-toolbar-title>
    </q-toolbar>

    <div slot="left">
      <q-list >
        <q-list-header>xxx</q-list-header>
        <!-- replace告诉vueroute替换当前路由,而不是push,这样回退按钮不会退回上级 -->
        <q-side-link item to="/practice" replace>
          <q-item-side icon="music note" />
          <q-item-main label="yyy" sublabel="zzz" />
        </q-side-link>
      </q-list>
    </div>
    <router-view />
  </q-layout>

上面的ref是vue的一个属性,用于在下面的q-btn中可以访问,参考这里

cordova

quasar对移动端也支持的,对移动端的支持通过wrap命令完成,比如增加cordova支持,可以

quasar wrap cordova

这样会在目录下建一个cordova子目录,cordova下是一个标准cordova工程,但通过符号链接把www目录链接到quasar的dist目录,但是wrap的时候在我的机器上符号连接建不起来,报一个Permission错误,这里有调整权限的解决方法,不过我还是不能成功,只能手工用管理员模式启动命令行,删除cordova目录,再执行一遍quasar wrap cordova就好了。

之所以把dist目录而不是src目录链接过去,是因为src目录未经过webpack是不能直接在webview中运行的, 使用dist带来了手机调试的困难,每次修改代码,quasar build,然后再重新cordova run都是比较漫长的过程。官方的一个推荐方法是修改cordova的配置文件,把其中<content src="index.html" />替换为quasar dev服务的地址,比如<content src="http://192.168.1.1:8080" />,这样构建出来的应用实际上是一个指向开发机的空壳,同时也可以做hot reload了, cordova插件也可以访问,一举多得。

quasar play

cordova建好之后,可以通过标准的cordova工具链就进行移动端编译、运行,也可以通过quasar play这个工具去做,quasar play非常类似React Native使用的Expo,好处自然是支持部署方便,且支持hot reload,但目前不能支持cordova plugin功能,官方文档是这样写的:

While playing with your App in Quasar Play, Cordova functionality will currently not be available. This is due to Cordova Javascript code causing a crash in its Java container.

所以quasar play其实没什么用,不如直接使用上面的替换content src的方法,更方便快捷。

轻量化

缺省的quasar mat模板带了google roboto字体(ios模板不带),这个会被webpack build到dist,占用200k空间,如果不想用这个字体,直接在main.js里注释掉

if (__THEME === 'mat') {
  require('quasar-extras/roboto-font')
}

就可以了。类似的,如果不需要Material Icon(50k),可以注释

import 'quasar-extras/material-icons

兼容性

quasar借助cordova实现了对android和iOS的支持,但是有一个坑,Material Icon在android 4的webview下不支持(大量图标显示不正常或错位),所以如果希望兼容Android 4,必须使用替代的图标,个人觉得ionicons非常不错,足以代替本来就不怎么好用的Material Icon。

其他

  • quasar build 构建product版本
  • quasar serve 运行一个静态http服务,其实和quasar无关,但是用起来比较方便,如果之前有build,这个命令自动serve dist这个目录
  • quasar new template name 基于模板生成一个名称为name的组件

缺点:

  • 对浏览器的要求IE11+,并且对IE11需要特别的修正
  • 移动端缺乏一些流行的控件,比如可滑动的Tab页。

bulma

足够轻量,但因为quasar也足够轻量,这个基本上没有什么优势了。