1.

Android开发者从0到1发布一个微信小程序的采坑过程——首页实现Android开发者从0到1发布一个微信小程序的采坑过程——详情页实现Android开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面Android开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面

2.

需要代码可在文末扫码识别二维码，在我的----关于我—可找到我的联系方式。

实现的效果如下：分析实现过程3.

上图中我划出了三个区域

第一个区域是顶部的导航栏颜色和标题第二个区域是中间的奖类item第三个是底部的菜单栏第一个区域导航栏颜色和标题的实现背景色4.

在app.json中找到window字段，添加以下代码即可：该字段主要——定义小程序所有页面的顶部背景颜色，文字颜色定义

"window":{"backgroundColor":"#FC5A5C",//页面背景色"backgroundTextStyle":"light",//下拉loading的样式，仅支持dark/light"navigationBarBackgroundColor":"#FC5A5C",//这里就是设置导航栏背景颜色"navigationBarTextStyle":"white"//导航栏标题颜色，仅支持black/white}5.

app.json中各个属性详细介绍参考：https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#json-%E9%85%8D%E7%BD%AE

时间格式化6.

准确的说应该是当前时间格式化。实现思路如下：

先在utils包下的util添加dateLater方法然后设置导出给外部调用的方法名。在首页的.js文件下导入util.js文件，然后调用util.js中的方法7.

实现的主要代码如下：

在util.js中定义以下方法：/***传入2018-05-11格式化为2018年11月11日周二格式的时间*@paramdates如：2018-11-11*/functiondateLater(dates){letdateObj{};letshow_daynewArray('周日','周一','周二','周三','周四','周五','周六');letdatenewDate(dates);date.setDate(date.getDate());letdaydate.getDay();letyearDatedate.getFullYear();letmonth((date.getMonth()+1)10?("0"+(date.getMonth()+1)):date.getMonth()+1);letdayFormate(date.getDate()10?("0"+date.getDate()):date.getDate());dateObj.timeyearDate+'年'+month+'月'+dayFormate+'日';dateObj.weekshow_day[day];returndateObj;}在util.js底部设置导出的方法名：module.exports{dateLater:dateLater,}在首页的js代码中调用：//显示标题varnew_datenewDate();varyearnew_date.getFullYear();varmonthnew_date.getMonth()+1;vardaynew_date.getDate()varformatDateyear+''+month+''+day;console.log('时间：'+formatDate);varinfosutils.strDateFormatToYearMonthDayWeek(formatDate);wx.setNavigationBarTitle({title:infos,})8.

我整理了一个时间格式化的工具类，有需要的可以联系我，后期也会公开出来。

第二个区域奖类的实现9.

分析可知，这是一个网格布局，网格布局显示的内容是从上到下显示文本，在对应的开奖日期，左上角会显示开奖的角标。由于这里的数据服务器返回都是静态的，为了减少和服务器交互，我就在本地将数据写死了。

数据在data包里面的api.js文件里面vardata[{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是获取奖分类的方法，如果要显示角标上面的数据还需要添加上日期的判断}10.

数据定义好之后，就开始设计页面了，先将静态的布局绘制出来，然后在动态填充数据。

11.

代码结构如下：按照顺序来，先实现第一个也就是每个小的item，然后再实现第二个，也就是网格布局，最后再实现第三步的整合

12.

这其中实现的难点在于template模板的使用以及模板见数据的传递和展示，样式上的难点在于左上角的角标，其他都不算难实现。

第三个区域菜单栏的实现13.

使用小程序提供的tabbar可实现，tabBar的作用如下：

14.

如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面

15.

文档地址如下

16.

主要代码如下：

"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"}]}17.

欢迎老铁扫码体验一波（目前扫码出现可能是查快递页面，这是个人开发者绕过上线提交的页面，12月份会改为查开奖页面）