前端移动框架Framework7 入门教程(基础布局)

作者 : 超级管理员 本文共3033个字,预计阅读时间需要8分钟 发布时间: 2021-08-9 共82人阅读

Framework7 – 是一个免费的开源移动 HTML 框架,用于开发具有 iOS 和 Android 原生外观和感觉的混合移动应用程序或 Web 应用程序。它也是必不可少的原型应用程序工具,可以在需要时尽快显示工作应用程序原型。

Framework7 的主要方法是让您有机会轻松、清晰地使用 HTML、CSS 和 JavaScript 创建 iOS 和 Android 应用程序。Framework7 充满了自由。它不会限制您的想象力或以某种方式提供任何解决方案。Framework7 给你自由!

Framework7 并非与所有平台兼容。它只专注于 iOS 和 Google Material 设计,以带来最佳体验和简单性。

强烈建议您熟悉 HTML、CSS 和 JavaScript 的基础知识,以开始使用 Framework7 创建应用程序。

当前文档目前没有涵盖将 Framework7 应用程序编译为 Cordova 应用程序的过程。它是关于 Framework7 以及如何使用它的所有组件。要了解有关如何将 Framework7 应用程序编译为可以在 iOS 和 Google Play 商店发布的混合 Cordova 应用程序的更多信息,请参阅官方 Cordova 文档

Framework7 Kitchen Sink也是一个很好的入门场所,它有很多 Framework7 组件的示例,涵盖了大部分方面。

framework7是个很好的移动端框架,自带路由、下拉刷新、无限加载、时间线、各种dialog、环形图等,基本能满足大部分app的需求,可以和vue,webpack 等各种搭配。

这里讲一下纯framework7

官网 framework7

下载到本地 下载地址

开始使用

demo目录如下

页面:index.html

<!DOCTYPE html>
<html>
  <head>   
    <title>My App</title>   
    <link rel="stylesheet" href="path/to/framework7.min.css">
  </head>
  <body>   
    <div id="app">
       ...
    </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>

页面:my-app.js (初始化项目APP)

 

var app = new Framework7({
  
  root: '#app',
 
  name: 'My App',
 
  id: 'com.myapp.test',
  routes: [],
  // ... other parameters
});

view 代码块

 

<div id="app">
      ...
    <div class="view view-main">     
          <div class="page">
               ...
          </div>
    </div>
      ...
  </div>

初始化view

var mainView = app.views.create('.view-main');

多个view

 

<div id="app">    ...
       <div class="views tabs ios-edges">

          <!-- Toolbar -->
          <div class="toolbar tabbar-labels toolbar-bottom-md">
                <div class="toolbar-inner">
                    <a href="#view-1" class="tab-link tab-link-active">
                        <i class="icon f7-icons ios-only lazy">home_fill</i>
                        <i class="icon material-icons md-only">home</i>
                        <span class="tabbar-label">首页</span>
                    </a>
                    <a href="#view-2" class="tab-link">
                        <i class="icon f7-icons ios-only">cloud_fill</i>
                        <i class="icon material-icons md-only">cloud</i>
                        <span class="tabbar-label">出行</span>
                    </a>
                    <a href="#view-3" class="tab-link">
                        <i class="icon f7-icons ios-only">book_fill</i>
                        <i class="icon material-icons md-only">book</i>
                        <span class="tabbar-label">发现</span>
                    </a>
                    <a href="#view-4" class="tab-link">
                        <i class="icon f7-icons ios-only">person_fill</i>
                        <i class="icon material-icons md-only">person</i>
                        <span class="tabbar-label">我的</span>
                    </a>

                </div>
            </div>
            <div id="view-1" class="view view-main tab tab-active"></div>
               
            <div id="view-2" class="view tab"></div>
               
            <div id="view-3" class="view tab"></div>

            <div id="view-4" class="view tab"></div>
        </div>
    </div>

注意,toolbar 和view是在同一级,

多个视图必须用 <div class=”views”> 包起来,

tabs 也是必须的,不然页面不会切换

 

 

初始化view之前先给view添加内容,这里没有把内容直接写在index.html里,官方有各种写法,这里讲一下 template  

页面:page1.html

<template>
    <div class="page">
        这里是View1
    </div>
</template>
<style>
...
</style>
<script>
    return{
        ...
    }
</script>

注意,template只能有一个子元素,

return{}是必须的,

你可能需要navbar、toolbar 或者 panle,都可以写在<div class=”page”>里

routes

routes:[
  {
    path: '/abc1/',  
    componentUrl:"pages/page1.html"
  },
 {
    path: '/abc2/',  
    componentUrl:"pages/page2.html"
  },
 {
    path: '/abc3/',  
    componentUrl:../pages/page3.html
  },
 {
    path: '/abc4/',  
    componentUrl:"pages/page4.html"
  }
]

初始化view

var View1=app.views.create("#view-1",{url:"/abc1/"});
var View2=app.views.create("#view-2",{url:"/abc2/"});
var View3=app.views.create("#view-3",{url:"/abc3/"});
var View4=app.views.create("#view-4",{url:"/abc4/"});

一个简单的项目就可以运行啦!

 

本站所发布的资源均来源于互联网,仅限用于研究学习,不得将软件用于商业或者非法用途,否则一切后果请用户自负!如果侵犯了您的权益请与我们联系!您必须在下载后的24个小时之内,从您的手机和电脑中彻底删除。 如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请与我们联系处理!
互利网 » 前端移动框架Framework7 入门教程(基础布局)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整:可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

发表评论