它是一套基于vuejs的快速APP创建的框架，解决在实际生产环境中遇到的webview之间切换的路由架构。通过对history的监听来同步webview页面，达到与原生app相同的webview功能。
- 底层数据同步的实时性，依赖于
vuejs的所有优势。 - 全继承式开发，包括
webview创建和组建的创建都采用ES6的extends来继承。达到与原生组件相同的代码书写规范。 - 灵活的自定义性，丰富的ui表现组件，再也不用出现
div标签，所有功能都是组件化的。 - 上手度很低，只需要拥有基本的js能力即可操作复杂的逻辑。
框架代码包已上传至npmjs.com，可以通过以下命令来安装：
npm install --save mioxnpm install -g miox-cli安装完毕后使用 mi create 来创建你的应用。这是个简易脚手架，只用来创建项目。但是前提是你必须安装webpack.
npm run dev
用来启动服务
npm run build
用来打包项目
import * as miox from 'miox';
import mioxComponents from 'miox-components';
import requirejs from 'requirejs';
// 安装native组件
mioxComponents(miox);
class IndexPage extends miox.webview {
constructor(){
super();
}
ready(){
return function(){
super.ready && super.ready();
console.log('app rendered:');
console.log(this);
}
}
render(){
return `
<appview>
<appview-head>
<navgation>
<navgation-item left>Menu</navgation-item>
<navgation-item center>MIOX FREAMWORK</navgation-item>
<navgation-item right>Configs</navgation-item>
</navgation>
</appview-head>
<appview-body>
<h1>Welcome to use</h1>
<p>MIOX framework building apps.</p>
</appview-body>
</appview>
`
}
}
ready(function(){
const app = bootstrap({
backgroundColor: '#ccc', //配置背景色
animate: 'drown', // 配置页面间切换的动画
debug: true //在打包时候将这个设置为false
});
// 使用中间件
app.use(function(next){
console.log('use middleware');
setTimeout(next, 5000);
})
// 定义路由
app.define('/', IndexPage);
// or you can write like this:
app.at('/', function(next){
app.publish(IndexPage, next);
});
// use requirejs for async load
app.at('/a/b', function(next){
// do some loading events.
requirejs('http://a.com/b.js', function(b){
app.publish(b, next);
})
})
app.listen();
})随然以上代码看起来比较多，但是分割一下模块就简单很多了。那么，我们继续来看下这些api的作用。
api简介
返回1.0.24版本的Vue对象方法。
返回Promise对象方法，如果浏览器不支持promise的话。
返回内置组件列表
返回原生组件的原声class对象，用于被继承
class TAB extends component {
constructor(){
super();
}
template(){
return `<div class="mx-tab"><slot></slot></div>`
}
}返回中间件继承对象
const app = new bootstrap();
const INDEX = new connect();
INDEX.at('/', function(next){
INDEX.publish(WEBVIEW, next);
});
app.use(INDEX);
app.listen();返回webview原生对象
返回编译组件的方法。比如我们编译一个组件,返回该组件编译后的vue组件配置对象.
const a = Vue.extend(compile(components.cells));
console.log(a);返回EventEmitter;
返回domready的方法。
定义一个内置的全局组件。
class Tab extends component {
constructor(){
super();
}
template(){
return `<div class="tab">tab</div>`;
}
}
define('tab', Tab);或者这样写
define('tab', function(component, components){
class Tab extends component {
constructor(){
super();
}
template(){
return `<div class="tab">tab</div>`;
}
}
return Tab;
})启动一个app服务, 配置参数如下：
backgroundColor默认:'#222',debug默认:false,delimiters默认:["{{", "}}"],unsafeDelimiters默认:["{{{", "}}}"],async默认:true,animate默认:'slide'- {string} slide|fade|scale|drown
- {json}
- forward: {function} 进入动画
- back: {function} 退出动画
一旦创建完毕，将返回一个app对象。
请参阅 http://www.expressjs.com.cn/4x/api.html#app.use
我们的路由中间件同理express的路由中间件。
非严格模式匹配路由规则
path{string | undefined} 路由规则，如果不存在就是/fn{function|router} 路由回调或者路由新中间件对象。如果启用的是新中间件对象，那么此中间件用作路由的分发。
app.use(function(next){
console.log('Hello world!');
next();
})如果是路由分发
const server = new connect();
server.use(function(next){
console.log('Hello world!');
next();
});
app.use(server);严格模式匹配路由规则
path{string | undefined} 路由规则，如果不存在就是/fn匹配回调
app.at('/', function(next){
app.publish(webview, next);
})如果我嘛当前路径是/a/b/c
在非严格模式下 /a 或者/a/b或者/a/b/c都能匹配上当前路径
在严格模式下 /a和/a/b都不能匹配上当前路径，只有/a/b/c能匹配
webview{class} 需要被渲染的webview对象next渲染完毕后的回调
app.publish(webview, next);
connect.publish(webview, next);定义一个简化的路由到webview模板对象
app.define('/a/b/', webview);框架渲染完毕后的事件
app.on('ready', function(){
console.log('ready');
})路由开始匹配前的事件
app.on('route:start', function(){
console.log('route start');
})路由匹配完成后的事件
app.on('route:end', function(){
console.log('route end');
})这2个方法都会重新创建webview来产生页面
这2个方法都会搜索已经存在的url是否匹配上当前需要跳转的url，如果存在，使用后退或者前进，但是方法永远固定。如果没有该url，将会自动创建。
刷新页面
创建一个webview需要继承自原生的webview对象。来看一个例子：
import { webview } from 'miox';
class IndexPageWebview extends webview {
constructor(){
super();
}
// ready和destoryed 方法将同事继承自配置参数
ready(){
return function(){
super.ready && super.ready();
console.log('ready2');
}
}
destoryed(){
return function(){
super.destoryed && super.destoryed();
console.log('destoryed 3')
}
}
methods(methods){
methods.a = function(){
alert(1);
}
return methods;
}
// 我们通过render方法渲染出webview的vue配置对象
render(){
return `<h1 @click="a">11111111</h1>...`;
}
}webview的创建，核心就是编写render返回的模板，其他任何方法都将继承vue配置参数方法，但是都需要return返回值。参数匹配请具体参考 http://cn.vuejs.org/api/
所有组件的编写都基于原生组件对象或者已有组件对象
基于原生
import { component } from 'miox';
class tab extends component {
constructor(){
super();
}
data(){
return { b: 2, c: 3 };
}
computed(computeds){
computeds.a = function(){
return this.b + this.c;
}
return computeds;
}
// 模板化方法
template(){
return `<div>...</div>`
}
props(props, take){
const props = {};
props.main = Boolean;
return props;
}
}所有webview的方法都是vuejs配置参数都变形，变形逻辑如下：
如果我们要配置vuejs的props属性，那么我们使用props的方法来返回数据。这个方法接受1个参数：
source-data原始数据，即这个对象的原始存在数据
如何较好的设计组件，将决定组件的可服用继承性。
我们来看一个已由组件的变化继承：
import { components } from 'miox';
class NewComponent extends components.cells {
constructor(){
super();
}
props(){
props = super.props();
props.keep = Boolean;
return props;
}
}