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里面的这个案例，果断就把案例直接下载来使用。交给后台开发时被告知“没达到开发要求”，原因：

标签栏应用案例结构：

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

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

其它页面 xxx.html

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

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

二、Template7 模板

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

1. 自动编译模板

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


    
        Hello, my name is {{name}} and i am {{age}} years old {{position}} at {{company}}

模板页面数据：

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
        })  
    }
});

使用情况：

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

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

使用：
1. 去官网下载最新版本，引入页面
```
  // async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
```
1. 全局配置
创建一个main.js
```
require.config({
    paths : {       // 引用路径
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
```
然后在页面中使用下面的方式来使用requirejs：
data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
1. 基本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));
});
```
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. 模板页面

你可能感兴趣的:(使用Framework7 1.6.5开发APP记录)