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

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

需求沟通

进行需求沟通，此处省略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;
}

排行榜

答题记录

打完收工。。