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