移动端安卓和IOS开发框架Framework7使用及打包

zaixianshouce

浏览: 254914 次

最近访客更多访客>>

libian339

hanxin830311

hwp81226

Lucifer-luci

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Framework7

Framework7

基本布局

在这个基本APP中我们使用iOS主题。

我们首选需要创建一个 index.html 文件。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My App</title>
<link rel="stylesheet" href="path/to/framework7.ios.min.css">
<link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">
<link rel="stylesheet" href="path/to/my-app.css">
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Awesome App</div>
<div class="right">
<!--
Right link contains only icon - additional "icon-only" class
Additional "open-panel" class tells app to open panel when we click on this link
-->
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
</div>
</div>
</div>
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<p>Page content goes here</p>
<a href="about.html">About app</a>
</div>
</div>
</div>
<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="path/to/framework7.min.js"></script>
<script type="text/javascript" src="path/to/my-app.js"></script>
</body>
</html>

复制

初始化APP

我们写好布局，引用了 Framework7 的JS和CSS之后，我们需要初始化 APP 和 View.

在我们的 my-app.js 文件中这样写：

// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});

复制

再添加一个Page

我们添加一个 "about app"页面，放在 about.html 文件中

<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link">
<i class="icon icon-back-blue"></i>
<span>Back</span>
</a>
</div>
<div class="center sliding">About</div>
<div class="right">
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
</div>
</div>
</div>
<div class="pages">
<div data-page="about" class="page">
<div class="page-content">
<div class="content-block">
<p>Here is About page!</p>
<p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
</div>
</div>
</div>
</div>

复制

给about页面添加JS代码

假设我们需要在 about 页面中执行JS代码。因为 about.html 页面是通过JS加载的，我们不能通过在 about.html 中添加 <script> 标签的方式来添加JS代码，因为script标签会直接被忽略。所说，Framework7 提供了简单的回调函数，我们可以在 my-app.js中使用：

// Initialize app and store it to myApp variable for futher access to its methods
var myApp = new Framework7();
// We need to use custom DOM library, let's save it to $$ variable:
var $$ = Framework7.$;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});
// Now we need to run the code that will be executed only for About page.
// For this case we need to add event listener for "pageInit" event
// Option 1. Using one 'pageInit' event handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
if (page.name === 'about') {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
}
})
// Option 2. Using live 'pageInit' event handlers for each page
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
})

复制

引入文件

<link rel="stylesheet" href="framework7.ios.min.css">
<link rel="stylesheet" href="framework7.ios.colors.min.css">
<script type="text/javascript" src="framework7.min.js"></script>

复制

在线实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My App</title>
<link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="//ku.shouce.ren/libs/fk7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page">
<div class="page-content">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="center">Static Navbar</div>
<div class="right"></div>
</div>
</div>
<div class="content-block">
<p><a href="/api/framework7/bars-static-about.html">About page</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. Sed posuere a orci id imperdiet.</p>
</div>
<div class="toolbar">
<div class="toolbar-inner"><a href="#" class="link">Hello</a><a href="#" class="link">World</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//ku.shouce.ren/libs/fk7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view');
</script>
</body>
</html

复制

效果预览

打包安装

使用DCloud+Framework7打包制作移动APP应用

1
顶

1
踩

分享到：

移动端安卓和IOS开发框架Framework7教程- ... | 移动端安卓和IOS开发框架Framework7简介及 ...

2016-05-05 16:24
浏览 1905
评论(0)
分类:移动开发
查看更多

发表评论

文章已被作者锁定，不允许评论。

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

移动端安卓和IOS开发框架Framework7使用及打包

基本布局

初始化APP

再添加一个Page

给about页面添加JS代码

引入文件

在线实例

打包安装

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

移动端安卓和IOS开发框架Framework7使用及打包

基本布局

初始化APP

再添加一个Page

给about页面添加JS代码

引入文件

在线实例

打包安装

评论

发表评论

相关推荐

移动端安卓和IOS开发框架Framework7教程-Template7 示例

移动端安卓和IOS开发框架Framework7教程-Color Themes

移动端安卓和IOS开发框架Framework7教程-表单存储(form storage)

移动端安卓和IOS开发框架Framework7教程-表单数据

移动端安卓和IOS开发框架Framework7教程-表单数据

移动端安卓和IOS开发框架Framework7教程-Smart Select

移动端安卓和IOS开发框架Framework7教程-单选和复选按钮

移动端安卓和IOS开发框架Framework7教程-表单布局

移动端安卓和IOS开发框架Framework7教程-可排序列表（Sortable List）

移动端安卓和IOS开发框架Framework7教程-滑动操作列表（可滑动列表）

移动端安卓和IOS开发框架Framework7教程-多媒体列表（Media List View）

移动端安卓和IOS开发框架Framework7教程-列表（表格）

移动端安卓和IOS开发框架Framework7教程-登陆屏

移动端安卓和IOS开发框架Framework7教程-Picker Modal

移动端安卓和IOS开发框架Framework7教程-Popover 布局

移动端安卓和IOS开发框架Framework7教程-Popover 布局

移动端安卓和IOS开发框架Framework7教程-Popup

移动端安卓和IOS开发框架Framework7教程-动态导航栏

移动端安卓和IOS开发框架Framework7教程-动态导航栏

移动端安卓和IOS开发框架Framework7教程-导航栏&工具栏布局

最近访客更多访客>>