Miox-simple NPM

Miox-Simple

process.env.MIOX_ENV = 'server | client | web';

miox的桌面端核心，承载着客户端与服务端双重解决方案。

客户端 提供一个web service服务。它监听history变化，桥接到web service服务上启动路由变化改变渲染层的生命周期。
服务端 SSR 提供一套服务端渲染的机制，利于SEO。

Usage

npm install --save miox-simple

引用后使用最简单的方式来运行(以 VUEJS 为例)

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

Vue.use(Vuex);

import miox from 'miox-simple';
import { Engine, Component, Webview, life } from 'miox-vue2x';

/**
* 数据源，用户存储数据
*/
const store = new Vuex.Store({
    state: {
        value: 'my data'
    },
    mutations: {
        SET_DATA(state, value) {
            state.value = value;
        }
    }
})

/**
* 组件 webview 渲染层
*/
@Component
class Page extends Webview {
    @life mounted() {
        console.log(this.$store.state);
    }
    render(h) {
        return h('h1', 'Hello World!');
    }
}

/**
* miox service 核心服务启动
*/
export default miox(app => {
   app.set('engine', Engine);
   app.set('vuex', store);
   
   app.on('server:start', () => {
       console.log('server:start', new Date().toLocaleString());
   });
   app.on('server:end', () => {
       console.log('server:end', new Date().toLocaleString());
   });
   
   app.use(async (ctx, next) => {
       if (ctx.context) {
            // ssr fetch data
            const data = await ctx.context.fetchData();
            store.commit('SET_DATA', data);
       }
       await ctx.render(Page);
       await next();
   });
   
   app.use(async ctx => {
       if (ctx.context) {
           ctx.context.db.close();
           console.log('db closed')
       }
   })
});

History

启动一个history监听服务，来通知服务进行页面生命周期的切换。该模块核心自动内嵌入服务中，同时也提供了一个触发history改变的方法redirect。

param <String|Number> url

ctx.history.redirect(-1);
ctx.history.redirect(1);
ctx.history.redirect('/a/b/c/d?a=1&b=2');

当参数为数字类型，执行history的forward或者back行为。
当参数为字符串类型，必须是一个 非绝对地址 的跳转链接。

Request

服务的 STDIN 输入口，用于接收环境参数。相见参数编译 NPM:url:api

console.log(ctx.req);

Response

服务的 STDOUT 输出口，用于输出处理行为数据。

console.log(ctx.res);

ctx.res.render 在指定渲染引擎后，该方法将根据引擎提供的规则渲染页面。参数如下：

webview 渲染页面的webview对象，根据引擎的不同，对象类型也不同，具体参看引擎说明。
args 传入的模板数据。

ctx.res.forward 在具体逻辑中使用这个方法将自动跳转到具体页面，参数见 history:redirect

Middleware

一套简易中间件创建模式

import Miox from 'miox-simple';
const middle = new Miox.middleware();
middle.use(fn1, fn2, fn3, ...);
middle.__defineProcessHandle__();
await middle.__processer__(context);

Server Side Render (SSR)

miox也支持服务端渲染。优势在于我们不用改动任意代码，但是需要在书写代码时候注意一些引擎提供的注意点，这里不多做解释，具体什么引擎就有什么规范。

Server Render Data Mock

对服务端渲染数据进行mock。我们以vuejs的vuex为例。

// vuex.js
export default new Vuex.Store({
    state: {
        data: 'demo'
    },
    mutations: {
        set(state, val) {
            state.data = val;
        }
    },
    actions: {
        async SET_DATA({ commit }, { fetch, id, key, value }){
            commit('set', await fetch({
                async client({ ctx }) {
                    return await ctx.ajax.get('http://api.demo.com', { id, key, value });
                },
                async server({ service }) {
                    return await service.getUserInfo(id, key, value);
                }
            }));
        }
    }
});

// route.js
import store from './vuex';
route.patch('/demo/:id(\\d+)', async ctx => {
    const id = Number(ctx.params.id);
    await store.dispatch('SET_DATA', ctx.mock({ 
        id,
        key: 'demoKey',
        value: 'demoValue' 
    }));
    await ctx.render(demoWebview);
})