微信目录集链接在此：

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

不会导入/打开小程序的看这里：参考
微信小程序开发实战（第2版）入门–【开发实战（第2版）】

文章目录

本系列校训
学习资源的选择
本文效果图
实际操练-轮播
实际操练-tabBar
图标的注意事项
实际操练-九宫格
本文章使用的鼠标方案：
配套资源
作业：

本系列校训

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

学习资源的选择

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

本文效果图

注：真实界面无外围的装饰
在这里插入图片描述

本例包含了以下知识点：

底部标签-
九宫格

轮播图

在本文的最后也同样新介绍一套鼠标指针：从元气桌面的主题中提取出来，制成了单独安装的版本，不会安装的可以百度一下，本文最后也附了安装教程
情人节的鼠标方案，那必须是爱心之箭呀
在这里插入图片描述

轮播图

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

本案的轮播图代码

  <swiper indicator-dots="{
   
   {indicatorDots}}" autoplay="{
   
   {autoplay}}" interval="{
   
   {interval}}" duration="{
   
   {duration}}">
    <block wx:for="{
   
   {imgUrls}}">
      <swiper-item>
        <image src="{
   
   {item}}" class="silde-image" style="width:100%;height:176px;"></image>
      </swiper-item>
    </block>
  </swiper>

这是一般的小程序最常见的轮播图代码段。使用了block wx:for 的标签

页面全部代码在此：

<view class="haibao">
  <swiper indicator-dots="{
   
   {indicatorDots}}" autoplay="{
   
   {autoplay}}" interval="{
   
   {interval}}" duration="{
   
   {duration}}">
    <block wx:for="{
   
   {imgUrls}}">
      <swiper-item>
        <image src="{
   
   {item}}" class="silde-image" style="width:100%;height:176px;"></image>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="nav">
  <block wx:for="{
   
   {navs}}">
    <view class="item" bindtap="navBtn" id="{
   
   {index}}">
      <view>
        <image src="{
   
   {item.img}}" style="width:58px;height:56px;"></image>
      </view>
      <view>
        {
   
   {item.name}}
      </view>
    </view>
  </block>
</view>
<view class="hr"></view>

因为使用了wx:for 所以，还需要到 js里找图片资源：

 data: {
    
    
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    imgUrls: [
      "../../images/haibao/1.jpg",
      "../../images/haibao/2.jpg",
      "../../images/haibao/3.jpg",
      "../../images/haibao/4.jpg"
    ],
    navs: []
  },

全部的JS文件：

Page({
    
    
  data: {
    
    
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    imgUrls: [
      "../../images/haibao/1.jpg",
      "../../images/haibao/2.jpg",
      "../../images/haibao/3.jpg",
      "../../images/haibao/4.jpg"
    ],
    navs: []
  },
  onLoad: function (options) {
    
    
    var page = this;
    var navs = this.loadNavData();
    page.setData({
    
     navs: navs });
  },
  navBtn: function (e) {
    
    
    console.log(e);
    var id = e.currentTarget.id;
    if (id == "9") {
    
    
      wx.navigateTo({
    
    
        url: '../type/type'
      })
    }

  },
  loadNavData: function () {
    
    
    var navs = [];
    var nav0 = new Object();
    nav0.img = '../../images/nav/dxy.jpg';
    nav0.name = '订喜宴';
    navs[0] = nav0;

    var nav1 = new Object();
    nav1.img = '../../images/nav/phz.jpg';
    nav1.name = '拍婚照';
    navs[1] = nav1;

    var nav2 = new Object();
    nav2.img = '../../images/nav/zhq.jpg';
    nav2.name = '找婚庆';
    navs[2] = nav2;

    var nav3 = new Object();
    nav3.img = '../../images/nav/dhj.jpg';
    nav3.name = '订婚戒';
    navs[3] = nav3;

    var nav4 = new Object();
    nav4.img = '../../images/nav/xhs.jpg';
    nav4.name = '选婚纱';
    navs[4] = nav4;

    var nav5 = new Object();
    nav5.img = '../../images/nav/thp.jpg';
    nav5.name = '淘婚品';
    navs[5] = nav5;

    var nav6 = new Object();
    nav6.img = '../../images/nav/dmy.jpg';
    nav6.name = '度蜜月';
    navs[6] = nav6;

    var nav7 = new Object();
    nav7.img = '../../images/nav/zhc.jpg';
    nav7.name = '租婚车';
    navs[7] = nav7;

    var nav8 = new Object();
    nav8.img = '../../images/nav/mxn.jpg';
    nav8.name = '美新娘';
    navs[8] = nav8;

    var nav9 = new Object();
    nav9.img = '../../images/nav/qbfl.jpg';
    nav9.name = '全部分类';
    navs[9] = nav9;
    return navs;
  }
})

官网的文档：视图容器 /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/cash/cash",
    "pages/marry/marry",
    "pages/community/community",
    "pages/me/me",
    "pages/type/type"
  ],
  "window": {
    
    
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff4c91",
    "navigationBarTitleText": " 我们结婚吧！",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    
    
    "selectedColor": "#D73E3E",
    "backgroundColor": "#ff4c91",
    "borderStyle": "white",
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/bar/avatar.png",
        "selectedIconPath": "images/bar/avatar.png"
      },
      {
    
    
        "pagePath": "pages/cash/cash",
        "text": "彩礼",
        "iconPath": "images/bar/marry.png",
        "selectedIconPath": "images/bar/marry.png"
      },
      {
    
    
        "pagePath": "pages/marry/marry",
        "text": "婚博会",
        "iconPath": "images/bar/guest.png",
        "selectedIconPath": "images/bar/guest.png"
      },
      {
    
    
        "pagePath": "pages/community/community",
        "text": "结婚日",
        "iconPath": "images/bar/wedding.png",
        "selectedIconPath": "images/bar/wedding.png"
      },
      {
    
    
        "pagePath": "pages/me/me",
        "text": "联系我",
        "iconPath": "images/bar/invite.png",
        "selectedIconPath": "images/bar/invite.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

知识点

tabBar 是一个很怪的分级，在官方的文档里不属于任何一块。
在这里插入图片描述
搜索也没有任何的说明

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

九宫格的实现

在这里插入图片描述
1、首先添加图片资源文件

在项目根目录新建一个目录，取名为images , 用于存放图片资源，然后添加进入几张图片
　在这里插入图片描述

2、在index目录下的index.js 文件中进行数据源的配置
在这里插入图片描述

3、依据列表渲染的知识点进行index.wxml的编程

在这里插入图片描述

页面

<view class="haibao">
  <swiper indicator-dots="{
   
   {indicatorDots}}" autoplay="{
   
   {autoplay}}" interval="{
   
   {interval}}" duration="{
   
   {duration}}">
    <block wx:for="{
   
   {imgUrls}}">
      <swiper-item>
        <image src="{
   
   {item}}" class="silde-image" style="width:100%;height:176px;"></image>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="nav">
  <block wx:for="{
   
   {navs}}">
    <view class="item" bindtap="navBtn" id="{
   
   {index}}">
      <view>
        <image src="{
   
   {item.img}}" style="width:58px;height:56px;"></image>
      </view>
      <view>
        {
   
   {item.name}}
      </view>
    </view>
  </block>
</view>
<view class="hr"></view>

样式

.nav{
  text-align: center;
}
.item{
   margin-top:15px; 
   text-align: center;
   font-family: "Microsoft YaHei";
   font-size: 13px;
   width: 60px;
   display: inline-block;
   margin-right:10px; 
}
.hr{
  height: 1px;
  background-color: #cccccc;
  opacity: 0.2;
  margin-top:10px; 
}

这是一般的九宫格的用法，
还是使用了wx:for + data 的做法。

实际操练-轮播

怎么样克服自己对代码的恐惧？当然是你改动一点，就可以看到程序的变化了。

第一步，就是找到文件。

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

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

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

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

也有可能会出现下面的情况：
在这里插入图片描述
这种情况，一般就是标签不匹配。

这个时候，Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。

第三步狸猫换太子

将鼠标移动到 <image src="***"> 这里，开发平台就会友善的提示，ctril+单击跳到相应的图片上。

截图最好的按着原来的比例。可以放大两倍，或三倍，这样的图片更清晰。
在微信小程序开发者工具里打开图片，注意右下角。
在这里插入图片描述
然后使用截图工具，用固定大小，或改变大小。参见《论文里图片样式的技巧-FastStone Capture使用–【毕业论文】》
替换的图片如图：

在这里插入图片描述
重新编译小程序：

实际操练-tabBar

最初的效果其实是这样的
在这里插入图片描述

第一步，就是找到文件。

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

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

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

也有可能会出现下面的情况：
在这里插入图片描述

要注意的是，此时小程序的调试器界面不动。
这说明可能出现了致命错误，使得小程序开发者工具无法编译，只显示了上一次的效果。
如果把小程序重新打开
就会发现是这样的：
在这里插入图片描述
这种就是致命的错误，一般来说，都是在app.js 如app.json里。
这种情况下，在其它的编辑器工具里，是存在后悔药的。比如程序里里使用率最高的idea 系列。

本idea 里使用了颜值插件-《没有颜值插件的编辑器是没有灵魂的–【idea-theme插件】》
在这里就不得不吐槽一下鹅厂的UI ，黑色方案如同摆设，不然，你很难看得清上面的菜单与其它工具的分界，其实就是这个浅色的方案，也不怎么样。更要命的是，小程序的开发工具没有IDEA的那种后悔药。改错了文件，是找不到历史版本的。而且，它也没有跟git 集成。
好吧，谁让它是鹅厂的工具呢？
在这里插入图片描述
这个时候，Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。
当然了，这也是没有办法的办法了。事实上ctrl+Z 是windows 自创立以来，编辑器都自带的功能。
当然了，在学习的过程中：我是这样做的。原版的ZIP文件在同一级目录下放着。这样改坏了文件之后，就恢复以前的文件，不过在开发的过程中，只能说是要小心一些了。
真心希望鹅厂能多考虑考虑程序员的事情，而少在王者荣耀的皮肤上花一些精力

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

图标的注意事项

对于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
在这里插入图片描述

打开小程序

最简单，最无赖的手段

去阿里的图标网下接下载替换。
在这里插入图片描述

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

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

回到小程序开发者平台里重新编译
是不是很漂亮呢？如果你发布在鹅厂的平台上，通过审核，还可以把二维码发给你心目中的她哟！
在这里插入图片描述

实际操练-九宫格

略，换图像，跟上面的一样，
换链接，需要新建页面了。工作量较大，这里不再详述了。

本文章使用的鼠标方案：

情人节的鼠标方案，那必须是爱心之箭呀
在这里插入图片描述

配套资源

微信小程序碰到情人节-我们结婚吧—【小程序花园】
https://download.csdn.net/download/dearmite/88234002

情人节的鼠标方案，爱心之箭
https://download.csdn.net/download/dearmite/88234013

作业：

1 下载本案例，删一轮播图，截图。加一张轮播图，截图。
2 修改底部标签页里的图标并替换。截图！
3 更换9宫格的图标，修改链接。截图！

怎样安装自己喜欢的鼠标指针方案如何安装鼠标指针
下载并安装指针方案：
01
下载自己喜欢的鼠标指针方案，解压：
在这里插入图片描述

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

03
等待安装结束后打开【控制面板】→【鼠标】（Win XP 与 Win 7 操作均相同）：
在这里插入图片描述

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

微信小程序碰到情人节-我们结婚吧---【小程序花园】

文章目录

本系列校训

学习资源的选择

本文效果图

轮播图

本案的轮播图代码

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

底部标签-tabBar

知识点

九宫格的实现

实际操练-轮播

第一步，就是找到文件。

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

第三步狸猫换太子

实际操练-tabBar

第一步，就是找到文件。

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

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

图标的注意事项

图标资源

打开小程序

最简单，最无赖的手段

实际操练-九宫格

本文章使用的鼠标方案：

配套资源

作业：

猜你喜欢

微信小程序碰到情人节-我们结婚吧---【小程序花园】

文章目录

本系列校训

学习资源的选择

本文效果图

轮播图

本案的轮播图代码

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

底部标签-tabBar

知识点

九宫格的实现

实际操练-轮播

第一步，就是找到文件。

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

第三步 狸猫换太子

实际操练-tabBar

第一步，就是找到文件。

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

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

图标的注意事项

图标资源

打开小程序

最简单，最无赖的手段

实际操练-九宫格

本文章使用的鼠标方案：

配套资源

作业：

猜你喜欢

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

第三步狸猫换太子

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