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

時間 2019-11-07

標籤前端 vue.app.js vue app 程序框架欄目 JavaScript 简体版

原文原文鏈接

相信寫太小程序的程序員,都熟悉裏面的框架跟 Vue.js 框架很像吧, 那麼, TA遠方就本身搗鼓了一個像模像樣的框架, 一個雛形, 值得你們看一看, 有什麼問題,下面留言javascript

首先,在HTML頁面須要先引用 vue.js 腳本, 再引用TA遠方親自寫的vue.app.js腳本, 源代碼以下:html

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 
    }); 
}複製代碼

有了上面的基礎, 接下來,就寫小程序相似的邏輯處理vue

<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( )方法java

首先,須要引入axios.js 腳本,相似jquery.ajax的支持, 而axios比較簡單好用jquery

<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寫寫小程序是徹底能夠的.ios