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

缺点:

  • 对浏览器的要求IE11+,并且对IE11需要特别的修正

bulma

足够轻量