网络安全知识问答微信小程序的设计与实现,说白了,就是搭建一款网络安全知识问答微信小程序,类似网络安全百科直通车。三步走。
需求沟通
进行需求沟通,此处省略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;
}

排行榜

答题记录

打完收工。。
