前言

在小程序运营中，为了提升用户留存，通常会自建打卡签到模块送积分功能。用户可以通过打卡签到获取到积分，然后积分可以兑换礼物，从而实现用户留存的效果。

效果

在我的页面加入了一个签到入口，点击进入打卡签到页面。进入页面后会自动签到，引导用户进行二次提醒推送。可在后台灵活配置每天签到的积分及抽奖、奖品配置。

今天我来带大家看看如果快速实现这个功能，在这里需要用到小程序的「单页模版」功能。来看看官方文档介绍：

目前「单页模版」处于内测阶段，我这个是内测版本，所以大家在开发工具中没有也是正常的。

小程序开发过程中，有很多通用的业务模块，例如：打卡签到、邀请有礼、趣味小游戏、运营 banner 配置等。这些模块业务模型具备通用性，但是前端每个小程序都有自己的样式设计。因此，每个小程序都需要重复性的进行开发。

单页模板致力于帮助小程序开发者聚焦前端交互展示，无需关注于实现接口以及管理端。

开通单页模板后，运营人员可直接在管理端配置新功能，小程序前端源码组件可导入到小程序内快速接入，也可以对前端组件进行二开以满足业务需求。

简单来说就是把整套打卡签到的前端代码和后端业务代码插入到你的小程序中，自己可以对前端组件做二次开发。

接下来我就带你来看看如何使用：

目前该功能还在内测阶段，你的微信开发功能没有是正常的。在这里我只是演示内测版本，后续云开发团队会持续更新，正式上线。

第一步：开通单页模版

1. 开发设置面板
2. 点击扩展设置
3. 找到其他组件
4. 安装单页模版

当你开通完成后来，选中miniprogram文件夹右键呼出菜单，选择「配置单页模版」点击免费使用

则会进入腾讯云登录界面，扫码验证选择自己的小程序即可。验证成功后则会进入单页模板控制台的小程序组件页面。

第二步：后台配置规则

点击「前往配置」则会进入签到配置页面，分别可以对：奖品管理、签到记录、签到规则、签到配置。

奖品管理

• 奖品列表【新增、删除、导出】

• 奖品新增，在这里要注意填写奖品总数直接和剩余数量填写相等即可，当用户中奖后会自动将剩余数量-1

签到记录

显示所有的签到记录、中奖记录，可以通过搜索条件对openid、连续天数、奖品描述进行过滤，而从显示对具体信息的快速查找。

签到规则

这里编辑的内容会在小程序页面用户点击签到规则时进行弹出显示。

签到配置

在这里可以配置签到活动的开关，签到的积分奖励，目前支持积分和虚拟物品，下周会上线实体物品。还有就是抽奖设置，包括概率和触发条件。

当配置一切搞定之后，接下来我们来看下如何导入前端的签到打卡组件。

第三步：导入代码

我们回到刚才的控制面板，切换到第二个菜单导入小程序组件，点击导入组件到IDE。

点击查看详情，会有这个组件的介绍。

点击导入IDE会直接导入在小程序的miniprogram目录下

在这里如果你想直接导入在pages下面在进入单页模版配置的时候直接选择pages文件夹即可，或者移动文件夹到pages下面也可以，因为通常来说我们的页面都是放在pages下面来进行管理的。

看下代码以及预览效果

该组件代码的目录：

.
├── README.md
├── cloudfunctions # 云开发云函数目录
├── miniprogram # 小程序前端代码
│   ├── miniprogram_npm
│   ├── node_modules # 如果希望在 miniprogram/pages 下调用 @cloudbase/saas-module，需要在 miniprogram 下安装依赖
│   ├── pages
│   │   ├── index
│   │   ├── page_module_sign_up # 导入目录规范 page_module_${模块名}
│   │   │   ├── README.md
│   │   │   ├── components # 模块内的组件
│   │   │   ├── config.js
│   │   │   ├── images
│   │   │   ├── miniprogram_npm # 构建后的npm包，包含 @cloudbase/page-module
│   │   │   ├── package.json
│   │   │   └── pages # 模块内示例页面
│   │   └── demo
│   └── sitemap.json
├── project.config.json

从代码上来看，在这里使用 page_module_sign_up/pages/index/index.wxml 是直接使用的自定义组件如果想要在前端进行样式的调整可以在 page_module_sign_up/components进行相关组件的代码修改。

这就是在文档中提到的可以对前端组件进行二开以满足业务需求。除了前端之外我们来看看后端配置

第四步：接口配置

回到单页模版页面，选择接口自定义接口。

设置消息提醒

首先选择一个具体的云环境进行部署云函数

部署成功后进行代码下载

这样你就可以得到发送订阅消息的代码，这里要注意就是要修改成自己的订阅模版。登录当前小程序的 mp 管理系统，从菜单中找到订阅消息-公共模版库-搜索【签到模版】-选中第一个进行选用。

选用后三个字段

• 活动名称
• 签到奖励
• 温馨提示

提交即可，模版申请成功后会在我的模版中显示

复制模版ID去小程序前端代码中进行替换，找到page_module_sign_up/config.js

替换temId和你想要用户点击推送订阅消息卡片跳转的页面page

除了小程序前端之外还需要在云函数page_module_tcb_sign_up/api/sendmsg.js进行修改。

在这里需要和管理后台的模版详情的字段序号对应上，默认下载的代码是

温馨提示：{{thing2.DATA}}

签到奖励：{{thing1.DATA}}

活动名称：{{thing3.DATA}}

代码中的逻辑是第二天发送模版消息，但是实际上测试肯定不会等到第二天要不然效率就太慢了，可以在 page_module_tcb_sign_up/api/set_remind.js 的主题逻辑run方法中修改 addDelayedFunctionTask 的 delayTime 参数，比如：我想点击10秒后发就可以设置为10。

addDelayedFunctionTask：用于延时调用云函数

delayTime：延迟时间，单位：秒，合法范围：6s-30天

设置完成后，点击明天提醒就可以立即收到模版消息推送了。

在这里点击卡片的时候如果你签到打卡是一个新的页面会提醒找不到这个页面，因为发送推送消息默认环境跳转到正式环境去了，所以需要在 page_module_tcb_sign_up/api/sendmsg.js 改动下跳转环境。

subscribeMessage：发送订阅消息

miniprogramState：developer为开发版；trial为体验版；formal为正式版；默认为正式版

这样调试起来就不会有问题了，但是一定要记得上线后记得把时间和环境都调整过来。

接下来再来看看监听积分数据和奖品数据。

监听积分与奖品

这两个监听相对简单，而且方法都是一样的所以就一起讲解。

监听积分发放需要在云函数下新建 /api/send_face_value.js 文件并实现该接口。

监听奖品发放需要在云函数下新建 /api/send_prize.js 文件并实现该接口。

具体实现，两种只是入参不一样其他都是一样的，以下为官方给出的代码示例。

const objCloud = require('wx-server-sdk');
/**
 * 具体的业务函数，在这里实现您发奖，发积分的逻辑，data 入参是固定的，出参必须遵循规范
 * @param { object } data - 业务入参
 * @returns { object } - 返回参数
 * @returns { number } code 返回的状态标记，成功返回0， 非0代表错误
 * @returns { string } msg  如果成功，则可以不返回，如果失败把相应的错误原因中文描述放在这里
 * @returns { object } result 接口调用返回的信息
 * 
 */
module.exports = async (data) => {
    console.log("参数：", data);
    // 这里实现您具体的业务逻辑，例如发积分，发奖
    
    return {
      code:0,
      msg:'suc',
      // 出参需要遵守自定接口规范
      result: {
        sendResult: true
    }};
};

我基于这个案例写了一个实际的业务，当用户签到获取到积分的时候我就存在我的积分表里面。

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

module.exports = async (data) => {
    console.log("参数：", data);
    // 具体业务
    const integral = await db.collection('integral')
    await integral.add({
        data: data
    })
    return {
        code: 0,
        msg: 'suc',
        result: {
            sendResult: true
        }
    };
};

数据结构：

当然你自己也可以根据自己的业务来新增相关字段，做到这一步基于「单页模版」的签到打卡送积分功能就全部完成了。

注意

我已经上线使用了1周了，发现了一个问题。

用了单页模式新增了一个lowcode环境，所以在实现礼物接口和积分接口的时候需要指定下环境，要不然会出现概率报错找不到数据库。

最后

其实我很早就想实现自己的积分体系，但是由于时间不够的原因，导致迟迟没有去迈出第一步，正好遇到的单页模版的签到打卡送积分这个功能，于是在wilsonsliu的高度配合下完成了积分体系v1.0上线了。同时也非常期待后续的单页模块的邀请有礼、趣味小游戏、运营 banner 配置等上线。

只要你的小程序想要提高用户留存都需要搭建自己的积分体系，而单页模版的签到打卡功能可以成为用户获取积分的途径之一，要有积分才能去消费，具体消费积分场景可以配合积分商城或特殊功能上去进行消费。