Framework7-Plus 是 Framework7 的安卓兼容版,旨在不改变现有API的前提下修复安卓4.0+设备上的兼容性问题。
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
apps
examples
kitchen-sink
src
.gitignore
.jshintrc
.travis.yml
CHANGELOG.md
Gruntfile.js
LICENSE
README.md
bower.json
modules.json
package.json

README.md

#Framework7-Plus

Framework7-Plus 是什么

Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发iOS7风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。Framework7 的特点是对iOS提供最好的体验,像素级模仿iOS的设计,不过它并不能保证对安卓设备的兼容性。 Framework7-Plus的目标是修复F7在安卓4.0+上的兼容性问题,并且尽可能不改变现有的API,这样可以方便已经使用F7开发的项目迁移到F7-Plus。 如果你打算开发一个兼容安卓和iOS设备的Web App,或者你已经基于F7开发完成但是在安卓设备下碰到了很多问题,那么F7-Plus将是你很好的选择。关于如何将 F7项目迁移到F7-Plus,请参见F7迁移到F7-Plus。如果你对兼容性问题感兴趣,可以参见Framework7 在安卓上的主要兼容性问题

Framework7-Plus的改动和文档

F7-Plus影响最大的改动是用iScroll替换了原生的滚动条,但是除了增加了和滚动条相关的API和滚动容器的改变之外,并没有影响其他组件,包括下拉刷新和无限滚动等组件都保持和F7一样的API。滚动条相关的详细改动请参见 iscroll滚动条。 一些基于flexbox布局的组件被修改成了兼容性更好的float布局,svg图标被替换成了iconfont,参见 其他组件的修改

iscroll滚动条

为了解决安卓上的F7-Plus 用 iScroll 替换了原生的滚动条,并且在pageInit阶段自动初始化了这个滚动条,这是一个影响最大的修改。 一方面,他影响了滚动方式,F7中是 .page-content 内部滚动,修改之后,.page-content作为一个类似绝对定位的容器(translate3D),内部不会滚动,而是作为一个整体在 .page容器中滚动条。可以理解为从 .page-content 内部的滚动变成了 .page 内部的滚动。 另一方面,无法再使用原生的滚动条,取而代之的是一个iscroll的实例,这个实例存储在 .page 上的 .scroller属性中,你可以通过 类似这样的代码 $$(".page")[0].scroller 来获取滚动条实例,最好的方式是通过下面将要介绍的新API来操作。

iscroll 新增的API

F7-Plus 在 pageinit 的时候会自动初始化一个滚动条,并且把它存储到对应的 .page DOM元素上。不过不建议直接从DOM元素上获取,而是通过下面的API来使用。 新增了这几个API:

app.getScroller(container)

获取滚动条示例,这个container应该是一个 .page 节点。如果你没有传入container,则自动获取当前显示的页面的滚动条。返回值是一个 iScroll 实例,它的API请参见 iScroll

app.refreshScroller(container)

刷新滚动条。任何导致 .page-content 容器产生高度变化的操作之后,都需要刷新JS滚动条。不过F7的原生组件,包括下拉刷新,手风琴,标签页等已经自动做了刷新操作,不需要再次刷新。 container 是一个 .page 节点,如果没有传入 container 参数,则直接刷新当前显示的页面。 注意,如果滚动条正在执行滚动动画,那么这时候刷新滚动条会导致页面闪一下,请避免在滚动的时候刷新滚动条。下拉刷新之后不要刷新滚动条,因为下拉刷新组件自己做了刷新操作。

滚动条相关改动的需要注意以下三点:

  1. 滚动条容器从 .page-content 变成了 .page
  2. 原生的滚动事件不可用,应该用 iScroll 的事件
  3. 任何导致 .page-content 高度变化的操作都要刷新滚动条。

其他组件的修改

因为一些兼容性的问题,部分组件的CSS做了修改。如果你是从F7迁移的项目,并且定制过下面这些组件的样式,那么需要额外注意。

图标

SVG改成了iconfont,能更好兼容安卓手机。svg是通过 background 实现的,而iconfont一般是通过 :before 或者 :after 伪元素实现的。这个修改涉及到所有使用SVG图标的组件:

  • navbar
  • list view
  • media list
  • sortable list
  • checkbox, radio, smart select
  • accordion
  • pull to refresh
  • message
  • preloader
  • searchbar
  • photo browser
  • notification

grid

栅格从 flexbox 布局改成了 float 布局,这个改动同时会导致样式的变化。flexbox布局的间距是固定的15px,而float布局的间距是一个百分比,也就意味着不同屏幕宽度下,间距大小是不同的。

message

message 组件使用了 flexbox 布局,这里把 .message 改成了 float 布局,因为 flexbox 容器无法完美自适应屏幕宽度。

searchbar

搜索栏的 form是使用 flexbox 布局,改成了 position: absolute 的布局。

F7迁移到F7-Plus

F7-Plus 尽可能保证了原来的API不变,减少迁移难度。不过迁移的时候,除了替换掉F7的库之外,还是有一些需要修改的代码和需要注意的地方。

  • 首先需要修改的是所有和滚动条相关的逻辑,原生的滚动条被替换成了iScroll滚动条,并且滚动容器从 .page-content 变成了 .page,导致页面高度变化的操作之后需要刷新滚动条,具体参见 iscroll滚动条
  • 如果你用到了 其他组件的修改 中提到的组件,并且修改了他们的样式,那么你可能需要重新检查一下你的CSS,因为他们的布局已经发生了变化。

上面就是你所有需要注意的地方,很多时候,你唯一需要做的就是刷新一下滚动条而已,是不是很简单。

如果你对 Framework7 的兼容性有兴趣,可以继续阅读下一章。

Framework7 在安卓上的主要兼容性问题

目前主要测试了如下几种设备:

  1. 三星 S4 (4.4.2)
  2. 三星 s3 (4.3)
  3. 三星 note2 (4.3)
  4. LG nexus 5 (4.4.4)
  5. nexus 4(?)
  6. 小米 M3 (4.4.2)
  7. 小米 M2 (4.1.1)
  8. 红米 Note 增强版 (4.2.2)
  9. 魅族 MX2 (4.2.1)

主要兼容性问题是以下这些:

原生滚动条滚动时的闪烁问题

在低版本的安卓比如魅族MX2上,绝对定位 position: absolute; 或者使用了 transform: translate3D;的容器,在原生滚动条滚动的时候会有滚动延迟,视觉上就是这些容器在滚动时会闪烁。主要在swipeout,sortable list, accordion, photo browser这几个组件上有问题。 现在已经解决,解决方法是把原生的滚动条替换成了JS滚动条,JS滚动条使用的是大名鼎鼎的 iScroll,基本可以达到和原生滚动条相同的性能。替换完成之后,因为JS滚动条在页面高度变化的时候需要手动更新,所以会增加一个新的 app.refreshScroller 接口。已有的所有组件都完成了改造,所以使用他们的时候是不需要手动调用 refreshScroller的。

内置的fast click库的bug

Framework7 内置了一个fast click库,它在处理label的prevent default逻辑上有问题(对所有低于 4.4的机型都不做 prevent default处理),这样会导致部分低于4.4的机型上label无法正确触发其中的radio或者checkbox的选择,影响到 form中使用label作为容器的 radio,checkbox,switch和smart select。现在修改了 prevent default的版本判断逻辑,在上述测试机上测试没有问题,不排除还会有其他机型上会出现无法选择的问题。

CSS calc 不支持

部分低于4.4的机型不支持 calc 函数,一些使用 calc 计算宽度的组件会出现宽度问题,主要包括:grid, search bar, messages等组件。现在已经把他们替换成了 float 或者 absolute 布局。

display: flex;不支持

部分低于 4.4 的机型不支持新的 display: flex; ,不过并不是所有的,小米M2是4.1.1却支持。不支持 display: flex; 的机型会自动降级到 display: box;,这是旧的flexbox规范,它的宽度适应没有新规范那么灵活,所以grid组件在这些机型上在同一个 row 中放入的列超出宽度之后,无法自动换到下一行。 关于flexbox的新规范和旧规范,可以参考stackoverflow上的一个问题 CSS3 Flexbox: display: box vs. flexbox vs. flex 现在的做法是把基于flexbox布局的grid,改成了基于 float 的布局。有一点和以前不一样,以前的布局是固定的15px 间距,现在变成一个百分比。 另外一个是message组件,他用的也是 flexbox 布局,而flexbox容器的宽度无法完美自适应,已经把flex替换成了float布局。

background svg 支持不完全

测试下来,发现在三星 S3上部分背景图标无法显示,原因还不特别清楚,应该是他不支持在input这种特殊的元素上写background svg。现在已经将大部分 svg 图标替换成iconfont,测试没有问题。

上面列出的是测试出的主要问题,很多组件的bug都是由上面这几个问题引发的。还有一些组件内部的零零碎碎的bug,而且肯定还有一些未发现的bug。不过解决完上述主要问题之后,基本可以在4.0以上版本的安卓设备上使用。