需要代码可在文末扫码识别二维码，在我的----关于我---可找到我的联系方式。
实现的效果如下：
图片
分析实现过程
上图中我划出了三个区域
- 第一个区域是顶部的导航栏颜色和标题
- 第二个区域是中间的奖类 item
- 第三个是底部的菜单栏
第一个区域导航栏颜色和标题的实现
- 背景色
在 app.json 中找到 window 字段，添加以下代码即可：
该字段主要 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义
"window": {
"backgroundColor": "#FC5A5C", // 页面背景色
"backgroundTextStyle": "light", // 下拉 loading 的样式，仅支持 dark / light
"navigationBarBackgroundColor": "#FC5A5C", // 这里就是设置导航栏背景颜色
"navigationBarTextStyle": "white" // 导航栏标题颜色，仅支持 black / white
}
app.json 中各个属性详细介绍参考：
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#json-%E9%85%8D%E7%BD%AE
- 时间格式化
准确的说应该是当前时间格式化。实现思路如下：
- 先在 utils 包下的 util 添加 dateLater 方法然后设置导出给外部调用的方法名。
- 在 首页的 .js 文件下 导入 util.js 文件，然后调用 util.js 中的方法
实现的主要代码如下：
在 util.js 中定义以下方法：
/**
* 传入 2018-05-11 格式化为 2018年11月11日 周二 格式的时间
* @param dates 如：2018-11-11
*/
function dateLater(dates) {
let dateObj = {};
let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
let date = new Date(dates);
date.setDate(date.getDate());
let day = date.getDay();
let yearDate = date.getFullYear();
let month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
let dayFormate = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
dateObj.time = yearDate + '年' + month + '月' + dayFormate + '日';
dateObj.week = show_day[day];
return dateObj;
}
在 util.js 底部设置导出的方法名：
module.exports = {
dateLater: dateLater,
}
在首页的 js 代码中调用：
// 显示标题
var new_date = new Date();
var year = new_date.getFullYear();
var month = new_date.getMonth() + 1;
var day = new_date.getDate()
var formatDate = year +''+ month +''+ day;
console.log('时间：'+formatDate);
var infos = utils.strDateFormatToYearMonthDayWeek(formatDate);
wx.setNavigationBarTitle({
title: infos,
})
我整理了一个时间格式化的工具类，有需要的可以联系我，后期也会公开出来。
第二个区域奖类的实现
分析可知，这是一个网格布局，网格布局显示的内容是从上到下显示文本，在对应的开奖日期，左上角会显示开奖的角标。由于这里的数据服务器返回都是静态的，为了减少和服务器交互，我就在本地将数据写死了。
数据在 data 包里面的 api.js 文件里面
var data = [
{
lottery_id: 'ssq',
lottery_name: '双色球',
lottery_type_id: '1',
remarks: '每周二、四、日开奖',
show_bubble: show_bubble_ssq
},
{
lottery_id: 'qxc',
lottery_name: '七星彩',
lottery_type_id: '2',
remarks: '每周二、五、日开奖',
show_bubble: show_bubble_qxc
},
{
lottery_id: 'dlt',
lottery_name: '超级大乐透',
lottery_type_id: '2',
remarks: '每周一、三、六开奖',
show_bubble: show_bubble_dlt
},
{
lottery_id: 'qlc',
lottery_name: '七乐彩',
lottery_type_id: '1',
remarks: '每周一、三、五开奖',
show_bubble: show_bubble_qlc
},
{
lottery_id: 'fcsd',
lottery_name: '福彩3D',
lottery_type_id: '1',
remarks: '每日开奖',
show_bubble: show_bubble_fc
},
{
lottery_id: 'pls',
lottery_name: '排列三',
lottery_type_id: '2',
remarks: '每日开奖',
show_bubble: show_bubble_pls
},
{
lottery_id: 'plw',
lottery_name: '排列五',
lottery_type_id: '2',
remarks: '每日开奖',
show_bubble: show_bubble_plw
}
];
//对外提供接口 需要暴露在外面才能调用
module.exports = {
getLotteryTypeUrl: getLotteryTypeUrl,// getLotteryTypeUrl 是获取奖分类的方法，如果要显示角标上面的数据还需要添加上日期的判断
}
数据定义好之后，就开始设计页面了，先将静态的布局绘制出来，然后在动态填充数据。
代码结构如下：按照顺序来，先实现第一个也就是每个小的 item，然后再实现第二个，也就是网格布局，最后再实现第三步的整合
图片
这其中实现的难点在于 template 模板的使用以及模板见数据的传递和展示，样式上的难点在于左上角的角标，其他都不算难实现。
第三个区域菜单栏的实现
使用 小程序提供的 tabbar 可实现，tabBar 的作用如下：
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
主要代码如下：
"tabBar": {
"selectedColor": "#FC5A5C", // tab 上的文字选中时的颜色
"backgroungColor": "#F7AF41", // tab 的背景色
"borderStyle": "white", // tabbar上边框的颜色， 仅支持 black / white
"list": [ //tab 的列表，最少2个、最多5个 tab
{
"pagePath": "pages/lottery/lottery", // 页面路径，必须在 pages 中先定义
"text": "首页", // tab 上按钮文字
"iconPath": "images/bar/home_un_select.png", // 图片路径
"selectedIconPath": "images/bar/home_select.png" // 选中的图片路径
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "images/bar/mine_un_select.png",
"selectedIconPath": "images/bar/mine_select.png"
}
]
}
欢迎老铁扫码体验一波（目前扫码出现可能是查快递页面，这是个人开发者绕过上线提交的页面，12月份会改为查开奖页面）
图片
网友评论