一、开发老师端
我们通过 useTask 创建一个 Task，当老师调用 updateTask 时，学生端会收到老师端发来的签到请求。
<template> <div class="custom-checkin-btn" @click="checkIn"> <span class="header__btn-text">签到</span> </div></template><script setup>// 创建一个签到任务 custom-check-in-toolconst { updateTask } = useTask('custom-check-in-tool');// 点击签到按钮时，发起签到const checkIn = () => { updateTask({ type: 'ask-check-in', });};</script><style lang="less">…</style>
二、开发学生端
在学生端，我们监听custom-check-in-tool这个任务，当收到签到请求时，进行弹窗，让学生完成签到。
<template> <div class="checkin-modal" v-if="showModal"> <div class="checkin-modal__content"> <div class="checkin-modal__header"> <h2>签到</h2> <button @click="showModal = false">关闭</button> </div> <div class="checkin-modal__body"> <p>请你完成签到</p> </div> <div class="checkin-modal__footer"> <button @click="showModal = false">取消</button> <button @click="handleCheckIn()">确认签到</button> </div> </div> </div></template><script setup>import { ref } from 'vue';import useTask from '../hooks/useTask';const showModal = ref(false);const isCheckIn = ref(false);// 监听到老师发起签到任务的回调函数useTask('custom-check-in-tool', (data) => { if (data.type === 'ask-check-in') { // 收到签到请求 console.log('收到签到请求'); // 检查是否已签到，没有签到就展示签到弹窗 if (!isCheckIn.value) { TCIC.SDK.instance.promiseState('TStateDeviceDetect', false).then(() => { // 设备检测完成后展示弹窗 showModal.value = true; }); } else { // 已经签到，提示用户 console.log('已经签到'); } }});const handleCheckIn = () => { isCheckIn.value = true; showModal.value = false; // 发送请求到服务器};</script><style lang="less">…</style>
注意：说明：
注意：完成开发后，我们可以通过 场景配置 将打包后的 js 上传，创建该场景的课堂后，课堂将自动加载自定义 js。