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