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

左手的ㄟ右手 2022-06-08 03:56 243阅读 0赞

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

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

/![Center][]

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

：![SouthEast][]

首先需要找到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中加入模块函数进行转换

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

<view class="t1" style="">
          <text style="font-weight:bold">开奖公告</text>
          <view class="table">
            <view class="tr">
              <view class="th" style="width:10%">{
       {hlist[1]}}</view>
              <view class="th">开奖时间</view>
              <view class="th">{
       {hlist[2]}}</view>
            </view>
            <block wx:for="{
       {dltlist}}" wx:for-item="i">
              <view class="tr" style="width:auto;font-size:0.7em;line-height: 24px;">
                <view class="td">{
       {i.expect}}</view>
                <view class="td">{
       {i.opentime}}</view>
    
                <view class="td" style="color:white;font-weight:bold">
                  <block wx:for="{
       {i.temp1}}">
                    <view wx:if="{
       {index < 5}}" style="display:table-cell;background:url('http://www.lottery.gov.cn/res/images/tcdlt/chengse.png') no-repeat;width:24px;height:24px;">{
       {item}}</view>
                    <view wx:elif="{
       {index >= 5}}" style="display:table-cell;background:url(' http://www.lottery.gov.cn/res/images/tcdlt/lvse.png') no-repeat;width:24px;height:24px;">{
       {item}}</view>
    
                  </block>
    
                </view>
    
              </view>
            </block>

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

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

[Center]: /images/20220608/c687ad8bbfff49c2ba638f96d3501cb8.png
[SouthEast]: /images/20220608/c352b8e68e424b1eb6b70db97d1b11e6.png
[mad.gif]: /images/20220608/cdc135aa7464484082a7c653b4d171dd.png