微信小程序-底部标签-竖轮播图-加入视频--【开发实战（第2版）】

微信目录集链接在此：

详细解析黑马微信小程序视频–【思维导图知识范围】	难度★✰✰✰✰
微信小程序开发实战（第2版）入门–【开发实战（第2版）】	★★✰✰✰

不会导入/打开小程序的看这里：参考

微信小程序开发实战（第2版）入门–【开发实战（第2版）】

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

本文效果图

本例包含 了两个知识点：

• 底部标签-
  

• 纵向轮播

• 下半部分-加入视频

在本文的最后也同样新介绍一套鼠标指针：从元气桌面的主题中提取出来，制成了单独安装的版本，不会安装的可以百度一下

怎样安装自己喜欢的鼠标指针方案 如何安装鼠标指针
下载并安装指针方案：
01
下载自己喜欢的鼠标指针方案，解压：

02
解压后我们会看到文件夹下有很多 ani动态光标文件 中有一个 ini文件，右键单击 ini文件（安装文件.ini），执行【安装】命令：

03
等待安装结束后打开【控制面板】→【鼠标】（Win XP 与 Win 7 操作均相同）：

04
打开【鼠标属性】窗口，选择【指针】选项卡，在方案中找到刚才安装的指针方案【Crystal Clear】，然后单击窗口又下脚的【应用】→【确定】完成安装！

第二种方案

轮播图

上一节的案例中也有介绍了。参考《微信小程序-轮播图-九宫格布局–【开发实战（第2版）】》

本案的轮播图代码

这是一般的小程序最常见的轮播图代码段。使用了block wx:for 的标签
不过初学者的话，我倒不建议直接用这种。下面的这种方式要方便理解很多。小程序的开发呢？最好的方式就是，你打消“小程序开发很难”的这种观念，先让小程序每次都运行的很漂亮，然后扫二维码到自己手机上。毕竟兴趣才是学习的第一位。

本例使用的便于理解的轮播代码

<!--pages/picture/picture.wxml-->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
  <swiper-item>
    <image src="/images/timg1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg3.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/timg4.jpg"></image>
  </swiper-item>
</swiper>

官网的文档： 视图容器 /swiper

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
wiper
基础库 1.0.0 开始支持，低版本需做兼容处理。

微信 Windows 版：支持
微信 Mac 版：支持
渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

功能描述
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

通用属性

从上面的参数可知：本案例的代码难度并不难，还是纵向的这个应用场景，确确实实让人感觉上比较舒适。

底部标签-tabBar

什么是 tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
底部 tabBar
顶部 tabBar
注意：
tabBar中 只能配置最少 2 个、最多 5 个 tab 页签（3-4个这种是最常见的）
当渲染顶部 tabBar 时，不显示 icon，只显示文本 (在顶部时一般使用swiper实现效果更好)

理论的部分参考：
《细说小程序底部标签—【浅入深出系列006】》
全部的标签页代码：

{
  "pages": [
    "pages/index/index",
    "pages/guest/guest",
    "pages/video/video",
    "pages/picture/picture"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff4c91",
    "navigationBarTextStyle": "white"
  },  
  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#ff4c91",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/invite.png",
      "selectedIconPath": "images/invite.png",
      "text": "邀请函"
    }, {
      "pagePath": "pages/picture/picture",
      "iconPath": "images/marry.png",
      "selectedIconPath": "images/marry.png",
      "text": "照片"
    }, {
      "pagePath": "pages/video/video",
      "iconPath": "images/video.png",
      "selectedIconPath": "images/video.png",
      "text": "美好时光"
    }, {
      "pagePath": "pages/guest/guest",
      "iconPath": "images/guest.png",
      "selectedIconPath": "images/guest.png",
      "text": "宾客信息"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

知识点

tabBar 是一个很怪的分级，在官方的文档里不属于任何一块。

搜索也没有任何的说明

但是事实上，几乎是任何一个小程序都要tabBar这个组件。

实际操练-tabBar

第一步，就是找到文件。

事实上，这一步很关键，别看我码龄20多年，事实上，不管在哪个项目，都会时不时发生改了半天，发现程序完全不起作用，然后花了N小时，最后发现，改错文件了，当项目一大，代码一多，文件那也是成倍的增长，而且很多的文件有的时候叫的名字是一个，里面的代码也差不多，这个时候那就更容易看错文件了。
友情提示 可以使用资源管理器里的搜索功能，真的很好用。

第二步，先改动一下最显眼的代码

如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列002】》
比如删掉一个代码块。净鼠标的这一段代码删除

删除了之后，要保存文件。

也有可能会出现下面的情况：

要注意的是，此时小程序的调试器界面不动。
这说明可能出现了致命错误，使得小程序开发者工具无法编译，只显示了上一次的效果。
如果把小程序重新打开
就会发现是这样的：

这种就是致命的错误，一般来说，都是在app.js 如app.json里。
这种情况下，在其它的编辑器工具里，是存在后悔药的。比如程序里里使用率最高的idea 系列。

本idea 里使用了颜值插件-《没有颜值插件的编辑器是没有灵魂的–【idea-theme插件】》
在这里就不得不吐槽一下鹅厂的UI ，黑色方案如同摆设，不然，你很难看得清上面的菜单与其它工具的分界，其实就是这个浅色的方案，也不怎么样。更要命的是，小程序的开发工具没有IDEA的那种后悔药。改错了文件 ，是找不到历史版本的。而且，它也没有跟git 集成。
好吧，谁让它是鹅厂的工具呢？

这个时候，Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。
当然了，这也是没有办法的办法了。事实上ctrl+Z 是windows 自创立以来，编辑器都自带的功能。
当然了，在学习的过程中：我是这样做的。原版的ZIP文件在同一级目录下放着。这样改坏了文件之后，就恢复以前的文件，不过在开发的过程中，只能说是要小心一些了。
真心希望鹅厂能多考虑考虑程序员的事情，而少在王者荣耀的皮肤上花一些精力
而且更无语的是，1.06也没升级啥功能，更没有什么特别的新功能，就早早的不支持win7了。人家的idea2023 还没这么任性呢。有大学的校园里还在使用win7系统的是不是应该点赞一下这篇博文呢？

第三步 ，可以换自己喜欢的图标

图标的注意事项

对于WEB比较熟悉的同鞋可以转身离开了。因为微信小程序的图标跟WEB页的菜单的图标确实很像，技术也比较接近。
1 最好要PNG格式。
2 最好准备两个颜色（一为你的应用项目的所用颜色，另一为黑白色）
其实呢，也没有人规定必须要这样的设置，你就是设一个红色一个绿色也可以，但是问题是人家商业性的小程序太多了，大家都这样，那你一个初学者，把握不好颜色，UI的设计的时候，往往就是乱搞一气。
3 最好是跟小程序一起打包，不要放服务器，也不要放云空间。这个东西在小程序这里其实就是相当于网站的菜单，如果第一时间显示不出来那是很糟糕的事情。

补：
PNG（Portable Network Graphics），便携式网络图形，是一种采用无损压缩算法的位图格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
重要的是，他支持alpha–直白一点说就是透明。
“jpg是一种图像文件格式，全称为JPEG（JointPhotographicExpertsGroup），是一种有损压缩格式，能够将图像压缩在很小的储存空间，常见的后缀名为.jpg和.jpeg。

图标资源

阿里图标库 https://www.iconfont.cn/collections/index

打开小程序

并打开app.json
找到tabBar这一段

"tabBar": {
    "color": "#ccc",
    "selectedColor": "#ff4c91",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/invite.png",
      "selectedIconPath": "images/invite.png",
      "text": "邀请函"
    }, {
      "pagePath": "pages/picture/picture",
      "iconPath": "images/marry.png",
      "selectedIconPath": "images/marry.png",
      "text": "照片"
    }, {
      "pagePath": "pages/video/video",
      "iconPath": "images/video.png",
      "selectedIconPath": "images/video.png",
      "text": "美好时光"
    }, {
      "pagePath": "pages/guest/guest",
      "iconPath": "images/guest.png",
      "selectedIconPath": "images/guest.png",
      "text": "宾客信息"
    }]
  },

注意看这里。

这表示这是一个对象，里面有四个属性，分别为pagePath，text，iconPath，selectedIconPath
而“：”号后面就是他们的值。

找到图标

将鼠标称动到 "images/icon/renwu1.png" 上面，然后左手按ctrl按键，鼠标一点击，小程序平台就会帮助跳转到这个图片上面。有的时候会失效:( ，不过自己找到图片也不很难。

再用鼠标，指到资源管理器里的这张图片的位置，右击鼠标。

选择 “在资源管理器中显示”（要注意的是这里的资源管理器是指windows自带的）苹果本的自行对比吧。我的苹果本其实太老了。为了几个菜单去搞一个程序有点太麻烦了，见谅了。不过整体布局是一致的。

最简单，最无赖的手段

去阿里的图标网下接下载替换。

直接下载，然后覆盖原来的文件。不过，有一些图标支持选择灰度值，有一些选择了之后就。

先不要管这个小细节，后面再处理。

回到小程序开发者平台里 重新编译

实际操练-加视频

第一步 安装node.js

参考《微信小程序开发实战（第2版）入门–【开发实战（第2版）】》这个系列的总目录里介绍了node。
启动之后。如下

第二步 没了

安心的看本案的视频就好了。带服务器的例子一般调起来都比较麻烦。

本文章使用的鼠标方案：

有机械控的小朋友可以下载，我最喜欢的是当操作的时候，那个小齿轮还在旋转。也给编程加了一点小乐趣了

配套资源

微信小程序-底部标签-竖轮播图-加入视频–【开发实战（第2版）】
https://download.csdn.net/download/dearmite/88216558

本文章使用的鼠标方案
https://download.csdn.net/download/dearmite/88216566

作业：

1 下载本案例，删一轮播图，截图。 加一张轮播图，截图。
2 修改底部标签页里的图标并替换。截图！
3 启动node.js 截图。
4 在模拟器的播放本案视频，截图。