最近，我所在的城市在进行全员核酸的检测，在检测的登记过程中，用到了一款小程序，该小程序采用的是colorui前端样式库基于uniapp进行开发的，今天让我们来拆解一下这款小程序。

目前我们能接触到的是登记端，因此我们就从登记端开始。

1、首先我们在Hbulidx中创建一个uniapp项目：

选择uniapp并点击创建

2、其次我们引入colorui框架。

在unicloud应用商店可以搜索到这款高颜值的UI框架，这几年我一直在用这个框架。下载后，将框架中的“colorui”文件夹放到项目根目录下，然后在APP.VUE文件中写入下面几行代码。

<style>/*每个页面公共css */@import "colorui/main.css";@import "colorui/icon.css";</style>

下载colorUI

3、引入自定义头部导航栏：

原生的头部导航栏的确不太美观，因此这里我们引入自定义的头部导航栏

1️⃣pages.json文件中添加这么一行代码，禁用原生导航

"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","navigationStyle": "custom"//这行代码是后加的，用来禁用原生导航}

2️⃣main.js中注册新的头部导航栏：

import cuCustom from './colorui/components/cu-custom.vue'Vue.component('cu-custom',cuCustom)Vue.prototype.CustomBar = 50

3️⃣index.vue页面中引用该组件

<cu-custom bgColor="bg-gradual-pink" :isBack="true" style="height: 100rpx;"><block slot="backText">返回</block><block slot="content">导航栏</block></cu-custom>

4、在页面中利用form组件收集信息：

<template><view><cu-custom bgColor="bg-gradual-pink" :isBack="true" style="height: 100rpx;"><block slot="backText">返回</block><block slot="content">导航栏</block></cu-custom><form><view class="cu-form-group "><view class="title">姓 名*：</view><input placeholder="请输入姓名" name="input"></input></view><view class="cu-form-group margin-top"><view class="title">证件类型*：</view><checkbox class='round checked' ></checkbox>身份证<checkbox class='round ' ></checkbox>护照<checkbox class='round ' ></checkbox>其它</view><view class="cu-form-group margin-top"><view class="title">证件号码*：</view><input placeholder="请输入证件号码" name="input"></input></view><view class="cu-form-group margin-top"><view class="title">手机号码*：</view><input placeholder="请输入手机号码" name="input"></input></view><view class="cu-form-group margin-top"><view class="title">联系地址*：</view><input placeholder="请输入联系地址" name="input"></input></view></form><view class="padding flex flex-direction"><button class="cu-btn bg-green lg round">生成二维码</button></view></view></template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}</script><style>.title {font-size: 36rpx;color: #000000;white-space: pre;//这样可以显示多个空格}</style>

到这儿，这个全员核酸检测登记小程序的界面部分就讲完了，明天我们再来说一下他的逻辑部分。