微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局

た入场券 2022-05-13 03:42 251阅读 0赞

# 一、首页布局简单思路 #

回顾上一篇博文，首页的内容主要有轮播图，横向滑动菜单以及菜单对应的view，横向滑动菜单有签到、课堂测试、模拟测试、课堂提问、答问记录五个选项，当点击选项时更新显示view。由于素材和时间有限，所以布局做得相对简单，主要是侧重思路及代码逻辑。

# 二、轮播图 #

查看文档，发现轮播图使用的是swiper组件，swiper有以下属性：

<table style="width:678px;"> 
 <tbody> 
 <tr> 
 <th>属性名</th> 
 <th style="width:141px;">类型</th> 
 <th style="width:162px;">默认值</th> 
 <th style="width:154px;">说明</th> 
 <th style="width:143px;">最低版本</th> 
 </tr> 
 <tr> 
 <td>indicator-dots</td> 
 <td style="width:141px;">Boolean</td> 
 <td style="width:162px;">false</td> 
 <td style="width:154px;">是否显示面板指示点</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>indicator-color</td> 
 <td style="width:141px;">Color</td> 
 <td style="width:162px;">rgba(0, 0, 0, .3)</td> 
 <td style="width:154px;">指示点颜色</td> 
 <td style="width:143px;"><a href="https://www.w3cschool.cn/weixinapp/compatibility.html" rel="nofollow">1.1.0</a></td> 
 </tr> 
 <tr> 
 <td>indicator-active-color</td> 
 <td style="width:141px;">Color</td> 
 <td style="width:162px;">#000000</td> 
 <td style="width:154px;">当前选中的指示点颜色</td> 
 <td style="width:143px;"><a href="https://www.w3cschool.cn/weixinapp/compatibility.html" rel="nofollow">1.1.0</a></td> 
 </tr> 
 <tr> 
 <td>autoplay</td> 
 <td style="width:141px;">Boolean</td> 
 <td style="width:162px;">false</td> 
 <td style="width:154px;">是否自动切换</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>current</td> 
 <td style="width:141px;">Number</td> 
 <td style="width:162px;">0</td> 
 <td style="width:154px;">当前所在页面的 index</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>interval</td> 
 <td style="width:141px;">Number</td> 
 <td style="width:162px;">5000</td> 
 <td style="width:154px;">自动切换时间间隔</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>duration</td> 
 <td style="width:141px;">Number</td> 
 <td style="width:162px;">500</td> 
 <td style="width:154px;">滑动动画时长</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>circular</td> 
 <td style="width:141px;">Boolean</td> 
 <td style="width:162px;">false</td> 
 <td style="width:154px;">是否采用衔接滑动</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>vertical</td> 
 <td style="width:141px;">Boolean</td> 
 <td style="width:162px;">false</td> 
 <td style="width:154px;">滑动方向是否为纵向</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td>bindchange</td> 
 <td style="width:141px;">EventHandle</td> 
 <td style="width:162px;">&nbsp;</td> 
 <td style="width:154px;">current 改变时会触发 change 事件，event.detail = {current: current, source: source}</td> 
 <td style="width:143px;">&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

那就可以定义一个swiper，样式指定高，宽铺满，swiper里的image组件图片100%显示就能铺满屏幕。还有一点，轮播图是从服务器请求的，那应当用一个block去循环请求到的url列表来设置swiper-item里头的image组件，然后遍历在前台显示。前台的代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class='section'&gt; &lt;swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" class='swiper'&gt; &lt;block wx:for="{ {vedioImgUrls}}" wx:key="*this"&gt; &lt;swiper-item id="{ {index}}" catchtap="swiperItemClick" &gt; &lt;image src="{ {item.thumbnail.url}}" /&gt; &lt;/swiper-item&gt; &lt;/block&gt; &lt;/swiper&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

样式代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* 轮播样式 */ .swiper{ width: 100%; height: 240px; } /* 轮播图片样式 */ .swiper swiper-item image{ width: 100%; } </td> 
 </tr> 
 </tbody> 
</table>

当然，现在是空的数据，显示不了啥，因为并没有从服务器获取数据，先指定一个本地图片上海交大计算机网络课程的缩略图，效果如下：

![70][]

# 三、横向滑动菜单 #

查看文档，滑动组件就是scroll-view，scroll-view有比较多的属性，常用属性就是scroll-x和scroll-y:

<table> 
 <tbody> 
 <tr> 
 <th style="width:217px;">属性名</th> 
 <th style="width:144px;">类型</th> 
 <th style="width:86px;">默认值</th> 
 <th style="width:330px;">说明</th> 
 </tr> 
 <tr> 
 <td style="width:217px;">scroll-x</td> 
 <td style="width:144px;">Boolean</td> 
 <td style="width:86px;">false</td> 
 <td style="width:330px;">允许横向滚动</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">scroll-y</td> 
 <td style="width:144px;">Boolean</td> 
 <td style="width:86px;">false</td> 
 <td style="width:330px;">允许纵向滚动</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">upper-threshold</td> 
 <td style="width:144px;">Number</td> 
 <td style="width:86px;">50</td> 
 <td style="width:330px;">距顶部/左边多远时（单位px），触发 scrolltoupper 事件</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">lower-threshold</td> 
 <td style="width:144px;">Number</td> 
 <td style="width:86px;">50</td> 
 <td style="width:330px;">距底部/右边多远时（单位px），触发 scrolltolower 事件</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">scroll-top</td> 
 <td style="width:144px;">Number</td> 
 <td style="width:86px;">&nbsp;</td> 
 <td style="width:330px;">设置竖向滚动条位置</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">scroll-left</td> 
 <td style="width:144px;">Number</td> 
 <td style="width:86px;">&nbsp;</td> 
 <td style="width:330px;">设置横向滚动条位置</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">scroll-into-view</td> 
 <td style="width:144px;">String</td> 
 <td style="width:86px;">&nbsp;</td> 
 <td style="width:330px;">值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">scroll-with-animation</td> 
 <td style="width:144px;">Boolean</td> 
 <td style="width:86px;">false</td> 
 <td style="width:330px;">在设置滚动条位置时使用动画过渡</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">enable-back-to-top</td> 
 <td style="width:144px;">Boolean</td> 
 <td style="width:86px;">false</td> 
 <td style="width:330px;">iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">bindscrolltoupper</td> 
 <td style="width:144px;">EventHandle</td> 
 <td style="width:86px;">&nbsp;</td> 
 <td style="width:330px;">滚动到顶部/左边，会触发 scrolltoupper 事件</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">bindscrolltolower</td> 
 <td style="width:144px;">EventHandle</td> 
 <td style="width:86px;">&nbsp;</td> 
 <td style="width:330px;">滚动到底部/右边，会触发 scrolltolower 事件</td> 
 </tr> 
 <tr> 
 <td style="width:217px;">bindscroll</td> 
 <td style="width:144px;">EventHandle</td> 
 <td style="width:86px;">&nbsp;</td> 
 <td style="width:330px;">滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td> 
 </tr> 
 </tbody> 
</table>

于是思路就是给一个scroll-view设置scroll-x属性为true，然后scroll-view里头有五个菜单label，这里说下label是可以把几个组件合并的，在点击事件的使用有意想不到的效果，于是得到前台代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class='section'&gt; &lt;scroll-view class="categories" scroll-x="true"&gt; &lt;block wx:for="{ {selectedScrollItems}}" wx:key="*this"&gt; &lt;label class="category" id="{ {index}}" bindtap='scrollMenuClick'&gt; &lt;view wx:if="{ {menuIndex==index}}" style='color:green; font-size: 18px;'&gt;{ {item}}&lt;/view&gt; &lt;view wx:else style='color:royalblue;'&gt;{ {item}}&lt;/view&gt; &lt;/label&gt; &lt;/block&gt; &lt;/scroll-view&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

样式代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* 滑动菜单样式 */ .categories { height: 40px; line-height: 40px; border: 1px solid #eee; white-space: nowrap; display: flex; } /* 滑动菜单item样式 */ .categories .category { width: 80px; height: 40px; text-align: center; display: inline-block; border-right: 1px solid #eee; color: royalblue; font-size: 15px; } </td> 
 </tr> 
 </tbody> 
</table>

效果如下：

![70 1][]

# 四、子菜单对应view #

首先，需求是点击选项显示不同的界面，那么思路就可以这样：设计5个view，点到谁谁显示其他隐藏就好。那么逻辑就是在前台写五个view，后台写五个view对应的标记，当选中时该对应标记为true，前台根据这个标记去判定是否渲染，于是得到前台代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class='section' hidden='{ {selectedScrollItemsHiddenSign[0]}}'&gt; 签到 &lt;/view&gt; &nbsp; &lt;view class='section' hidden='{ {selectedScrollItemsHiddenSign[1]}}'&gt; 课堂测试 &lt;/view&gt; &nbsp; &lt;view class='section' hidden='{ {selectedScrollItemsHiddenSign[2]}}'&gt; 模拟测试 &lt;/view&gt; &nbsp; &lt;view class='section' hidden='{ {selectedScrollItemsHiddenSign[3]}}'&gt; 课堂提问 &lt;/view&gt; &nbsp; &lt;view class='section' hidden='{ {selectedScrollItemsHiddenSign[4]}}'&gt; 答问记录 &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

后台代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> data{ // 菜单选项 selectedScrollItems: ['签到', '课堂测试', '模拟测试', '课堂提问', '答问记录'], // 菜单选项隐藏和显示标志 selectedScrollItemsHiddenSign: [false, true, true, true, true] } </td> 
 </tr> 
 </tbody> 
</table>

在scroll-view绑定的scrollMenuClick事件里头代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> scrollMenuClick:function(e){ // 隐藏其他页面并显示当前点击的菜单页面 for (var i = 0; i &lt; this.data.selectedScrollItemsHiddenSign.length;i++){ if (i == e.currentTarget.id) this.data.selectedScrollItemsHiddenSign[i] = false; else this.data.selectedScrollItemsHiddenSign[i] = true; } this.setData({ menuIndex: e.currentTarget.id, selectedScrollItemsHiddenSign: this.data.selectedScrollItemsHiddenSign}); // 显示加载logo wx.showToast({ title: '加载中', icon: 'loading', duration:10000 }); &nbsp; // 选中第一个菜单 if (e.currentTarget.id == 0){ setTimeout(function () { wx.hideToast() }, 3000); }// 选中第二个菜单，加载课堂测试题 else if (e.currentTarget.id == 1){ setTimeout(function () { wx.hideToast() }, 3000); } // 选中第三个菜单 else if (e.currentTarget.id == 2) { setTimeout(function () { wx.hideToast() }, 3000); } // 选中第四个菜单 else if (e.currentTarget.id == 3) { setTimeout(function () { wx.hideToast() }, 3000); } // 选中最后一个菜单 else { setTimeout(function () { wx.hideToast() }, 3000); } } </td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 2][]

# 五、设置tabBar #

如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1. 当设置 position 为 top 时，将不会显示 icon

2. tabBar 是一个数组，**只能配置最少2个、最多5个 tab**，tab 按数组的顺序排序。

具体属性如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <th>属性</th> 
 <th>类型</th> 
 <th>必填</th> 
 <th>默认值</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>color</td> 
 <td>HexColor</td> 
 <td>是</td> 
 <td>&nbsp;</td> 
 <td>tab 上的文字默认颜色</td> 
 </tr> 
 <tr> 
 <td>selectedColor</td> 
 <td>HexColor</td> 
 <td>是</td> 
 <td>&nbsp;</td> 
 <td>tab 上的文字选中时的颜色</td> 
 </tr> 
 <tr> 
 <td>backgroundColor</td> 
 <td>HexColor</td> 
 <td>是</td> 
 <td>&nbsp;</td> 
 <td>tab 的背景色</td> 
 </tr> 
 <tr> 
 <td>borderStyle</td> 
 <td>String</td> 
 <td>否</td> 
 <td>black</td> 
 <td>tabbar上边框的颜色， 仅支持 black/white</td> 
 </tr> 
 <tr> 
 <td>list</td> 
 <td>Array</td> 
 <td>是</td> 
 <td>&nbsp;</td> 
 <td>tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td> 
 </tr> 
 <tr> 
 <td>position</td> 
 <td>String</td> 
 <td>否</td> 
 <td>bottom</td> 
 <td>可选值 bottom、top</td> 
 </tr> 
 </tbody> 
</table>

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <th>属性</th> 
 <th>类型</th> 
 <th>必填</th> 
 <th>说明</th> 
 </tr> 
 <tr> 
 <td>pagePath</td> 
 <td>String</td> 
 <td>是</td> 
 <td>页面路径，必须在 pages 中先定义</td> 
 </tr> 
 <tr> 
 <td>text</td> 
 <td>String</td> 
 <td>是</td> 
 <td>tab 上按钮文字</td> 
 </tr> 
 <tr> 
 <td>iconPath</td> 
 <td>String</td> 
 <td>否</td> 
 <td>图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效</td> 
 </tr> 
 <tr> 
 <td>selectedIconPath</td> 
 <td>String</td> 
 <td>否</td> 
 <td>选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效</td> 
 </tr> 
 </tbody> 
</table>

于是，结合我们上一篇的需求，制作tabBar需要三个页面即三个page，因此app.json配置如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> { "pages": [ "pages/main/main", "pages/post/post", "pages/mine/mine", "pages/vedioPlayer/vedioPlayer", "pages/start/start" ], "window": { "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#118fff", "navigationBarTitleText": "课堂宝", "backgroundColor": "#fff" }, "tabBar": { "color": "#9BABBA", "selectedColor": "#495056", "borderStyle": "black", "backgroundColor": "dark", "list": [ { "pagePath": "pages/main/main", "text": "首页", "iconPath": "static/images/tar-home.png", "selectedIconPath": "static/images/tar-home-on.png" }, { "pagePath": "pages/post/post", "text": "习题", "iconPath": "static/sources/发帖32x32.png", "selectedIconPath": "static/sources/发帖32x32hl.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/sources/我的32x32.png", "selectedIconPath": "static/sources/我的32x32hl.png" } ] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 } } </td> 
 </tr> 
 </tbody> 
</table>

于是就得到界面效果如下：

![70 3][]

下一篇将会写到签到子页面的布局及连接服务器获得视频信息并加载播放等。

[70]: /images/20220513/4d418c63b7594f369ca01867cbf60ffb.png
[70 1]: /images/20220513/faf1c4e706b7455d8905a14f31cc8799.png
[70 2]: /images/20220513/6d702635417340048a8397599ee49938.png
[70 3]: /images/20220513/52b90358c4de4e7aa6ad917436514bb3.png