使用Framework7 1.6.5开发APP记录

作者: 呆毛和二货 | 来源:发表于2018-02-01 11:35 被阅读0次

Framework7介绍

（1）Framework7 是一个开源免费的框架。可以用来开发混合移动应用（原生和 HTML 混合）或者开发 iOS & Android 风格的 WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
（2）使用时只需要一个基本的 HTML 布局，并且把 Framework7 的 CSS 和 JS 文件引入即可！Framework7 不会强制你写任何自定义的标签，也不会通过 JS 来生成任何额外的内容。你不需要通过 JS 或者 JSON 来写页面，只需要普通的 HTML 就可以。
（3）Framework7 有大量可以直接使用的 UI 组件和工具，比如导航栏、侧边栏、弹出层、标签页、虚拟列表、日期控件、手风琴等。大部分的组件你都完全不需要写任何 JS 代码。

一、页面结构

拿到原型图：

Framework7标签栏应用案例：http://examples.framework7.cn/tab-bar/

一开始看到原型图和F7里面的这个案例，果断就把案例直接下载来使用。交给后台开发时被告知“没达到开发要求”，原因：

标签栏应用案例结构：

<div class="views tabs toolbar-fixed">
  <!-- Tab 1 - View 1, active by default -->
  <div id="tab1" class="view tab active">
    ...
  </div>
  <!-- Tab 2 - View 2 -->
  <div id="tab2" class="view tab">
    ...
  </div>
  <!-- Tab 3 - View 3 -->
  <div id="tab3" class="view tab">
    ...
  </div>
  <!-- Tab 4 - View 4 -->
  <div id="tab4" class="view tab">
    ...
  </div>
  <!-- Tab bar with tab links -->
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab1" class="tab-link active"><i class="icon demo-icon-1"></i></a>
      <a href="#tab2" class="tab-link"><i class="icon demo-icon-2"></i></a>
      <a href="#tab3" class="tab-link"><i class="icon demo-icon-3"></i></a>
      <a href="#tab4" class="tab-link"><i class="icon demo-icon-3"></i></a>
    </div>
  </div>
</div>

标签页是一个页面，不方便控制和后期维护。于是切分成四个页面，在点击底部导航栏时按需加载进来。

修改后的页面结构如下：
index.html

  <body>
    <!-- Views -->
    <div class="views">
      <div class="view view-main">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="center">借款侠</div>
                <div class="right">
                    <a href="javascript:void(0);" class="external icon-only" id="upcity">
                        <img src="/loanheroic/images/icon/icon_positioning_@2x.png" alt="" class="icon icon-pos"><span class="city city-name"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-through">
          <!-- 首页 -->
          <div data-page="index" class="page view-1">
            <div class="page-content">
                  ...
            </div>
          </div>
        </div>
        <!-- 底部导航 -->
        <div class="toolbar tabbar tabbar-labels">
          <div class="toolbar-inner">
            <a href="javascript:void(0);" id="goIndex" data-url="index.html" class="link active"> <i class="icon tabbar-demo-icon-1"></i><span class="tabbar-label">首页</span></a>
            <a href="javascript:void(0);" id="goProductList" data-url="productList.html" class="link"><i class="icon tabbar-demo-icon-2"></i><span class="tabbar-label">借款</span></a>
            <a href="javascript:void(0);" id="goFavorit" data-url="favorites.html" class="link"> <i class="icon tabbar-demo-icon-3"></i><span class="tabbar-label">收藏</span></a>
            <a href="javascript:void(0);" id="goMine" data-url="mine.html" class="link"> <i class="icon tabbar-demo-icon-4"></i><span class="tabbar-label">我的</span></a>
          </div>
        </div>
      </div>
    </div>
  </body>

其它页面 xxx.html

<div class="pages">
  <div data-page="pageName" class="page navbar-fixed toolbar-fixed">
    <!-- 导航 -->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left"><a href="javascript:void(0);" class="external back-mine back-android"> <i class="icon icon-back"></i></a></div>
        <div class="center sliding">页面名称</div>
      </div>
    </div> 
    <!-- 内容 -->
    <div class="page-content">
        ...
    </div>
  </div>
</div>

默认情况下 Framework7 会使用 Ajax 加载所有的页面,当我们触发切换页面的事件时，Framework7会通过Ajax获取 xxx.html，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。

因为Framework7有一个非常聪明的解析器，所以在内部页面中我们不需要完整的HTML结构（head,body,views,pages等)。Framework7 解析器会尝试在ajax加载的页面中寻找 <div class="page">

二、Template7 模板

Template7是framework7的内置模板引擎，无需包含额外的 JS 文件。

1. 自动编译模板

<script type="text/template7" id="myTemplate">
    <p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>

type="text/template7" 指定了这个script的内容会被 Framework7 当做一个 Template7 模板自动编译

id="myTemplate" 是模板的id，后面可以通过这个id来找到这个模板

你需要在初始化应用的时候传入一个参数来启用自动编译模板功能：

var myApp = new Framework7({
    precompileTemplates: true,  // 启用模板
});

渲染：

var Html = Template7.templates.broadTemplate(data);
$$('div').html(Html);

2. 模板页面

Framework7 可以使用 Template7 用特定的上下文来渲染ajax页面或者动态页面，并且提供了很多不同的方法来实现.

首先，我们需要在应用初始化的时候传入一个参数来开启这个功能：

var myApp = new Framework7({
    template7Pages: true, // 模板页面
});

xxx.html

<div class="page" data-page="xxx">
    <div class="page-content">
        <p>Hello, my name is {{name}} and i am {{age}} years old {{position}} at {{company}}</p>
    </div>
</div>

模板页面数据：

var myApp = new Framework7({
    template7Pages: true, 
    template7Data: {
        'url:xxx.html': {
            name: 'John Doe',
            age: 38,
            company: 'Apple',
            position: 'Developer'
        },
    }
});

ajax传入数据：

ajax_json({
    url: url,
    success: function(data){
        mainView.router.load({
            url: "xxx.html",
            context: data.result
        })  
    }
});

使用情况：

首页模块使用<script>自动编译模板
其它页面使用模板页面

遇到的问题：
在模板页面有多个数据源的时候，不能结合自动编译模板同时使用（表达式混淆。除非把<script>模板放在首页）。

解决：
列表模块使用F7自带的虚拟列表组件进行动态渲染。

3. 虚拟列表

虚拟列表可以用来渲染有大量数据的列表，并且不有有任何的性能问题。并且，它和所有的Framework7组件都是兼容的，包括搜索栏、无限滚动、下拉刷新、滑动删除和可排序列表。

在页面中放一个空的虚拟列表容器

<div class="list-block virtual-list">

</div>

使用Template7模板渲染：

var myList = myApp.virtualList('.list-block.virtual-list', {
    items: data,
    template: '<li class="item-content">' +
                  '<div class="item-media"><img src="{{picture}}"></div>' +
                  '<div class="item-inner">' +
                      '<div class="item-title">{{title}}</div>' +
                  '</div>' +
               '</li>'
});

三、页面切换

Framework7主要有两个切换页面的方法：

mainView.router.load(options) - 把一个页面加载到当前视图
mainView.router.back(options) - 这个方法会触发一个反向的动画并回到上一个页面，也就是浏览历史上的回退

主要使用到的参数：
url：需要加载的页面的URL
context：渲染Template7 模板时需要的上下文（模板数据）。
query：页面路由传递的参数
force：只对 back 方法有效。如果设置为 true，那么会忽略浏览历史中的上一个页面，而是直接加载指定的页面。
reload：如果设置为 true，那么不会当做新页面加载，而是直接替换当前视图的当前页面。并且在视图浏览历史中替换最后一条历史。

遇到的问题：
在一个页面更改了数据后，使用back回退到上个页面，页面数据没有刷新

解决：

mainView.router.back({
    url: url,   // 指定回退页面的url
    context: data, // 传递模板数据给指定加载的页面
    force: true  // 设置为true,直接加载指定的页面
});

四、滚动加载

在产品页面有一个“下拉加载数据”的需求，F7有一个“无限滚动”组件，即列表滚动到底部时触发加载函数。最初使用的是这个组件，使用方法：

给div.page-content加上infinite-scroll类

<div class="page">
    <div class="page-content infinite-scroll" data-distance="100">
        ... 
    </div>
</div>

初始化“无限滚动”组件

$$('.infinite-scroll').on('infinite', function () {
    // code...
});

每一次滚动到底部都会执行回调函数里的代码

遇到的问题：

一开始产品页面的div.page-content是嵌套在模板里面，而在产品页面初始化时就已经初始化“无限滚动”组件，所以后来动态生成的div.page-content不能触发“无限滚动”。

解决：优化DOM结构，div.page-content一开始就要在页面中存在。

tab页切换后，滚动触发加载数据时加载到了第一个tab页的列表里。

解决：所有tab栏分类公用一个虚拟列表，切换tab页面时清空当前列表，重新加载指定数据。

一开始没有给虚拟列表高度，它默认是每个条目高度（44px）*条目数量，实际上条目高度大于默认高度，导致ul高度不够影响滚动加载。

解决：给一个固定高度。

有个业务需求是当前类别的数据加载完后，继续下拉添加进一张“当前数据已加载完”的图片，再拉可以在当前列表继续加载其它类别的数据，该图片仍然存在列表中以示分隔。但是虚拟列表的模板是初始化时固定的（只能添加相同模板的数据），列表更新时图片会被清掉。

解决：在虚拟列表下新增一个DOM容器，用来加载图片。图片的容器下新增一个虚拟列表容器，装其它类别的数据。

无线滚动触发条件是列表滚动到底部，没有实现“拖拽加载”的效果。

解决：使用iScroll5插件。

五、其它

1. Rem适配问题

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

例如：

html{
    font-size:20px;
}
div {
    width: 6rem;
    height: 3rem;
}

div的宽 = 6*20 = 120px

使用：

媒体查询适配根元素字号

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

JS动态计算

function tryResize(){
     var docEl=document.documentElement;  
     var clientHeight = docEl.clientWidth;
     if(!clientHeight)
     {
         return
     }
     docEl.style.fontSize=20*(clientHeight/375)+"px"  
 }
 tryResize();
 window.onresize=tryResize;

计算规则：
例如设计稿是375的尺寸，375页面的font-size是20px，那么320的页面呢？320/375 = 0.8533 320是375的0.8533倍，所以320的font-size等于20*0.8533 = 17.0667。

遇到的问题：

部分安卓机型对rem支持不是很好，出现布局错位问题。
解决：根据实际情况来考虑元素是运用rem单位还是百分比或者是flex弹性布局。
文本的字号使用rem会出现小屏字体太小，大屏字体太大的情况
解决：文本字号使用px单位，结合媒体查询

2. 使用require.Js管理js文件

通常我们js写在一个或多个文件里，用<script>标签引入页面，但js文件过多会出现以下丑陋场景：

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>

并且js的加载会阻塞页面渲染，而且由于js文件之间存在依赖关系，必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.Js就是为了解决以上问题。

使用：

去官网下载最新版本，引入页面

<script src="js/require.js" defer async="true"></script>  // async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

全局配置

创建一个main.js

require.config({
    paths : {       // 引用路径
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

然后在页面中使用下面的方式来使用requirejs：

<script src="js/require.js" data-main="js/main" defer async="true"></script>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数

例：

// a.js

define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
  });

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

加载方法如下：

// main.js

require(['a'], function (a){
　　alert(a.add(1,1));
});

加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js怎样加载非规范的模块呢？

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

比如，jQuery的插件可以这样定义：

require.config({
　　　　shim: {
    　　　　'jquery.scroll': {
    　　　　　　deps: ['jquery'],  // 依赖的模块
    　　　　　　exports: 'jQuery.fn.scroll'   // 输出的变量名
    　　　　}
　　    }
　　});

遇到的问题：
使用百度的WebUploader上传组件时，报错找不到 WebUploader 变量。
原因： cdn版本较低
解决：官网下载最新版

使用Framework7 1.6.5开发APP记录

Framework7介绍

一、页面结构

二、Template7 模板

1. 自动编译模板

2. 模板页面

3. 虚拟列表

三、页面切换

四、滚动加载

五、其它

1. Rem适配问题

2. 使用require.Js管理js文件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读