小程序（八）前端 在线签到

---

一、设计人脸签到页面

上一小节我们设计好了首页里面的栏目导航，当用户点击签到链接的时候，小程序会跳转到人脸签到页面。首先我们来看一下签到页面的截图，根据截图去写标签和样式，相对容易了很多。

二、如何调用系统相机？

微信小程序提供了 camera 标签，这个标签可以调用系统相机进行拍照，至于说开启前摄像头
还是后摄像头，我们可以用参数设置。想要拍照的时候，我们给某个按钮添加点击事件，然后调
用相机对象的 takePhoto() 方法即可。下面我们来看一下 标签的使用规范。

三、设计人脸签到页面

1、创建 checkin.vue 页面

<template>
	<view>
		<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera"></camera>
		<image mode="widthFix" class="image" :src="photoPath" v-if="showImage"></image>
		<view class="operate-container">
			<button type="primary" class="btn" @tap="clickBtn" :disabled="!canCheckin">{
   {
    btnText}}</button>
			<button type="warn" class="btn" @tap="afresh" :disabled="!canCheckin"