网络安全知识问答微信小程序的设计与实现

mon_star°2025-05-02 22:08

网络安全知识问答微信小程序的设计与实现，说白了，就是搭建一款网络安全知识问答微信小程序，类似网络安全百科直通车。三步走。

需求沟通

进行需求沟通，此处省略1000字。

画草图

根据沟通的需求，进行整理，然后绘制草图。

搭建页面

引导页页面布局与样式

复制代码 
<image src="/image/b1.png" class="mw-bg"></image>
<view class="mw-btn">
  <view class="mw-answer">
    
    <view bindtap="login" wx:if="{{!hasUserInfo}}">
      <button class='cu-btn block round lg bg-blue'> 微信授权登录 </button>
    </view>

    <view bindtap="goToStart" wx:else>
      <button class='cu-btn block round lg bg-blue'>开始答题</button>
    </view>

    <view>
      <button class="cu-btn block round lg line-blue margin-top" open-type="share"> 推荐给好友 </button>
    </view>
  </view>

</view>

page{
  background-color: #eff5ff;
}
.mw-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
}
.mw-answer {
  padding: 100rpx 150rpx 10rpx;
}
.mw-weixin.text-center {
  color: #333;
  padding: 30rpx 0 0;
}
.mw-btn {
  position: absolute;
  bottom: 20rpx;
  left: 0;
  width: 750rpx;
  z-index: 2;
}

登录页页面布局与样式

复制代码 
<view class="text-center padding-top-xl">
    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}" mode="widthFix"></image>
    </button> 
</view>

<view class="weui-input-box solids-top solids-bottom padding margin-top">
    <input type="nickname" class="weui-input" placeholder="请输入昵称"  maxlength="12" bindinput="bindKeyInput" bindblur="bindblurFn" />
</view>

<view class="padding margin-top">
    <button class='cu-btn block round lg bg-blue' bindtap="login"> 登 录 </button>
</view>

/* pages/login/login.wxss */
page{
    background-color: #fff;
}
.avatar-wrapper {
    display: inline-block;
    width: 100rpx;
    height: 100rpx;
    padding: 0;
    margin: 0;
}

首页页面布局与样式

复制代码 
<view class="mw-page">
  <swiper class="screen-swiper" indicator-dots="true" circular="true"  autoplay="true" interval="5000" duration="500">
    <swiper-item wx:for="{{banner}}" wx:key="index">
      <image src="{{item}}" mode='aspectFill'></image>
    </swiper-item>
  </swiper>

  <view class="padding">
    <view class="bg-blue padding radius text-center light">
      <view class="text-xl text-bold margin-bottom-xs">网络安全宣传</view>
      <view class="text-lg">保护个人信息</view>
    </view>
  </view>
  
  <view class="mw-content padding-bottom">

    <view class="cu-bar bg-white padding-top-sm">
      <view class='action'>
        <text class='icon-titles text-blue'></text>
        <text class='text-xl text-bold'>热点问题</text>
      </view>
    </view>

    <view class='padding-left-sm padding-right-sm' wx:for="{{hotList}}" wx:key="index">
      <view class='padding-sm' bindtap="goToViewAnswer" data-id="{{item._id}}">
        <view class='bg-sky padding radius shadow-warp flex justify-between align-center'>
          <view class="text-lg">热点{{index+1}}、{{item.question}}</view>
          <text class="icon-right lg text-white"></text>
        </view>
      </view>
    </view>
    
  </view>
</view>

page{
  background-color: #fff;
}
.mw-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
}
.mw-btn {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  width: 750rpx;
  z-index: 2;
}
.mw-answer {
  padding: 100rpx 150rpx 30rpx;
}

热点问题页面布局与样式

复制代码 
<view class="mw-page">
  <view class="padding">
    <view class="padding-bottom-xs">
      <text class="text-bold text-lg">今日热点</text>
    </view>
    <view class="padding-bottom-xs">
      <text class="text-lg">{{detailInfo.question}}</text>
    </view>
  </view>
  <view class="mw-content">
    <view class="padding">
      <text class="text-lg">{{detailInfo.answer}}</text>
    </view>
  </view>
  <view class='padding'>
    <button class="cu-btn sm round margin-right-sm {{detailInfo.isSubscribe?'bg-sky':'line-sky'}}" bindtap="alertFunc" data-id="{{detailInfo._id}}" data-index="{{index}}"> 
      <text class="icon-appreciate"></text> 点赞
    </button>
    <button class="cu-btn sm round margin-right-sm {{detailInfo.isCollected?'bg-sky':'line-sky'}}" bindtap="collectFunc" data-id="{{detailInfo._id}}" data-index="{{index}}"> 
      <text class="icon-favor"></text> 收藏
    </button>
    <button class="cu-btn sm round line-sky" open-type="share"> 
      <text class="icon-share"></text> 分享
    </button>
  </view>
</view>

page{
  background-color: #fff;
}
.mw-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
}
.mw-btn {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  width: 750rpx;
  z-index: 2;
}
.mw-answer {
  padding: 100rpx 150rpx 30rpx;
}
.mw-content {
  padding-bottom: 10rpx;
  border-top: 10rpx solid #eee;
}
.mw-banner {
  width: 100%;
}



.comments-box {
  border-top: 10rpx solid #eee;
  padding: 30rpx 20rpx 10rpx;
}
.collect-btn {
  display: inline-block;
  padding-right: 20rpx;
}

.collect-btn .lg {
  font-size: 36rpx;
}

/* 评论区 */
.infoTitle{
  font-size: var(--font-size-M);
  font-weight: 600;
  color: #000;
  margin-bottom: 20rpx;
}
.van-cell{
  padding: 10rpx 0 10rpx 0 !important;
  /* position: relative;
  left: -26rpx; */
  /* font-size: var(--font-size-S); */
}

.noComment{
  /* text-align: center; */
  color: #868688;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}

.comment{
  background-color: #F2F1F6;
  margin-top: var(--font-size-M);
  padding: var(--font-size-S);
  border-radius: var(--font-size-S);
}

.comment_time{
  color: #868688;
  display: inline-block;
  float: right;
}

.comment_nickName{
  display: inline-block;
  color: #868688;
}

.comment_text{
  font-size: 25rpx;
  color: #454547;
}

.commentShell {
  margin-top: 50rpx;
  height: var(--font-size-M);
  margin-bottom: 100rpx;
}

.inputComment{
  border: var(--color-theme) 1px solid;
  border-radius: var(--font-size-S);
  overflow: hidden;
  width: 95%;
}

/* 评论按钮 */
.submitComment{
  display: inline-block;
}

支持点赞、收藏与分享功能

问答页面布局与样式

复制代码 
<view class="mw-page">
  <image src="/image/b1.jpg" mode='widthFix' class="banner"></image>
  
  <view class="cu-bar search bg-white margin-top padding-lr">
    <view class='search-form round'>
      <text class="icon-search"></text>
      <input type="text" placeholder="请输入您的问题" confirm-type="search" value="{{ keyword }}" bindconfirm="onConfirm" bindinput="bindKeyInput" bindblur="bindblurFn"></input>
    </view>
    <view class='action'>
      <button class='cu-btn bg-sky shadow-blur round' bind:tap="submit">提交</button>
    </view>
  </view>

  <view class="mw-content padding-bottom">

    <view class="cu-bar bg-white padding-top-sm">
      <view class='action'>
        <text class='icon-titles text-blue'></text>
        <text class='text-xl text-bold'>专项考试</text>
      </view>
    </view>

    <view class='grid col-2 padding-left-sm padding-right-sm'>
      <view class='padding-sm' bindtap="goToAnswer" data-category="网络诈骗防范">
        <view class='bg-yellow padding radius shadow-warp'>
          <view class="text-lg">网络诈骗防范</view>
          <view class='margin-top-sm text-Abc'>共390题</view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category="数据安全">
        <view class='bg-orange padding radius shadow-warp'>
          <view class="text-lg">数据安全</view>
          <view class='margin-top-sm text-Abc'>共210题</view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category="密码安全">
        <view class='bg-olive padding radius shadow-warp'>
          <view class="text-lg">密码安全</view>
          <view class='margin-top-sm text-Abc'>共260题</view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category="网络防御">
        <view class='bg-cyan padding radius shadow-warp'>
          <view class="text-lg">网络防御</view>
          <view class='margin-top-sm text-Abc'>共230题</view>
        </view>
      </view>      
    </view>
    <view class='padding-left-sm padding-right-sm'>
      <view class='padding-sm' bindtap="goToAnswer" data-category="安全培训和意识教育‌">
        <view class='bg-yellow padding radius shadow-warp'>
          <view class="text-lg">安全培训和意识教育‌</view>
          <view class='margin-top-sm text-Abc'>共330题</view>
        </view>
      </view>
    </view>

  </view>
</view>

page{
  background-color: #fff;
}
.banner {
  width: 100%;
}
.mw-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
}
.mw-btn {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  width: 750rpx;
  z-index: 2;
}
.mw-answer {
  padding: 100rpx 150rpx 30rpx;
}

答题页面布局与样式

复制代码 
<!--pages/test/test.wxml-->
<view class="page">
  <view class="flex flex-wrap solids-bottom padding-bottom">
    <view class='basis-xs'>
      <view class="cu-avatar round lg margin-left">
        <image class="avatar" src="{{userInfo.avatarUrl}}" mode="widthFix"></image>
      </view>
    </view>
    <view class='basis-xl'>
      <view class="padding-top text-bold text-black">
        {{userInfo.nickName}}
      </view>
    </view>
  </view>
  <view class="text-center padding-top">
    第<text class="text-xl text-bold">{{index+1}}</text>题
    共<text class="text-xl text-bold">{{questionList.length}}</text>题
  </view>
  <view class='padding page-hd'>
    <view class="page-title">
      <text class="text-bold">【{{questionList[index].type == 1?"单选题":questionList[index].type == 2?"多选题":"判断题"}}】</text>
      {{questionList[index].question}}
    </view>
  </view>
  <view class="page-bd">
    <radio-group class="radio-group" bindchange="radioChange" wx:if="{{questionList[index].type == 1 || questionList[index].type == 3}}">
      <label class="radio my-choosebox" wx:for="{{currQuestionOp}}" wx:for-index="key" wx:for-item="value" wx:key="index">
        <radio value="{{key}}" checked="{{questionList[index].checked}}" />
        <text class="margin-left-xs">{{key}}、{{value}}</text>
      </label>
    </radio-group>
    <checkbox-group class="checkbox-group" bindchange="checkboxChange" wx:elif="{{questionList[index].type == 2}}">
      <label class="checkbox my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key"  wx:for-item="value" wx:key="index">
        <checkbox value="{{key}}" checked="{{questionList[index].checked}}" />
        <text class="margin-left-xs">{{key}}、{{value}}</text>
      </label>
    </checkbox-group>
  </view>
  <view class='page-ft flex flex-direction padding padding-bottom-xl' wx:if="{{isOk}}">
    <button bindtap='okFunc' class="cu-btn lg round bg-sky" wx:if="{{index == questionList.length-1}}">提交</button>
    <button bindtap='nextFunc' class="cu-btn lg round bg-sky" wx:else>下一题</button>
  </view>
  <view class='page-ft flex flex-direction padding padding-bottom-xl' wx:else>
    <button bindtap='okFunc' class="cu-btn lg round bg-sky">确定</button>
  </view>

  <view wx:if="{{isOk}}">
    <view class='padding-bottom page-hd padding-top solids-top'>
      <view class="page-title">
        <text class="text-bold">【正确答案】</text>
        {{questionList[index]['true']}}

        
      </view>
    </view>
    <view class='padding-bottom page-hd'>
      <view class="page-title">
        <text class="text-bold">【解析】</text>
        {{questionList[index].analysis || '暂无'}}
      </view>
    </view>
  </view>


</view>

/* pages/test/test.wxss */
page {
  background-color: #fff;
}
.page {
  padding: 20rpx;
}
.page-bd {
  padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {
  display: block;
}
.my-choosebox {
  display: block;
  margin-bottom: 20rpx;
}
.toindex-btn {
  margin-top: 20rpx;
  display:inline-block;
  line-height:2.3;
  font-size:13px;
  padding:0 1.34em;
  color: red;
  float: right;
}



.collect {
  float:right;
  padding-right: 20rpx;
}

.collect .lg {
  font-size: 36rpx;
}

/* 评论区 */
.infoTitle{
  font-size: var(--font-size-M);
  font-weight: 600;
  color: #000;
  margin-bottom: 20rpx;
}
.van-cell{
  padding: 10rpx 0 10rpx 0 !important;
  /* position: relative;
  left: -26rpx; */
  /* font-size: var(--font-size-S); */
}

.noComment{
  /* text-align: center; */
  color: #868688;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}

.comment{
  background-color: #F2F1F6;
  margin-top: var(--font-size-M);
  padding: var(--font-size-S);
  border-radius: var(--font-size-S);
}

.comment_time{
  color: #868688;
  display: inline-block;
  float: right;
}

.comment_nickName{
  display: inline-block;
  color: #868688;
}

.comment_text{
  font-size: 25rpx;
  color: #454547;
}

.commentShell {
  margin-top: 50rpx;
  height: var(--font-size-M);
  margin-bottom: 100rpx;
}

.inputComment{
  /* display: inline-block; */
  /* background-color: aqua; */
  border: var(--color-theme) 1px solid;
  border-radius: var(--font-size-S);
  overflow: hidden;
  width: 95%;
}

/* 评论按钮 */
.submitComment{
  display: inline-block;
  /* align-items : center; */
  /* display: flex; */
  /* float: right; */ 
}

答题成绩页面布局与样式

复制代码 
<view class="page">
  <view class="padding">
    <view class="flex flex-wrap solids-bottom padding-bottom margin-bottom">
      <view class='basis-xs'>
        <view class="cu-avatar round lg margin-left">
          <image class="avatar" src="{{userInfo.avatarUrl}}" mode="widthFix"></image>
        </view>
      </view>
      <view class='basis-xl'>
        <view class="text-bold text-black padding-left-xs padding-top">
          {{userInfo.nickName}}
        </view>
      </view>
    </view>
    <view class='page-head'>
      <view class="page-title padding-bottom-xs text-bold text-lg text-black">
        「{{category}}」专项考试
      </view>
      <view>共{{totalQuestion}}题，满分100分</view>
      <view class='page-score'>
        <text class="score-num text-bold text-yellow">{{totalScore}}分</text>
      </view>
    </view>
    <view class='page-footer'>
      <view class='flex text-grey text-center margin-bottom padding bg-white radius'>
        <view class='solid-right flex flex-direction flex-sub'>
          <view class="text-green text-xxl">{{totalQuestion-wrong}}题</view>
          <view class="margin-top-sm">
            答对
          </view>
        </view>
        <view class='solid-right flex flex-direction flex-sub'>
          <view class="text-gray text-xxl">{{wrong}}题</view>
          <view class="margin-top-sm">
            答错
          </view>
        </view>
        <view class='flex flex-direction flex-sub'>
          <view class="text-xxl text-green">
            {{zql}}%
          </view>
          <view class="margin-top-sm">
            正确率
          </view>
        </view>
      </view>
      <view class="padding flex flex-direction">
        <button bindtap="toDoTestAgain" class="cu-btn lg round bg-sky"> 再答一次 </button>
        <button bindtap="toIndex" class="cu-btn lg round line-sky margin-top"> 返回首页 </button>
        <button class="cu-btn lg round line-sky margin-top" open-type="share"> 推荐给好友 </button>
      </view>
    </view>
  </view>

</view>

/* pages/results/results.wxss */
page {
  background-color: #fff;
}
.page {
  padding: 30rpx;
}
.page-score {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top:20rpx;
}
.mw-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  overflow: hidden;
}
.page-footer {
  margin-top:30rpx;
  text-align: center;
}
.score-num {
  font-size:100rpx;
}

个人中心页面布局与样式

复制代码 
<view class='mw-page'>
  <view class='UCenter-bg'>
    <view class="margin-bottom">
      <view class="cu-avatar xl round">
        <image class="avatar" src="{{userInfo.avatarUrl}}" mode="widthFix"></image>
      </view>
    </view>
    <view class='text-xl'>
      {{userInfo.nickName}}
    </view>
    <view class='margin-top-sm'>
      <text class="cu-tag bg-yellow">会员</text>
    </view>
  </view>
  <view class="cu-list menu card-menu margin-top-xl">
    <view class="cu-item arrow">
      <navigator class='content' url='../rank/rank' hover-class='none'>
        <text class='icon-rankfill text-sky'></text>
        <text class='text-grey'>成绩排行榜</text>
      </navigator>
    </view>
    <view class="cu-item arrow">
      <navigator class='content' url='../history/history' hover-class='none'>
        <text class='icon-formfill text-sky'></text>
        <text class='text-grey'>考试记录</text>
      </navigator>
    </view>
    <view class="cu-item arrow">
      <navigator class='content' url='../myQuestionHistory/myQuestionHistory' hover-class='none'>
        <text class='icon-commentfill text-sky'></text>
        <text class='text-grey'>我的提问</text>
      </navigator>
    </view>
    <view class="cu-item arrow">
      <navigator class='content' url='../myFavorites/myFavorites' hover-class='none'>
        <text class='icon-favorfill text-sky'></text>
        <text class='text-grey'>我的收藏</text>
      </navigator>
    </view>
    <view class="cu-item arrow">
      <button class='cu-btn content' open-type='share'>
        <text class='icon-appreciatefill text-sky'></text>
        <text class='text-grey'>推荐给好友</text>
      </button>
    </view>
    <view class="cu-item arrow">
      <navigator class='content' url='../guide/guide' hover-class='none'>
        <text class='icon-creativefill text-sky'></text>
        <text class='text-grey'>使用说明</text>
      </navigator>
    </view>
  </view>



</view>

page {
  background-color: #f1f1f1;
  padding-bottom: 30rpx;
}
.UCenter-bg {
  /* background-color: #4975f2; */
  background-color: #446fea;
  background-size: cover;
  height: 450rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  width: 750rpx;
  height: 300rpx;
}

.mw-weixin.text-center {
  color: rgb(230, 230, 230);
  padding: 30rpx 0 0;
}

排行榜

答题记录

打完收工。。

相关推荐
程序员秘密基地2 小时前
基于pycharm,python,flask,sklearn,orm,mysql，在线深度学习sql语句检测系统
python·web安全·机器学习·网络安全·scikit-learn
小马大咖4 小时前
在UniApp中开发微信小程序实现图片、音频和视频下载功能
微信小程序·小程序·uni-app
胡斌附体9 小时前
微信小程序调试
微信小程序·小程序·notepad++
Alfadi联盟 萧瑶12 小时前
网络安全从零开始（一）：基础技能全解析
安全·web安全
_龙衣14 小时前
uni-app/vue2：微信小程序实现文件流的下载及预览
微信小程序·uni-app·notepad++
Alfadi联盟 萧瑶14 小时前
Web安全技术体系
安全·web安全
Alfadi联盟 萧瑶15 小时前
网络安全从零开始（二）：细分技术方向深度解析
安全·web安全
酷柚易汛18 小时前
酷柚易汛ERP标签打印解决方案
大数据·微信小程序·erp
程序员阿龙1 天前
基于微信小程序的高校校园微活动管理系统设计与实现（源码+定制+开发）高校微信小程序校园活动发布与互动平台开发 面向大学生群体的校园活动移动平台设计与实现
微信小程序·小程序·活动发布与管理·高校校园活动平台·社团组织管理系统·学生报名签到小程序·移动端高校活动系统
佛系菜狗1 天前
【菜狗work前端】小程序加if判断时不及时刷新 vs Web
微信小程序·uniapp·web
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【2025年最新】OpenWrt 更换国内源的指南（图形界面版)05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06DeepSeek各版本说明与优缺点分析07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Coze扣子平台完整体验和实践（附国内和国际版对比）10巴比达免费内网穿透全面指南