小程序的模拟实战学习大乐透数据展示

最近在写一个小程序练手。准备做个中国体彩的小程序。公开部分代码及思路。

首先参考了体彩官网：http://www.lottery.gov.cn

/

准备采用这种风格。制作如下：

：

首先需要找到json的免费api接口：http://f.apiplus.net/dlt.json 这个是我度娘查到的一个 数据如下：

{"rows":5,"code":"dlt","info":"免费接口随机延迟3-6分钟，实时接口请访问opencai.net或QQ:23081452(注明彩票或API)","data":[{"expect":"2017107","opencode":"04,10,19,25,27+06,12","opentime":"2017-09-13 20:33:20","opentimestamp":1505306000},{"expect":"2017106","opencode":"09,12,18,23,29+02,04","opentime":"2017-09-11 20:33:20","opentimestamp":1505133200},{"expect":"2017105","opencode":"04,15,22,24,32+02,09","opentime":"2017-09-09 20:33:20","opentimestamp":1504960400},{"expect":"2017104","opencode":"09,11,22,27,30+09,11","opentime":"2017-09-06 20:33:20","opentimestamp":1504701200},{"expect":"2017103","opencode":"04,19,20,24,29+03,04","opentime":"2017-09-04 20:33:20","opentimestamp":1504528400}]}

准备工作已经就绪，然后剩下的就是编写代码了：

在app.js中的全局数据加入dlt属性

  globalData: {
    userInfo: null,
    dlt:null
  }

制作方法getdlt获取api数据：

  getDlt:function(cb){
    var that = this;
    if (this.globalData.dlt) {
      typeof cb == "function" && cb(this.globalData.dlt)
    } else {
      // 数据获取
      wx.request({
        url: 'http://f.apiplus.net/dlt.json',
        data: {},
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          that.globalData.dlt = res.data.data;
          console.log(res.data);
          typeof cb == "function" && cb(that.globalData.dlt);
        }
      });

    }
  }

然后再index.js中的onload方法中调用app全局的getDit函数。并在函数中绑定局部datascope的dltlist大乐透。

 data: {  
    /** 
        * 页面配置 
        */  
    winWidth: 0,  
    winHeight: 0,  
    // tab切换  
    currentTab: 0,  
    hlist: [ "玩法", "期号", "开奖号"],
    hhlist: [ ],
    dltlist:[], // 大乐透数据
    temp1:null
  }

onload中调用app如下：

    //调用应用实例的方法获取全局数据
    app.getDlt(function (p_data) {
      //更新数据
      that.setData({
        dltlist: util.formartdlt(p_data),
        temp1:util.formartqq(p_data[0].opencode) // 这行暂时没用
      });

    });

从api中获取的数据需要进行修改例如：

"opencode":"04,10,19,25,27+06,12" 转换 

"opencode":【04,10,19,25,27,06,12】

"opentime":"2017-09-13 20:33:20" 转换 

"opentime":"2017-09-13"

这样有助于最终的显示。

在util中加入模块函数进行转换

function formatqq(str){

  var arr = str.split("+");
  var arrnew = new Array();
  if (Object.prototype.toString.call(arr) === '[object Array]') {
    arrnew = arrnew.concat(arr[0].split(","));
    arrnew = arrnew.concat(arr[1].split(","));

  } else {
  
 



  }
  return arrnew;
}

function formartdlt(data){
  data.forEach(function(i, n){
    i.opentime = i.opentime.substr(0, 10);
    i.temp1 = formatqq(i.opencode);
  });

  return data;
}
module.exports = {
  formatTime: formatTime,
  formatNumber: formatNumber,
  formartqq: formatqq,
  formartdlt: formartdlt
}

剩下的部分就是页面的数据渲染了。基本就是循环和判断进行大乐透api的分解显示了。代码如下：

    
      开奖公告
      
        
          {{hlist[1]}}
          开奖时间
          {{hlist[2]}}
        
        
          
            {{i.expect}}
            {{i.opentime}}

            
              
                {{item}}
                {{item}}

              

            

          
        

然后可以利用微信的swiper插件进行顶部导航设置就可以了。

代码不是按部就班的学习的，是按照自己想想的业务逻辑，然后去编码才有意思。这就是代码的王道。