framework7 入門（數據獲取和傳遞）

數據獲取

framework7自帶request方法 ,

var app = new Framework7({
...
});
app.request(parameters)

或者

Framework7.request(parameters)

兩者都一樣

一個完整的請求可能長下面這樣

app.request.get(url, data, success, error, dataType) app.request.get("res.xxx", {name:'xxx'}, function(data){ console.log(data); }, function(){ console.log("獲取數據失敗"); }, 'json'); 並不推薦這種方式 推薦下面這種，清晰明了 app.request.get({ url:"res.xxx", data:{name:"xxx"},　　 success:function(data){ console.log(data) }, error:function(){ console.log("數據獲取失敗") }, dataType:"json" });

獲取數據之后就要傳數據，有幾種方法

通過路由

framework7給路由提供一個async方法

routes:[ { path: '/about/',

 //componentUrl:"./pages/about.html",
 async: function (routeTo, routeFrom, resolve, reject) { app.request.get('res.xxx', function (data) { resolve( { componentUrl:"./pages/about.html"   }, 　　　　　　　　　　　　　　　　 { context: { //傳數據 users: data, }, } ); }); } } ]
注意，除非你在 async 方法中執行了 resolve 或 reject ，否則路由請求將會中斷！

about.html 是個 template組件，所以routers  長這樣

{ path:'xxx', componentUrl:"xxx.html" }

如果是個完整的html

{ path:'xxx', url:"xxx.html" }

還有一些別的參數，參考官方文檔

 

async方法可以用在 當用戶未登錄時攔截跳轉，然后導航到登錄頁

在about.html頁我們可以取到這個users

<template>   
 <div class="page"> about <h1>{{Name}}</h1>
    </div>
</template>
<style></style>
<script>
    return{ data:function(){     //數據相關
            let name=this.$route.context.users； return {      //返回要綁定的數據
 Name:name } } } </script>

還可以放在data里

return{ data:function(){ app.request.get({ url:"xxx", ... success:function(data){ var  name=data.name; } }); return { Name:name } } }

 

 看看return

return{ data:function(){ ... }, methods:{ showHello:function(){ app.dialog.alert("Hello"); } }, on:{ //on里面的函數，在不同的生命周期執行 pageMounted:function(e){}, pageInit:function(e){ this.showHello(); }, pageBeforeIn:function(e){}, pageAfterIn:function(e){} } }

這兩種方法會有點問題，當你獲取數據很慢時，會發現你能在pageInit里打印出data，但沒法綁到頁面上，原因在於取到data時 ，頁面已經渲染完成，不會重新渲染，直到3.31版加了個$setState方法，

return{ data:function(){ return { Name:"" } }, methods:{ getData:function(func){ app.request.get({ url:"res.xxx", ... success:function(data){ func(data); } }); } }, on:{ pageInit:function(){ let self=this; self.getDate(function(data){ self.$setState({ Name:data.name }); }); } } }

這樣就不用擔心dom渲染完而數據還沒取到

$setState是用VDOM實現的。我理解的是，頁面渲染時生成一個dom樹，執行$setState時，會在內存中生成一個dom樹，然后對兩個dom進行對比，用內存中變化的節點替換瀏覽器中原來的節點，然后讓瀏覽器重新渲染這個節點。