《易打卡》—— 精準定位，一鍵打卡，記錄便捷匯出，排名實時更新，戒掉遲到，換你高效人生！這款小程式是在微信內測開始時期就一邊學習一邊開發，開發過程中也是隨著微信小程式的功能以及API迭代而不斷更新調整產品的形態與功能。http://www.see-source.com/weixinwidget/detail.html?wid=170

此次的開發總結，將會把我在整個開發過程中遇到的問題以及解決方法和開發技巧跟大家分享，希望能夠幫助想要從事開發小程式的小夥伴。

掃一掃右上方二維碼（或搜尋小程式：易打卡），即可體驗小程式。

最近一個月的資料分析如圖：

一、準備階段

1.1 微信小程式接入

在微信公眾平臺官網首頁（mp.weixin.qq.com）點選右上角的“立即註冊”按鈕。

1.2 獲取小程式AppID

選單 -> 設定 -> 開發設定

1.3 繫結開發者

通過使用者身份管理可以繫結開發者，開發者總共可繫結20個，體驗者可以繫結40個。tips：這比最初期10個開發者和20個體驗者數量都有所提高。

選單 -> 使用者身份 -> 開發者

1.4 MINA 框架知識儲備

這裡分享一下我的學習整理，幫助大家對框架有個整體的認識。

1.4.1 微信小程式 MINA框架

小程式開發框架的目標是通過儘可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。框架提供了自己的檢視層描述語言 WXML 和 WXSS，以及基於 JavaScript 的邏輯層框架，並在檢視層與邏輯層間提供了資料傳輸和事件系統，可以讓開發者可以方便的聚焦於資料與邏輯上。

1.4.2 微信小程式 元件

框架為開發者提供了一系列基礎元件，開發者可以通過組合這些基礎元件進行快速開發。

什麼是元件：

• 元件是檢視層的基本組成單元。

• 元件自帶一些功能與微信風格的樣式。

• 一個元件通常包括開始標籤和結束標籤，屬性用來修飾這個元件，內容在兩個標籤之內。

<tagname property="value">
  Content goes here ...</tagename>

注意：所有元件與屬性都是小寫，以連字元-連線

1.4.3 微信小程式 API

框架提供豐富的微信原生API，可以方便的調起微信提供的能力，如獲取使用者資訊，本地儲存，支付功能等。

說明：

• wx.on 開頭的 API 是監聽某個事件發生的API介面，接受一個 CALLBACK 函式作為引數。當該事件觸發時，會呼叫 CALLBACK 函式。

• 如未特殊約定，其他 API 介面都接受一個OBJECT作為引數。

• OBJECT中可以指定success, fail, complete來接收介面呼叫結果。

1.5 下載並安裝開發工具

為了幫助開發者簡單和高效地開發微信小程式，微信推出了全新的 開發者工具 ，集成了開發除錯、程式碼編輯及程式釋出等功能。

二、產品階段

2.1 產品調研

小程式方向研究：小程式短期內並不會取代APP，低頻、非剛需場景的長尾服務提供者最適合來做微信小程式;

小程式定位分析：適合做小程式的產品方向為個人資訊管理、金融服務、便捷生活、電子商務、遊戲、新聞;

小程式總結建議：建議從汽車資訊、美食、日曆、個人資訊管理、生活服務幾個方向優先考慮;

通過腦暴選擇了試手專案：易打卡

2.2 產品需求分析

產品核心需求：

快速打卡 —— 快速檢視需要需要打卡的任務，並完成打卡任務
任務管理 —— 管理所有任務，並可以新建任務
個人中心 —— 用於帳號的設定、掃一掃、關於等頁面

2.3 產品原型

第一版原型圖

三、設計階段

3.1 LOGO

第一版　　　　　第二版

3.2 視覺互動規範

3.3 優化細節

快速打卡優化過程

基於頁面上下的比重考慮，將頁卡的資訊部分下移。左右滑動提示箭頭去掉，因為大多數人見到頁卡數字，自然會知道頁面可以滑動，去掉之後讓頁面更簡潔。距離資訊的提示提出來，增加定位的一些icon的提示圖示。中心的較大的打卡增加使用者吸引力，在打卡的時候增加綠色外環的動態效果，增強使用者互動。

tab中的細節優化部分在與旋轉翻轉效果，而且icon的線條粗細調整為3px。

四、開發階段

4.1 前端

原始碼檔案結構如下：

小程式配置：

功能點分析：

1. 頁面滑動元件的使用Swiper

2. 打卡簽到動效使用CSS3

3. 列表渲染，資料繫結，模版，事件，引用以及內部頁面的跳轉navigator的的使用，這裡以任務管理為例子說明

Swiper

滑動元件Swiper的頁面結構及屬性設定

CSS3 transform: rotate(deg)

打卡動效的頁面結構

頁面WXSS樣式：

頁面sign.js：

任務管理頁面截圖：

navigator

新建打卡任務使用技能，學會navigator的使用即可，其中事件繫結使用bindtap（官方沒有明確說明，這裡為了繫結上報資料還是這麼寫了），跳轉的url配置為頁面路徑，hover-class用於自定義頁面hover效果樣式

Block、wx：for、wx：if

新建打卡任務使用技能，學會navigator的使用即可，其中事件繫結使用bindtap（官方沒有明確說明，這裡為了繫結上報資料還是這麼寫了），跳轉的url配置為頁面路徑，hover-class用於自定義頁面hover效果樣式

頁面結構：

事件繫結 bindtap

頁面結構：

頁面task.js：

4.2 後端

後臺伺服器架構：

後端API介面：

後端 API 列表

任務（api/task)

• query params

• taskID string

• openId [string]（和taskID選填一個）

• return

• ?taskID：[object] 返回某個taskID的任務詳情

• ?openId：[array] 返回某個使用者的所有任務資訊

• request body

• name [string] 任務名稱

• address [string] 地點

• startTime[date] 開始時間

• endTime[date] 結束時間

• signTime[time] 應該簽到的時間

• longitude[float] 經度

• latitude[float] 緯度

• userInfo[object]{openId:,nickName:,avatarUrl:} 成員列表，openId 欄位必填

• repeat[object]{"monday":0,"tuesday":1,…} 有效的日期，0為無效，1為有效

• return

• taskID [string] 被建立任務的taskID

• name [string] 被建立任務的任務名稱

• request params

• taskID [string]，需要被新增使用者的任務ID

• request body

• openId [string] (必填) 被新增使用者的openId

• nickName [string] 被新增使用者的暱稱

• request params

• taskID [string]，需要被刪除使用者的任務ID

• openId [string]，需要被刪除的使用者

簽到（api/sign)

• query params

• time long 時間戳。上傳簽到時的本地時間，用於與伺服器時間對比，防止使用者本地篡改時間

• request body

• 任務ID:taskIDstring

• openId:openIdstring

• 經度:longitudefloat

• 緯度:latitudefloat

• 說:saystring

• query params

• limit number 返回條數限制，不填該引數預設返回 50 條

• taskID [string] （必填）任務ID，篩選返回結果為某個任務的簽到情況

• openId [string] （type=individual時，必填；其他情況下，不需填寫）openId，篩選返回結果為某個使用者的簽到情況

• startDate [string] {2016-01-11} （必填）開始時間，篩選返回結果為開始時間之後的簽到情況

• endDate [string] {2016-11-01}（必填）結束時間，篩選返回結果為結束時間之後的簽到情況

• type [string] {daily,all,individual}（必填）查詢型別，轉換籤到情況為某種型別的統計資料

• detail [string] {simple,late,leave,absent,ontime}（type=individual 時，必填）查詢細節，轉換個人簽到結果為某種型別的統計資料

• return

• ?type=daily 某一天某個任務全體的成員的最新打卡情況

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-01&taskID=583b9f0f7e98394e341f6c28&type=daily

• 備註：startDate 與 endDate 需一致

• 返回值 [Object]

{
  ontime [number] 準時簽到的人數
  late [number] 遲到簽到的人數
  leave [number] 請假的人數
  absent [number] 未打卡的人數
}

• ?type=all 某個時間段某個任務所有成員的簽到情況統計

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-31&taskID=583b9f0f7e98394e341f6c28&type=all

• 返回值 [Array]

[
    {
        nickName [string] 使用者暱稱
        ontime [number] 準時簽到次數
        late [number] 遲到簽到的次數
        leave [number] 請假的天數
        absent [number] 未打卡的天數      
    }
]

• ?type=individual&detail=simple 某個時間段某個任務某個成員的簽到情況統計

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-31&taskID=583b9f0f7e98394e341f6c28&openId=1ab394&type=individual&detail=simple

• 返回值

{
  ontime [number] 準時簽到的次數
  late [number] 遲到簽到的次數
  leave [number] 請假的次數
  absent [number] 未打卡的次數
}

• ?type=individual&detail=late 某個時間段某個任務某個成員的遲到情況統計

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-31&taskID=583b9f0f7e98394e341f6c28&openId=1ab394&type=individual&detail=late

• 返回值

  [
  {
    date [string] 記錄日期
    signTime [string] 簽到時間
    duration [string] 遲到多久
    ratio [string] 當日出勤比
  }
  ]

• ?type=individual&detail=leave 某個時間段某個任務某個成員的請假情況統計

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-31&taskID=583b9f0f7e98394e341f6c28&openId=1ab394&type=individual&detail=leave

• 返回值

[
  {
    date [string] 記錄日期
    reason [string] 理由
    ratio [string] 當日出勤比
  }
]

• ?type=individual&detail=ontime 某個時間段某個任務某個成員的按時簽到的情況統計

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-31&taskID=583b9f0f7e98394e341f6c28&openId=1ab394&type=individual&detail=ontime

• 返回值

[
  {
    date [string] 記錄日期
    position [string] 簽到名次
    ratio [string] 當日出勤比
  }
]

• ?type=individual&detail=absent 某個時間段某個任務某個成員未簽到的情況統計

• 用例：/api/sign?startDate=2016-11-01&endDate=2016-11-31&taskID=583b9f0f7e98394e341f6c28&openId=1ab394&type=individual&detail=absent

• 返回值

  [
  {
    date [string] 記錄日期
    notes [string] 備註
    ratio [string] 當日出勤比
  }
  ]

任務遲到（api/leave)

• request body

• 任務ID:taskIDstring

• openId:openIdstring

• startDate:請假開始時間 string {'2016-01-11'}

• endDate:請假結束時間 string {'2016-01-11'}

• return

• 重複請假回返回 HTTP 狀態碼 409

五、資料統計

統計方式：

1. mp.weixin.qq.com 平臺自帶資料分析

1. mta.qq.com 騰訊移動分析 （推薦）

使用方法：

六、總結

技巧總結：

1. 小程式中沒有WebView的概念，所以不要想著在裡面開啟一個網頁（不推薦文章連結類產品）

2. 視訊需要和tvp元件開發的小夥伴合作

3. 頁面樣式單位使用rpx，設計圖以750rpx為標準頁。

4. 伺服器需要配置後端介面域名

...

還有很多技巧需要開發中去體會，也許在微信不斷更新後會更完善。

最後對於開發團隊的總結：

1. 前端主動驅動 —— 小程式開發中前端技術比重較大 ，前端開發者需兼顧整個開發流程 在遇到問題時，不是尋求方案而是先提早預想解決方案，然後引導大家對方案進行優化即可

2. 敏捷開發 —— 版本迭代、每個功能，每個bug，在提出後的短時間內均快速實現

3. 兩套方案 —— 預想方案是大膽的假設方案，必須安排時間進行預研、突破和實現。 保底方案是必定能行的方案，一般是很簡單粗暴的方法，目的是為了保證整個產品邏輯起碼能形成閉環。

~~~~~