前端自写vue.app.js 小程序框架

相信写过小程序的程序员,都熟悉里面的框架跟 Vue.js 框架很像吧, 那么, TA远方就自己捣鼓了一个像模像样的框架, 一个雏形, 值得大家看一看, 有什么问题,下面留言

首先,在HTML页面需要先引用 vue.js 脚本, 再引用TA远方亲自写的vue.app.js脚本, 源代码如下:

var VM = null; 
if (typeof app == 'object') { 
    app.setTitle = function (title) { 
        let titlebar = document.getElementById('headerTitle'); 
        titlebar.innerHTML = title; 
        let bodyContent = titlebar.parentNode; 
        bodyContent.classList.toggle('mypin-hidden', false); 
        bodyContent.nextElementSibling.classList.toggle('m_content_after_titlebar', true); 
    }; 
    let methods = {}; 
    for (let fun in app) { 
        switch (fun) { 
            case 'data': 
            case 'onLoad': 
            case 'onShow': 
            case 'onHidden': 
            case 'dataListener': continue; 
            default: methods[fun] = app[fun]; 
        } 
    } 
    VM = new Vue({ 
        el: '#app', 
        data: app.data, 
        methods: methods, mounted() { 
            if (typeof app.onLoad == 'function') app.onLoad(); 
            if (typeof app.onShow == 'function') app.onShow(); 
            document.addEventListener('visibilitychange', function () { 
                if (document.hidden && typeof app.onHidden == 'function') app.onHidden(); 
                else if (!document.hidden && typeof app.onShow == 'function') app.onShow(); 
            }); 
        }, 
        watch: app.dataListener 
    }); 
}

有了上面的基础, 接下来,就写小程序类似的逻辑处理

<html>
<head>
    <title>小程序</title>
    <script src="vue.min.js"></script>
    <script src="vue.app.js"></script>
</head>
<body>
    <div class="m_header_titlebar mypin-hidden">
        <a href="javascript:history.go(-1);" class="m_btn m_btn-left-back"></a>
        <span id="headerTitle">标题栏</span>
    </div>
<div id='app'>
    <h1>你好! {{a}}</h2>
    <hr/>
    <form>
        <input type='text' v-model='a'>
        <button v-click:'bindOnClick()'>点我</button>

    </form>
</div>
<script>
var app = {
    data:{
        a : 'hello world'
    },
    onLoad(){
        //console.log('onLoad');
        // 小程序加载事件
        //app.setTitle("设置小程序标题");
    },    onShow(){
        //console.log('onShow');
        // 小程序页面显示事件
    },    onHidden(){
        //console.log('onHidden');
        // 小程序页面隐藏事件
    },    dataListener: {
        a : function(new, old){
            //console.log('数据改变监听 变量a改变前:'+old + ' 改变后:'+new);
        }
    },    myFunction(){
        // 可以自定义的方法myFunction
        // 想小程序那样,自定义方法写多少就用多少
    },
    bindOnClick(){
        // 自定义的点击方法
        alert('Hello');
    }
};
</script>
</body>
</html>

以上是基本的实现, 可以自行扩展, 以下是请求的扩展,类似小程序的request( )方法

首先,需要引入axios.js 脚本,类似jquery.ajax的支持, 而axios比较简单好用

<script src='axios.js'></script>
<script>
axios.post(url, postData).then(function (response) {
                let res = response.data;
                if (res == 0) console.log('更新成功');
                else console.log('更新失败');
                //console.log(res);
            }).catch(function (error) {
                //console.error('请求异常都会出现在这里');
                debugger;
            }
);
</script>

可以看来, Vue写写小程序是完全可以的.