html framework7视频教程,Framework7 - 入门教程（安装、配置、创建一个H5应用）

1，Framework7介绍

(1)Framework7是一个开源免费的框架。可以用来开发混合移动应用(原生和 HTML混合)或者开发 iOS& Android风格的 WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。

(2)使用时只需要一个基本的 HTML布局，并且把 Framework7的 CSS和 JS文件引入即可！Framework7不会强制你写任何自定义的标签，也不会通过 JS来生成任何额外的内容。你不需要通过 JS或者 JSON来写页面，只需要普通的 HTML就可以。

(3)Framework7有大量可以直接使用的 UI 组件和工具，比如 modals,popup,actionsheet, popover,list views,media lists, tabs, side panels, layout grid, preloader, form elements 等。大部分的组件你都完全不需要写任何 JS 代码。

2，样例效果图

下面通过一个简单的入门样例演示 Framework7的使用，先上效果图。

(1)首页面如下，上下是位置固定的导航栏和工具栏，中间是内容区域(可滚动)

(2)点击导航栏右侧按钮，即可打开左面板。

(3)点击首页上的“跳转到关于页面”链接，即可跳转到新页面。新页面是使用 Ajax加载，完毕后会有回调(我这里弹出个消息框)。同时支持滑动返回(这个是完全跟随手指移动的)

    

    

3，实现步骤

(1)首先上 Framework7官网下载最新的代码，地址：http://framework7.io

(2)我们将 dist文件夹下的 css、img、js复制到我们项目中来。

(3)项目中新建一个首页面index.html，内容如下。

这是一个单页应用，有一个 view、left panel和动态穿透布局的 navbar和 toolbar。

hangge

这里放置左测面板内容。

hangge.com

这里是首页内容。

跳转到“关于”页面

链接1

链接2

(4)“关于”页面(about.html)，通过点击首页上的链接跳转过来。

返回

关于

欢迎访问 www.hangge.com

航歌-做最好的开发者知识平台。分享各种移动应用，桌面应用，web应用等编程开发经验。

随时更新最新的技术文章，值得您每天都来看看。

(5)my-app.js

这里面进行 APP和 View的初始化。同时因为about.html 页面是通过 JS加载的，我们不能通过在 about.html 中添加

// 初始化 app

var myApp = new Framework7();

// 为便于使用，自定义DOM库名字为$$

var $$ = Dom7;

// 添加视图

var mainView = myApp.addView('.view-main', {

// 让这个视图支持动态导航栏

dynamicNavbar: true

});

// 下面代码是给“关于”页面使用的(关于页面加载完毕后触发)

// 方式1：通过页面回调 (推荐):

myApp.onPageInit('about', function (page) {

myApp.alert('"关于"页面加载完毕1!');

})

// 方式2：通过pageInit事件处理所有页面

$$(document).on('pageInit', function (e) {

// 获取页面数据

var page = e.detail.page;

//判断是否是“关于”页面

if (page.name === 'about') {

myApp.alert('"关于"页面加载完毕2!');

}

})

// 方式2：通过pageInit事件处理所有页面(过滤出 data-page 属性为about的页面)

$$(document).on('pageInit', '.page[data-page="about"]', function (e) {

myApp.alert('"关于"页面加载完毕3!');

})

4，运行测试

因为 Framework7是通过 Ajax在不同页面间跳转的，所以你需要启动一个 http服务器才可以(不要直接打开本地文件)。

或者使用 Cordova等第三方工具将页面打包成 App，安装到手机上测试。

5，源码下载：

www.zip