Android(安卓)开发者从0到1发布一个微信小程序的采坑过程——首页实现（已上线）

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

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

实现的效果如下：

分析实现过程

上图中我划出了三个区域

第一个区域是顶部的导航栏颜色和标题
第二个区域是中间的奖类 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月份会改为查开奖页面）

实现的效果如下：

分析实现过程

第一个区域导航栏颜色和标题的实现

第二个区域奖类的实现

第三个区域菜单栏的实现

更多相关文章

随机推荐