framework7 入门知识

framework7 v6.0 入门知识

最新文档地址，注意framework7的版本号

https://framework7.io/docs/

一、框架两个主要文件

（一）framework7-bundle.min.js
（二）framework7-bundle.min.css

二、实例化framwork7

（一）路由设置

1、注意引入模块有url，componentUrl，还要异步等方式
2、多级路径必要参数：（父页面）master，（子页面路径参数）detailRoutes

//路由设置
var routes = [{
    //路径名称
    path: '/home/', 
    //文件地）
    url: './pages/home.html',
},{
    //多级页面，设置多级路由
    path: '/detail/',
    url: './pages/detail.html',
    master: true,
    options: {
        animate: false,
    },
    detailRoutes: [{
        path: '/dynamic-route/blog/:blogId/post/:postId/',
        componentUrl: './pages/dynamic-route.html',
    }],
}, {
    //默认路由，匹配所有页面
    path: '(.*)',
    url: './404.html',
}];

（2）设置基本参数，如：主要容器（el），主题（theme）,缓存（cache）,是否开启多级路由等等

//参数设置
var options = {
   // 项目名称
    name: 'My App',
    //主题设置
    theme: 'auto',
    //主要容器
    el: '#app',
    //文件缓存
    cache: false,
    //多级路由缓存，在多页面返回起到关键作用
    view: {
        stackPages: true
    },
    //路由
    routes
}

（二）实例化framework7

//实例化framework7
var app = new Framework7(options)

三、页面结构

如果很好的使用framework7 提供的样式和动效，一定要严格按照他们提要的结构来组织代码

<!--设置主要容器-->
<div id="app">
        <!--设置主要视图区域：view view-main-->
        <div class="view view-main view-init safe-areas">
            <!--设置内容区域：page-->
            <div class="page" data-name="home">
               <!--设置内容展示区域：page-content-->
                <div class="page-content">
                       <!--添加一个按钮，添加样式:class="button button-fill"-->
                      <button class="button button-fill">Button</button>
                </div>
            </div>
        </div>
</div>

四、组件

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Component Page</div>
      </div>
    </div>
    <div class="page-content">

      <div class="block-title">Events Handling</div>
      <div class="block block-strong">
        <a href="#" class="button button-raised" @click=${openAlert}>Open Alert</a>
      </div>
      <div class="block-title">Page Component Data</div>
    
      <div class="block block-strong">
        <p>Hello! My name is ${name}. I am ${age} years old.</p>
        <p>I like to play:</p>
        <ul>
          ${likes.map((item) => $h`
          <li>${item}</li>
          `)}
        </ul>
      </div>
      <div class="block-title Js-title">Extended Context 1</div>
      <f7-link class="setPsd" href="/detail/" ref="setPsd" text="设置密码"></f7-link>
      <div class="block block-strong">
        <p>Component page context as Template7 page context is also extended with some additional variables.</p>
        <h4>$f7route</h4>
        <p>Contains properties of the current route:</p>
        <ul style="padding-left:25px">
          <li><b>$f7route.url</b>: ${$f7route.url}</li>
          <li><b>$f7route.path</b>: ${$f7route.path}</li>
          <li><b>$f7route.params</b>: ${JSON.stringify($f7route.params.blogid)}</li>
          <li><b>$f7route.hash</b>: ${$f7route.hash}</li>
          <li><b>$f7route.query</b>: ${JSON.stringify($f7route.query)}</li>
        </ul>
        <!-- link as button -->
        <button class="button button-fill">Button</button>
        <h4>$theme</h4>
        <p>Currently active theme:</p>
        <ul style="padding-left:25px">
          <li><b>$theme.ios</b>: ${$theme.ios}</li>
          <li><b>$theme.md</b>: ${$theme.md}</li>
          <li><b>$theme.aurora</b>: ${$theme.aurora}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style scoped>
    p {
        color: red;
    }
    
    a {
        text-decoration: none;
    }
</style>
<script>
    export default function(props, {
        $f7,
        $on,
        $onBeforeMount,
        $onMounted,
        $onBeforeUnmount,
        $onUnmounted
    }) {
        let name = '一叶知秋';
        let age = 34;
        let likes = ['台球', '小提琴', '书法'];
        let data = props;

        //组件一旦view，就不能返回了
        var mainview = app.views.create('.view-main');
        const openAlert = () => {
            $f7.dialog.alert('Hello World', function() {
                // mainview.router.back('/form/', {
                //     force: true
                // });
                mainview.router.navigate('/form/', {
                    reloadCurrent: true,
                    ignoreCache: true,
                });
                // console.log('ok');
            });
        }
        return $render;
    }
</script>