語：朋友的健身工作室開張了，生意興旺顧客很多，但是顧客上了多少節課？每月底給教練發工資時是個煩惱。手工記帳麻煩，電腦PC端記也累，最方便是手機端打卡，故要求我幫忙編寫一個用于顧客簽到的微信小程序。雖然以前沒有接觸過小程序，但朋友有求義不容辭，翻閱文檔從零開始，采用云開發方式搭建成功，實現了顧客登陸、簽到、記錄查詢等功能，詳述經過，供作小白基礎入門教程參考。

?

第一步、小程序實現顧客簽到功能的流程圖

流程如下：

1、顧客手機打開小程序進入登陸頁面點擊登陸按鈕，小程序從云服務器處取得顧客openid（數字身份識別碼）信息。

2、登陸后轉到教練列表頁面，顧客選擇教練進入對應簽到頁面。

3、點擊簽到，小程序經授權后獲取用戶信息（頭像、呢稱、性別、地點、國家、語言、簽到時間等），并將簽到信息存入云數據庫。

4、查詢記錄，實現統計顧客簽到（上課）次數功能。

第二步、選擇小程序開發架構

小程序開發架構主要有以下三種：

因為顧客簽到信息要保存在云數據庫上，所以第一種純客戶端不考慮。第二種客戶端+云服務器端可行，但要購買云服務器，又要裝系統，比較復雜。騰訊為小程序簡易開發提供了云開發方式，自帶小服務器和云數據庫，開發者無需搭建服務器，即可使用云端能力，而且帶有微信私有協議天然鑒權，獲取顧客openid和用戶信息更加方便。綜合衡量后，選擇第三種云開發方式。

第三步、開發準備

一、到微信公眾平臺注冊一個小程序賬號，步驟如下（注冊是免費的，已有賬戶可跳至下一節）：

1、點擊下面鏈接進入微信公眾平臺

https://mp.weixin.qq.com/?token=&lang=zh_CN

2、點擊右上角“立即注冊”

3、點擊選擇“小程序”

4、填寫郵箱等注冊信息

5、注冊后登陸郵箱激活并填寫登記信息

6、完成小程序開發公眾號的免費注冊！

二、進入公眾平臺記下自己的開發者號(APPID)

1、登陸微信公眾平臺，點擊左邊的“開發”

2、選擇開發界面的“開發設置”，記下AppID(小程序ID）

三、下載微信開發者工具并新建項目

1、點擊以下鏈接下載最新版微信開發者工具（建議win7 64位系統環境）

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2、下載完畢安裝成功后點擊桌面“微信web開發者工具”圖標打開小程序開發環境

3、在桌面上新建一個空目錄，如“signin"

4、點擊小程序開發環境中的”十“號進入新建項目。項目名稱任意填寫（本文填”顧客簽到小程序“），目錄點擊右邊向下箭頭選擇上一步建立的”signin“空目錄，開發模式選”小程序“，后端服務選”小程序.云開發“，全部填好后點確定。

5、新建項目準備工作完成！

四、設置后端云開發環境

1、在新建立的開發環境中，點擊右上角的”云開發“按鈕。

2、進入云開發控制臺后，首先要設置云開發新建環境的名稱和ID，這里環境名稱設為“test"，環境ID設為”test-c50aj“。云開發允許每個用戶設置一個開發環境用于測試，一個生產環境用于實際部署。

3、創建成功后，下次再點擊”云開發“按鈕后就會看到我們創建的云服務環境的情況。免費提供的后端云環境容量不大，但是對于這個簽到小程序已經足夠。還要設置數據庫，我們點擊上方的“數據庫”

4、進入數據庫后，點擊左角“集合名稱”旁邊的“+”號，創建數據集，因為本示例中教練列表有兩個教練，所以創建兩個數據集，分別名為“jiaolian1”、“jiaolian2”。

5、設置數據庫讀寫權限

數據集建好后，分別點擊數據集名稱，再點擊右上角的“權限設置”，把每個數據集的讀寫名稱設為“所有用戶可讀、用戶公開信息等”。（注意：這里設置不對的話，查詢時會顯示沒有記錄）

6、后端云環境設置完成！

第三步，正式實施開發顧客簽到小程序

一、建立模板。

新建項目后，開發者工具已經自動建立了一個模板。其中”cloudfunctions“目錄是放后端云服務器相關文件，”miniprogram"目錄是放前端界面文件。

二、設置云開發環境。

進入”miniprogram"目錄后，點擊目錄下“app.js"文件，增加一行代碼 env: "test-c50aj", 逗號半角不可少（否則出錯），test-c50aj是剛才設置的云環境ID。

三、部署云函數。

前面已經說過，openid及用戶信息要通過云服務器來調取，因此要將登陸的云函數上傳到云服務器。點擊"cloudfunctions | test”目錄，在"login"目錄上點鼠標右鍵，再點擊”上傳并部署：云端安裝依賴（不上傳node modules) ”，完成部署。

四、增加新頁面。

進入“miniprogram"目錄后，點擊”app.json"文件，增加四個空白頁面，增加代碼如圖：

說明：排最前的"main"頁面是默認登陸頁面，即手機打開看到的第一個頁面。第二個"jiaolian"頁面是教練列表頁面，顧客進入此頁面進行分流簽到。第三個”jiaolian1“、第四個”jiaolian2“頁面分別是兩位教練的顧客簽到和記錄查詢頁面。點擊左側“miniprogram"下面的”pages“目錄后，可以看到多了”main“等四個同名空目錄。

微信小程序的每個頁面由四個同名文件組成，后綴名分別為js、json、wxml、wxss。其中js為邏輯文件、wxml為顯示頁面、wxss為頁面樣式、json設置參數。為便于實現簽到功能，樣式從簡，主要編寫的是js和wxml文件。

五、為登陸頁面編碼

1、編寫登陸顯示頁面。

打開main.wxml頁面文件，輸入下列代碼：

<!-- 登陸頁面 -->

<view class="uploader">

<navigator url="../jiaolian/jiaolian" open-type="navigate" class="uploader-text">

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">請登錄</button>

</navigator>

</view>

（說明：登陸頁面顯示一個登陸按鈕，按下按鈕后，會獲取用戶openid，同時將頁面轉到教練列表頁面。“button”是按鈕組件，“navigator”是轉頁組件，class="uploader"是按鈕的樣式。）

2、打開main.js邏輯文件，輸入如下代碼：

//index.js

const app=getApp() //定義變量

Page({ //定義數據

data: {

avatarUrl: './user-unlogin.png', //微信頭像

userInfo: {},

logged: false,

takeSession: false,

requestResult: ''

},

onLoad: function() { //默認加載

if (!wx.cloud) {

wx.redirectTo({

url: '../chooseLib/chooseLib',

})

return

}

// 調用云函數 //默認加載openid

wx.cloud.callFunction({

name: 'login',

data: {},

success: res=> {

console.log('[云函數] [login] user openid: ', res.result.openid)

app.globalData.openid=res.result.openid

},

fail: err=> {

console.error('[云函數] [login] 調用失敗', err)

wx.navigateTo({

url: '../deployFunctions/deployFunctions',

})

}

})

},

bindGetUserInfo: function (e) { //點擊獲取用戶信息

var that=this;

//此處授權得到userInfo

console.log(e.detail.userInfo);

},

})

（說明：onload是小程序默認加載周期，wx.cloud.callFunction調用獲取openid云函數，把它放在onload周期時，當手機一打開小程序，就自動申請云函數獲取用戶openid。點擊登陸按鈕是為了獲取用戶信息授權之用。）

3、打開main.wxss，輸入代碼，設置樣式：

page {

background: #f6f6f6;

display: flex;

flex-direction: column;

justify-content: flex-start;

}

.uploader-text, .tunnel-text {

width: 100%;

line-height: 52px;

font-size: 34rpx;

color: #007aff;

}

.userinfo, .uploader, .tunnel {

margin-top: 40rpx;

height: 140rpx;

width: 100%;

background: #fff;

border: 1px solid rgba(0, 0, 0, 0.1);

border-left: none;

border-right: none;

display: flex;

flex-direction: row;

align-items: center;

transition: all 300ms ease;

}

4、按“Ctrl+S”保存，微信開發者工具會自動重載，顯示登陸頁面。點擊“請登陸”在左下角”console“控制臺會顯示顧客openid及用戶信息。同時轉到教練列表頁面。

5、打開jiaolian目錄下的“jiaolian.wxml”文件，輸入代碼：

<view class="container">

<text> 請選擇教練 </text>

</view>

<view class="uploader">

<navigator url="../jiaolian1/jiaolian1" open-type="navigate" class="uploader-text">

<text>林教練</text>

</navigator>

</view>

<view class="uploader">

<navigator url="../jiaolian2/jiaolian2" open-type="navigate" class="uploader-text">

<text>劉教練</text>

</navigator>

</view>

6、打開“jiaolian.wxss”文件，輸入代碼：

/**index.wxss**/

page {

background: #f6f6f6;

display: flex;

flex-direction: column;

justify-content: flex-start;

}

.uploader-text, .tunnel-text {

width: 100%;

line-height: 52px;

font-size: 34rpx;

color: #007aff;

align-items: center;

}

.userinfo, .uploader, .tunnel {

margin-top: 40rpx;

height: 140rpx;

width: 100%;

background: #fff;

border: 1px solid rgba(0, 0, 0, 0.1);

border-left: none;

border-right: none;

display: flex;

flex-direction: row;

align-items: center;

transition: all 300ms ease;

}

（說明：上面教練列表頁面是一個過渡頁面，簡單通過點擊不同教練名字的按鈕把顧客引流到不同教練的簽到頁面。在顧客較多的情況下，引流是一種邏輯清晰、簡單可行的辦法。）

7、實現了登陸頁面的設計編碼！

六、總結進度：一、完成功能流程圖；

二、對比選擇開發服務器架構；

三、注冊微信公眾號；

四、下載開發工具并新建模板；

五、設置后端云開發環境；

六、編寫了顧客登陸頁面和教練列表過渡頁面。

雖然只有簡單的兩個頁面，但已經實現了一半的功能流程。小程序已經順利地運行，并且和云服務器、數據庫聯系起來，獲取了openid和用戶信息。

在明天《如何從零開始搭建一個顧客簽到微信小程序？（二）》中，將繼續講解如何搭建剩下的簽到、記錄和查詢、統計功能。請關注我的頭條號，歡迎討論指正。

如果讓你有所思，請多在朋友圈分享本文，讓更多人有所獲。我是神足自在，編程愛好者，致力于IT工程的實踐案例和淺易講解。

微信公眾號：神足自在（wxvkuie)

電子郵箱：wxvkuie@qq.com

可以通過打卡的設計，來引導用戶完成任何你期望他們做的事情。

今天分享的是“打卡簽到”。簡單的說，一些APP上的打卡簽到的目的就是用來提升用戶粘性。然而其實打卡是一個萬能的運營方式。因為你可以通過打卡的設計，來引導用戶完成任何你期望他們做的事情。

文章較長，結構如下：

? 首先，通過小程序“小打卡”總結了內容打卡的玩法；

? 然后，通過一些APP的案例，總結了按鈕打卡的玩法；

? 最后，總結一個可以引導用戶完成很多目標的“萬能打卡”玩法

首先來看一下獲得了真格基金天使投資的小程序，“小打卡”做了什么

首先小打卡屬于一個工具類產品，提供了各種打卡的玩法。感興趣的小伙伴，可以在小程序中搜索“小打卡”。

在小打卡中，可以創建自己的打卡圈子，我進入到一個首頁推薦的圈子中，如圖所示，可以看到小打卡提供了如下幾個打卡相關的功能：打卡，打卡契約，打卡日歷，排行&勛章，提醒小伙伴打卡。接下來，我們一一拆解每個打卡功能。看看有哪些值得我們學習借鑒的營銷玩法。

核心功能

? 打卡：

小打卡中的打卡并不是像很多APP中的打卡，點一下打卡按鈕，就完成了打卡。而是類似于發表日記的方式來完成打卡，即讓用戶產生內容，來活躍該打卡圈子。打卡的方式提供了圖片，視頻，語音，文本等輸入方式。說是打卡，這更像是一個論壇，一個社區。

這種以產生內容的方式進行打卡，可謂和點打卡按鈕有很大區別。產生內容的打卡方式本身可以進一步活躍用戶，讓用戶在這個圈子里產生互動，產出內容。而點打卡按鈕的方式，是很多APP現在所采用的。這種方式是非常簡單，通過一定的獎勵機制，可以起到拉升APP打開率的作用。

這種以產生內容的方式進行打卡的，目前運動APP，keep也在這么做。如下圖所示，有加餐打卡，跑步打卡等。

所以，這種產生內容的打卡方式，需要將用戶圈定在同一個圈子里。更適用于一些社群，教育類產品。需要企業進行用戶細分分群。而像淘寶這樣的電商平臺，就很難做這樣的內容打卡，因為你買的零食，我買的電子產品，做內容的打卡則不具備提升用戶互動的效果。

? 打卡契約：

這個活動需要用戶付一定金額的契約金。我參加這個打卡活動是20元，但是完成連續天數的打卡后，可以大家一起平分總獎金。

這個活動的本質和點打卡按鈕，連續點擊多少天，可以獲得某獎勵沒有本質的區別。

都是通過獎勵用戶，來讓用戶持續打卡。但是也有不同。點擊打卡按鈕，如果有漏打，用戶會有損失感。而這種損失感還和連續打卡的的獎勵大小有關。如果連續打卡10天，獎勵1000元，那有一天沒打，用戶會感覺非常難受，因為損失了1000元。但如果連續打卡10天，獎勵1元。我想很多人都會忘記來打卡。這就是這種點擊按鈕打卡的弊端。但是契約打卡不同，他利用了人的承諾心理。交了20塊的契約金，如果不來打卡，那么就不是損失多少錢的心理了。而是你承諾給別人的事情，你違約了，這就成了信用的問題了。

所以，總結一下：點擊按鈕打卡，和契約打卡都是刺激用戶的損失感，但前者損失的是身外之物的獎勵，后者損失的是內心的誠信。這種感知是完全不同的，越痛的，越能刺激用戶。

輔助功能

? 打卡日歷：

簡單說，就是一個統計，你打卡多少天，漏打多少天。但是這個功能其實是對上文提到的打卡，契約打卡的一個輔助。它的作用還是在于更深層的激發用戶的損失感。舉個不恰當的例子：用戶已經很痛了，然后再給用戶補一刀。但營銷就是需要這個，越是能激發人的情緒就越有效果。哪怕這份情緒是負面的。

言歸正傳，如果用戶看到漏打，這是一個鉤子，會鉤起用戶的承諾，因為使用了契約打卡。所以呢，你漏打了，就用一個鉤子鉤住你，激化你的痛，讓你“老老實實”回來打卡。

? 排行&勛章：

依然是打卡和契約打卡的輔助，如果說打卡日歷是在激化用戶的痛，那么排行和勛章就是在激化用戶的競爭心態。通過排名和給用戶派發勛章，來讓用戶更加努力的打卡。這個輔助屬于游戲化和打卡的一個結合玩法。如果寫文章，應該又可以寫一篇深度文章，這里就先略過了。

? 提醒小伙伴來打卡：

還是為打卡和契約打卡服務。在這個功能上，存在2個角色，一個是提醒人，一個是被提醒人。提醒人提醒沒有打卡的人，可以獲得積分，積分可以用來提升排行并獲得勛章，所以提醒人愿意做這個事。而被提醒人收到提醒人，你還沒來打卡，這個和收到系統推送你還沒來打卡的感受又是不同的。收到別人的提醒的緊迫感更強。被提醒人的內心如下“別人都已經打過卡了，我也要趕快去打卡，不然我的契約金和獎金都沒了”。

如果說“小打卡”是做內容打卡，是一個偏向于社群的玩法。那么簡單粗暴的按鈕打卡，有沒有什么“套路”值得借鑒。

下面先分享2個案例，分別是淘寶，OFO

從圖中的點擊打卡可以看到，其實都是共通的。就是每天點一下打卡按鈕，連續簽到就可以獲得獎勵。但是這個玩法會有幾個小點需要注意：

? 用戶至少每天做一次；

? 花不到30秒就可以完成；

? 只需花很少的力氣。

關于點擊按鈕打卡，我將把獎勵規則進行一個總結：

? 打卡類型：

連續打卡：用必須進行連續的打卡，才可以獲得獎勵

累計打卡：用戶可以間斷打卡，累計到一定次數即可獲得獎勵

? 獎勵規則：

周期型中獎：即每打卡滿多少次，即可獲得某獎勵。獎勵將不斷按照打卡次數循環。例如，每打卡3次獲得1積分。那么連續打卡6天就會獲得2積分。

階梯型中獎：以積分為例，可以設置為打卡滿3次獲得1積分，打卡滿6次可以獲得10積分。那么打卡6天后，積分是11。

如果說內容打卡和按鈕打卡都是為了增加用戶粘性，用戶活躍，并給予用戶一些獎勵。那么真的是大材小用了。打卡可以引導用戶完成任何你期望他們做的事情。當然這需要一些方法。這就是“萬能打卡”

? 一個例子：

如果你想督促你的朋友減肥，那么每天督促他運動30分鐘，這樣可以獲得一定獎勵。但是這30分鐘可能讓你的朋友并無法堅持下來。應該怎么做？

? 早上起床后喝一杯水，給一點小獎勵；

? 喝過水后，換上運動裝，給一點小獎勵；

? 換好運動裝，完成前10分鐘的拉伸運動，給一點小獎勵；

? 完成第二個10分鐘的有氧運動，給一點小獎勵；

? 完成第三個10分鐘的瑜伽，給一點小獎勵。

這就是所謂的“萬能打卡”模板。在內容打卡和按鈕打卡中，其實用戶每天打卡的操作都是一樣的。所以，這最多增加了用戶APP的打開率。培養的習慣是打開APP。而“萬能打卡”因為可以引導用戶的行為，所以可以有效達成更多的運營指標。

? 案例：

以我們曾經服務過的一家美術教育機構為例。來說明如何使用“萬能打卡”。（相關商業數據不做截圖展示）

? 背景：

該美術培訓機構屬于一個平臺，有在線的免費美術試聽課程，盈利模式在于將線上流量引流到線下培訓機構報名學習，從而賺取培訓差價

? 目標：

將用戶引流到線下培訓機構

目標分解（實現目標的路徑）：

第一步：去點評別人的素描作品；

第二步：讓別人點評自己的素描作品，并發現不足；

第三步：去學習線上免費的素描課程；

第四步：去線下報名線下課程；

第五步：學習一段時間后，再次讓別人點評自己的素描作品。

? 活動策劃：

步驟一：線上簽訂素描學習承諾書。承諾將通過3個月的素描學習，將素描作品評分提升到90以上，如果達成目標，獎勵300元現金。

步驟二：每天點評別人的素描作品，可以獲得10元助學金。需要在簽訂承諾書的前15天完成。可以累積150元助學金。

步驟三：發布自己的素描作品，給別人打分，一個月內完成，可以獲得100元助學金。

步驟四：每天學習線上免費素描課程，可以每天獲得5元助學金。

步驟五：助學金可用于抵扣線下報名學費。線下課程學習結束，發布素描作品，評分高于90分，可以獲得300元現金獎勵。

? 活動分析：

該活動其實也是打卡。但是并不是每天點一下按鈕。活動的目的是讓用戶報名線下課程。所以設計了一個五步的實現路徑，來引導用戶最終報名付費課程。而如果直接對新用戶進行促銷，推薦線下課程，這樣的付費轉化率并不高。通過五個步驟，每一個步驟用戶都可以獲得獎勵，而每一個步驟執行的難度并不高。這個過程更有助于增加用戶的付費率。同樣，這個過程也是一個新用戶培育的過程。

活動不僅有每日打卡獎勵，還有簽訂承諾書的大額獎勵。這對于用戶來說是一種激勵，對于企業來說，無非是線下課程學費的一個折扣而已。

? 萬能打卡模板：

接下來，我把萬能打卡提煉成一個模板，讓各位小伙伴可以拿來即用。

? 設定目標：設定運營目標

? 設計實現目標的路徑：基于該目標，分解成多個容易完成的步驟

? 設計每個步驟的獎勵

? 設計目標達成的獎勵

小結！！！

小結！！！

今天分享了3類打卡簽到的玩法。

? 內容打卡適用于一些細分用戶的社群、社區類產品；

? 按鈕打卡比較通用，主要用來提升APP打卡率；

? 萬能打卡是基于更多的運營目標而設計的，需要讓用戶每天完成一個小目標，從而達成企業最終運營目標

最后，把今天分享的打卡簽到套路，做了一個思維導圖。送給大家。

本文為活動盒子原創，商業轉載請聯系作者獲得授權，非商業轉載請注明出處：

http://www.huodonghezi.com/news-1857.html