如何从零开始搭建顾客签到小程序？（一）—云开发入门教程。（签到小程序如何做）

导语：朋友的健身工作室开张了，生意兴旺顾客很多，但是顾客上了多少节课？每月底给教练发工资时是个烦恼。手工记帐麻烦，电脑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