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

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

首先参考了体彩官网：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】

"opent
4000
ime":"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的分解显示了。代码如下：

<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插件进行顶部导航设置就可以了。


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