2. Hello World

Hello World

最简单的方法当然是使用我们提供的脚手架来创建第一个实例，但是，我们并不希望这样做。我们需要手动来创建这个实例，加深对Miox的理解。

核心

第一步我们需要引入核心框架。

import Miox from 'miox';
const app = new Miox(...options);

实例化miox构造体对象即可得到一个对于当前页面的操作对象。实例化的同时，我们需要传入一些配置参数(options)：

• max [Object number]:1 在页面上存在最大个数的webview
• popState [Object boolean]:false 是否强制使用popState模式
• session [Object boolean]:false 是否使用sessionStorage来记录层级用于方向判断，弥补history功能限制。
• strict [Object boolean]:true 是否严格模式，用来区分query变化是否重新渲染页面

官方推荐：

如果您在移动端上使用，推荐：

const options = {
    max: 3,
    popState: false,
    session: true,
    strict: false
}

如果您在PC端使用，推荐：

const options = {
    max: 1,
    popState: false,
    session: false,
    strict: true
}

如果您使用SSR模式，推荐：

const options = {
    max: 1,
    popState: true,
    session: false,
    strict: true
}

引擎

页面渲染需要选择渲染引擎，这里我们选择Vue引擎做实例，对应的模块miox-vue2x：

import Engine from 'miox-vue2x';
app.set('engine', Engine);

如果我们还用到了Vuex的话，我们新建一个文件:

vuex.js

import Vue from 'vue';
import Vuex from 'Vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {}
});

我们调用它：

import store from './vuex';
app.set('vuex', store);

通过app.set方式注册引擎。

动画

如果您需要让页面切换具有动画，请引入miox-animation：

import Animate from 'miox-animation';
app.set('animate', Animate('slide'));

路由

miox不依赖miox-router模块，所以我们简单使用作为实例，具体miox-router请看相关文档介绍:

route.js

import Router from 'miox-router';
const route = new Router();
route.patch('/', async ctx => {
    await ctx.render(WebView, args);
});

我们引入这个路由：

import router from './route';
app.use(router.routes());

启动监听服务

一旦启动监听服务，那么页面就已经呈现出来了：

export default app.listen();

完整代码

import Miox from 'miox';
import Engine from 'miox-vue2x';
import Animate from 'miox-animation';
import store from './vuex';
import router from './route';

const app = new Miox(...options);
app.set('engine', Engine);
app.set('vuex', store);
app.set('animate', Animate('slide'));
app.use(router.routes());
export default app.listen();

总结

如此一来，简单的页面就制作完成了。这里没有将怎么去做Webview，因为每个引擎的实现方式不同，需要您自己来实现！不过我可以举一个简单的Vue列子：

webview.vue

<template>
    <div class="page">
        <h1>Hello World!</h1>
    </div>
</template>
<script>
    import { Component, life } from 'miox-vue2x-classify';

    @Component
    export default class Page {
        @life mounted() {
            console.log('Hello World is active');
        }
    }
<script>