導語：朋友的健身工作室開張了，生意興旺顧客很多，但是顧客上了多少節課？每月底給教練發工資時是個煩惱。手工記帳麻煩，電腦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
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。