zoukankan      html  css  js  c++  java
  • 微信小程序获取数据、处理数据、绑定数据关键步骤记录

    onload:function(event){
       var inTheatersUrl ="https://api.douban.com"+"/v2/movie/in_theaters"+"?start=0&count=3";
       this.getlistData(inTheatersUrl,inTheaters);
       this.getlistData(inTheatersUrl,comingsoon);
       this.getlistData(inTheatersUrl,top250);
    }
    //请求数据函数 把信息绑定到上面onload里。
    
    getListData:function(url,settedKey){
       var that = this;
       wx.request({
        url:url,
        method:"GET",
      header:{"Content-Type":"json"},
       success:function(res){
        console.log(res.data);//打印是否获取到信息
        that.processData(res.data,settedKey);
         }//res.data作为参数传递
       fail:function(error){console.log(error)}
    });
    }


    //数据处理 绑定数据
    processData: function (movies,settedKey) {
        var movies = [];//
        for (var idx in movies.subjects) {
          var subject = moviesDouban.subjects[idx];
          var title = subject.title;
          if (title.length >= 6) {
            title = title.substring(0, 6) + "...";
          }
          // [1,1,1,1,1] [1,1,1,0,0]
          var temp = {
            stars: util.convertToStarsArray(subject.rating.stars),
            title: title,
            average: subject.rating.average,
            coverageUrl: subject.images.large,
            movieId: subject.id
          }
          movies.push(temp)
        }
       //定义一个空对象 动态加载
    var readyData ={};
    readyData[settedKey]= {movies:movies};
    this.setData(
    
    readyData
    
    movies: movies//加入key之后就不能用movies了
     
    ); }
    
    

    把movies绑定到xml页面中 绑定的时候,页面自上而下绑定

    在list-template

      <block wx:for="{{movies}}" wx:for-item="movie">   //循环,传入movies
         <template is="movieTemplate" data="{{...movie}}"/>
      </block>

    下一级页面就可以直接动态绑定 用{{ }}绑定就可以了

    但是如果是异步加载,怎么确定对应的数据就是自己要加载的数据呢?

    首先定义几个要用的变量,作为区分叫做key//(这个地方还不是完全明白,先记住,以后懂了再来补)

    data:{
    inTheaters: {},
    comingSoon: {},
    top250: {},
    }
    

     把这些key,传递到上面对应的函数中。 

    这样就可以用key对xml绑定data

    movies页面

     <template is="movieListTemplate" data="{{...inTheaters}}" />
     <template is="movieListTemplate" data="{{...comingSoon}}"/>
     <template is="movieGridTemplate" data="{{...searchResult}}"/>

    上面知识点:定义movies空数组

    1、数组对象的作用:使用单独的变量名来存储一系列的值。

    2、创建数组:创建数组为其赋值,然后输出这些值。

    var mycars = new Array();
    mycars[0] ="a";
    mycars[1]="b";
    mycars[2]="c";
    for(i=0;i<mycars.length;i++){
    document.write(mycars[i]+"<br/>");
    }
    //a b c

    3、For...In声明:用来循环输出数组中的元素

    var x;
    var mycars = new Array();
    mycars[0]="a";
    mycars[1]="b";
    mycars[2]="c";
    for(x in mycars){
    document.write(mycars[x]+"<br/>");
    }
    //a b c
  • 相关阅读:
    Android布局控件
    XAMPP里tomcat启动报错:Make sure you have Java JDK or JRE installed and the required ports are free
    poj 北京大学 2014研究生推免上机考试(校内)
    2014北大计算机学科保研直博夏令营上机poj考试
    《C++Primer》第四版学习笔记--持续更新中
    poj1986:Distance Queries
    poj2533:最长上升子序列
    poj1062:昂贵的聘礼
    黑书贪心例题之钓鱼 poj1042:Gone Fishing
    转:最小没出现的整数
  • 原文地址:https://www.cnblogs.com/colorful-paopao1/p/7908249.html
Copyright © 2011-2022 走看看