小程序的模拟实战学习大乐透数据展示,最近在写一个小程序练手。准备做个中国体彩的小程序。公开部分代码及思路。
首先参考了体彩官网: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: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); } }); } }
data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, hlist: [ "玩法", "期号", "开奖号"], hhlist: [ ], dltlist:[], // 大乐透数据 temp1:null }
//调用应用实例的方法获取全局数据 app.getDlt(function (p_data) { //更新数据 that.setData({ dltlist: util.formartdlt(p_data), temp1:util.formartqq(p_data[0].opencode) // 这行暂时没用 }); });
"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 }
开奖公告 {{hlist[1]}} 开奖时间 {{hlist[2]}} {{i.expect}} {{i.opentime}} {{item}} {{item}}
然后可以利用微信的swiper插件进行顶部导航设置就可以了。
代码不是按部就班的学习的,是按照自己想想的业务逻辑,然后去编码才有意思。这就是代码的王道。