Framework7 v3 更新了什么?

By admin at 21 天前 • 0人收藏 • 71人看过

Framework7 v3

So what will be changed in Framework7 v3?

First of all, Framework Core (vanilla JS) library basically won’t be affected at all, so it won’t required some migration guide.

Framework7-Vue and Framework7-React GitHub repositories will be deprecated. New Vue/React components will be written as Phenome components, so their source code and compiled results will move to main Framework7 repo. It will help us to keep everything in sync with core lib. But NPM packages (framework7, framework7-vue , framework7-react ) will be still different packages.

Because Phenome is a universal component, so we have refactored FrameworkVue/React plugins and routers to be universal and as much framework agnostic as possible. So some Vue-only “hacks” will be removed or changed to different syntax.

1. Framework7-Vue/React Plugin Installation

At the moment to install and init Framework7 in Vue we do the following:

 Vue  'vue';
 Framework7Vue  'framework7-vue';
 Framework7  'framework7';
Vue.use(Framework7Vue, Framework7);
new Vue({
  el: '#app',
  framework7: {
    }
});

In v3, it is a bit different:

 Vue  'vue';
 Framework7Vue  'framework7-vue';
 Framework7  'framework7';
Framework7.use(Framework7Vue, { Vue });
new Vue({
  el: '#app',
  });

2. Framework7 Initialization

There is no more Framework7 params under framework7 root Vue properties. Now F7 init moves to new f7-app component in your main app template:

<template>
  <f7-app :params="f7Params">
    <f7-statusbar></f7-statusbar>
    <f7-view url="/" :main="true" class="ios-edges"></f7-view>
  </f7-app>
</template>
<script>
  import { f7App, f7Panel, f7View, f7Statusbar } from 'framework7-vue';
  import routes from './routes';
export default {
    components: {
      f7App, f7View, f7Statusbar,
    },
    data() {
      return {
        f7Params: {
          theme: 'auto',
          routes,
          id: 'io.framework7.testapp',
        },
      };
    },
  };
</script>

For React it will be basically the same now:

import React from 'react';
import { App, View, Statusbar } from 'framework7-react';
import routes from './routes';
export default () => (
  <App params={{ theme: 'auto', routes, id: 'io.framework7.testapp' }}>
    <Statusbar />
    <View url="/" main className="ios-edges"/>
  </App>
);

3. onF7Ready Method

onF7Ready Vue component method to execute F7 related API code is also gone away in favour of new$f7ready prototype method which is recommend to use in mounted / componentDidMount hooks:

// Vue Page Component
export default {
  // ...
  mounted() {
    this.$f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    })
  }
}
// React Page Component
export default class extends React.Component {
  // ...
  componentDidMount() {
    this.$f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    })
  }
}

And that is basically all major changes to worry about migrating from v2 to v3.


登录后方可回帖

Loading...