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

TA遠方發表於2019-07-23
前端VueAPPJS框架

相信寫過小程式的程式設計師,都熟悉裡面的框架 跟 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寫寫小程式是完全可以的.


相關文章