獨立開發者從0到1釋出一個微信小程式的採坑過程——首頁實現（已上線）

摘要： 需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。 實現的效果如下： 圖片 分析實現過程 上圖中我劃出了三個區域 第一個區域是頂部的導航欄顏色和標題 第二個區域是中間的獎類 item ...

需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。

實現的效果如下：

分析實現過程

上圖中我劃出了三個區域

• 第一個區域是頂部的導航欄顏色和標題
• 第二個區域是中間的獎類 item
• 第三個是底部的選單欄

第一個區域導航欄顏色和標題的實現

• 背景色

在 app.json 中找到 window 欄位，新增以下程式碼即可：

該欄位主要 —— 定義小程式所有頁面的頂部背景顏色，文字顏色定義

"window": {
"backgroundColor": "#FC5A5C",// 頁面背景色
"backgroundTextStyle": "light",// 下拉 loading 的樣式，僅支援 dark / light
"navigationBarBackgroundColor": "#FC5A5C", // 這裡就是設定導航欄背景顏色
"navigationBarTextStyle": "white" // 導航欄標題顏色，僅支援 black / white
}

• 時間格式化

準確的說應該是當前時間格式化。實現思路如下：

• 先在 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月份會改為查開獎頁面）