微信小程序云开发实战-答题积分赛小程序
界面交互篇：首页页面布局款式与逻辑交互开发
首页效果图
布局思路
5行布局，即5个块级元素，轮播图、通告栏、个人信息、功能区、版权。
实现细节
轮播图区域
实现轮播图成果，能够拆分一下，先实现图片展现成果，再实现轮播成果。须要应用图片组件image、滑块视图容器swiper。图片组件image在index.wxml中，编写布局代码：
<image src="/images/b2.jpg"></image>
保留后，在模拟器实时预览成果：
显然，这样的页面成果并不合乎咱们的预期。咱们想要的页面成果是，图片宽度要占满屏幕的。所以，我给它设置了两项：在index.wxml中，增加属性mode和class，并设置其值，编写布局代码：
<image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image>在index.wss中，增加设置宽度的款式，编写款式代码：
`.banner-img {
width: 100%;}`
保留后，在模拟器实时预览成果：
补充阐明：对于image组件的mode=widthFix。
widthFix：缩放模式，宽度不变，高度主动变动，放弃原图宽高比不变。
块视图容器swiper
swiper只可搁置swiper-item组件。在index.wxml中，编写布局代码：
<swiper> <swiper-item> <image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image> </swiper-item></swiper>保留后，在模拟器实时预览成果：
因为只有一张图片，所以看不出来，然而你能够左右滑动试试看，就明确了。好吧，咱们多增加两个，再欠缺一下，在index.wxml中，编写布局代码：
<swiper class="screen-swiper" indicator-dots="{{true}}"> <swiper-item> <image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image> </swiper-item> <swiper-item> <image src="/images/b3.jpg" mode='widthFix' class="banner-img"></image> </swiper-item> <swiper-item> <image src="/images/b4.jpg" mode='widthFix' class="banner-img"></image> </swiper-item></swiper>保留后，在模拟器实时预览成果：
看着轮播图成果就曾经根本欠缺了。然而，想让它实现主动轮播，怎么办？再增加几个属性吧，在index.wxml中，编写布局代码：
<!-- 轮播图 start --><swiper class="screen-swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="5000" duration="500"> <swiper-item> <image src="/images/b2.jpg" mode='widthFix' class="banner-img"></image> </swiper-item> <swiper-item> <image src="/images/b3.jpg" mode='widthFix' class="banner-img"></image> </swiper-item> <swiper-item> <image src="/images/b4.jpg" mode='widthFix' class="banner-img"></image> </swiper-item></swiper><!-- 轮播图 end -->补充阐明，对于swiper组件本次所利用到的属性：
通告栏
在index.wxml中，编写布局代码：
<!-- 通告栏 start --><view class="bg-orange light padding-sm text-sm"> <text class="icon-notice"></text> <text>欢送来到「护网专题信息安全常识竞答」，S2赛季炽热进行中~</text></view><!-- 通告栏 end -->个人信息区域
在index.wxml中，编写布局代码：
<!-- 个人信息区域 start --><view class="container"> <view class="power padding-left-sl"> <view class="cu-avatar"> <image class="avatar" src="/images/0.png" mode="widthFix"></image> </view> <view class="power_info"> <view class="power_info_text"> <view class="power_info_text_title">张三</view> <view class="power_info_text_tip">积分：100</view> </view> <image class="power_info_more" src="/images/arrow.svg"></image> </view> </view></view><!-- 个人信息区域 end -->在index.wss中，编写款式代码：
.container { display: flex; flex-direction: column; align-items: center; box-sizing: border-box;}.power { margin-top: 30rpx; border-radius: 5px; background-color: white; width: 93%; padding-bottom: 1rpx; position: relative; border: 2rpx solid #ddd;}.padding-left-sl { padding-left: 130rpx;}.cu-avatar { position: absolute; top: 40rpx; left: 20rpx; width: 100rpx;}.power_info { display: flex; padding: 30rpx 25rpx; align-items: center; justify-content: space-between;}.power_info_more { width: 30rpx; height: 30rpx; transform: rotate(0deg);}.power_info_less { width: 30rpx; height: 30rpx; transform: rotate(270deg);}.power_info_text { display: flex; flex-direction: column;}.power_info_text_title { font-weight: 400; font-size: 35rpx;}.power_info_text_tip { color: rgba(0, 0, 0, 0.4); font-size: 25rpx; margin-top: 10rpx;}.power_item { padding: 30rpx 25rpx; display: flex; justify-content: space-between;}.power_item_title { font-size: 30rpx;}.power_item_icon { width: 30rpx; height: 30rpx;}保留后，在模拟器实时预览成果：
主性能按钮区域
在index.wxml中，编写布局代码：
<!-- 主性能按钮区域 start --><view class='grid col-2 padding-left-xs padding-right-xs padding-top-sm'> <view class='padding-sm'> <view class='bg-sky padding radius btn-box'> <view class="text-lg">开始答题</view> <view class='margin-top-sm text-Abc'>从题库中随机抽题</view> <view class="icon-box"> <text class="icon-writefill text-white"></text> </view> </view> </view> <view class='padding-sm'> <view class='bg-yellow padding radius btn-box'> <view class="text-lg">积分排名</view> <view class='margin-top-sm text-Abc'>积分由高到低排行</view> <view class="icon-box"> <text class="icon-upstagefill text-white"></text> </view> </view> </view></view><!-- 主性能按钮区域 end -->在index.wss中，编写款式代码：
.line { width: 95%; margin: 0 auto; height: 2rpx; background-color: rgba(0, 0, 0, 0.1);}.icon-box { text-align: right; padding-top: 50rpx;}.icon-box text { font-size: 150rpx;}保留后，在模拟器实时预览成果：
底部版权申明
在index.wxml中，编写布局代码：
<!-- 底部版权申明 start --><view class="environment"> 版权所有 ©木番薯科技</view><!-- 底部版权申明 end -->在index.wss中，编写款式代码：
.environment { color: #ccc; font-size: 24rpx; margin-top: 15%; text-align: center;}保留后，在模拟器实时预览成果：
这样，首页的动态界面就实现了。
页面跳转逻辑交互
实现页面跳转逻辑交互，有两种形式：
1、通过导航组件 navigator，增加页面链接的形式实现；
2、通过API路由wx.navigateTo，增加点击事件监听及其处理函数的形式实现；
这里，我抉择后者去进行实现。
跳转至集体核心页
增加点击事件，在index.wxml中，编写布局代码：
实现路由跳转，在index.js中，编写布局代码：
goToMy() { wx.navigateTo({ url: '../my/my' })}跳转至答题页
增加点击事件，在index.wxml中，编写布局代码：
实现路由跳转，在index.js中，编写布局代码：
goToTest() { wx.navigateTo({ url: '../test/test' })}跳转至积分排名页
增加点击事件，在index.wxml中，编写布局代码：
实现路由跳转，在index.js中，编写布局代码：
goToRank() { wx.navigateTo({ url: '../rank/rank' })}