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进行对比，用内存中变化的节点替换浏览器中原来的节点，然后让浏览器重新渲染这个节点。