微信小程序-轮播图-九宫格布局--【开发实战(第2版)】

小程序 0

微信目录集链接在此:

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

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

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

文章目录

  • 本系列校训
  • 学习资源的选择
  • 本文效果图
    • 轮播图
    • 最常见的轮播图代码
    • 本例使用的便于理解的轮播代码
    • 两种轮播代码的比较
    • 九宫格
    • 九宫格的实现
  • 实际操练-轮播
    • 第一步,就是找到文件。
    • 第二步,先改动一下最显眼的代码
    • 第三步 狸猫换太子
    • 第四步 加一点,走两步
  • 实际操练-九宫
    • 第一步 找到文件
    • 第二步 删一段最显眼的代码
    • 第三步 修改自己喜欢的样式
  • 本文章使用的鼠标方案:
  • 配套资源
  • 作业:

本系列校训

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

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:

P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。

本文效果图

在这里插入图片描述
本例包含 了两个知识点:

  • 上半部分–轮播图
  • 下半部分-九宫格

轮播图

基本上只要你看到的网站(90%以上),都会看到轮播图,轮播如此重要,基本上成了网站的必备的模块,甚至有一些页面里面也大量出现轮播
小程序上呢?也是一样,毕竟小程序大概率也是一种商业的网站。当然也得要使用轮播了
在这里插入图片描述

最常见的轮播图代码

<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"		 circular="circular">			<block wx:for="{{banners}}" wx:key="id">				<swiper-item>					<image bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}_m" class="slide-image" />				</swiper-item>			</block>		</swiper>

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

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

<swiper indicator-dots="true" autoplay="true" interval="3000">  <swiper-item>    <image src="/images/swiper01.jpg"></image>  </swiper-item>  <swiper-item>    <image src="/images/swiper02.jpg"></image>  </swiper-item></swiper>

两种轮播代码的比较

第一种是万能型,即可以做静态的纯前端,也可以后端定制,比如说你的小程序轮播图需要后台人员更换图片,
第二种就是纯前端,更换图片不太方便,但是就因为他方便,而且也不用数据库更换,所以也就更适合公司网站的这种小程序。
所以也不能说这种方式没有用武之地。

九宫格

九宫格,一款数字游戏,起源于河图洛书,与洛书是中国古代流传下来的两幅神秘图案,历来被认为是河洛文化的滥觞,中华文明的源头,被誉为宇宙魔方。
传上古伏羲氏时,洛阳东北孟津县境内的黄河中浮出龙马,背负河图,献给伏羲。伏羲依此而演成八卦,后为《周易》来源。又相传,大禹时,洛阳西洛宁县洛河中浮出神龟,背驮洛书,献给大禹。大禹依此治水成功,遂划天下为九州。又依此定九章大法,治理社会,流传下来收入《尚书》中,名《洪范》。
在这里插入图片描述
这个东西的历史那就悠久了,应用的方面那更是遍地都是,什么摄影,毛笔,数字游戏。小学生加减法等等。
不得不说,早期的小程序,尤其是主页真的是80%都是这种布局。请看下图,当然了,没有本文的例子那么精致。
在这里插入图片描述

九宫格的实现

1、首先添加图片资源文件

在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片
  在这里插入图片描述
2、在home目录下的home.js 文件中 进行数据源的配置
在这里插入图片描述
3、依据列表渲染的知识点进行home.wxml的编程
①、从效果图上每个item都被细线包围,这是构建思路是,外部一个view,绘制顶部边框线

最外层view样式:
在这里插入图片描述
②、外部view里面每一个item绘制右侧和下侧的边框线, 每个item的宽度设为33.33333% 意味着一行显示均分显示3个item。
在这里插入图片描述
③、每个item内部包含一个图片和一个文字,且item可以点击跳转到各自指定的页面

这里使用navigation组件

这是一般的九宫格的用法,
还是使用了wx:for + data 的做法。
全部代码如下:
home.wxml文件

<view class="home_grids">  <block wx:for="{{griddata}}" wx:key="item.name">   <navigator url="../{{item.url}}/{{item.url}}" class='home_grid'>    <image src="{{item.img}}" class="home_icon"></image>    <view class="home_grid_text">{{item.name}}</view>   </navigator>  </block> </view>

home.wxss文件

   .home_grids {   border-top: 1rpx solid #D9D9D9;   overflow: hidden;   margin-top: 10px  }  .home_grid{   position: relative;    float: left;    padding: 20px 10px;    width: 33.33333333%;   box-sizing: border-box;   border-right: 1rpx solid #D9D9D9;   border-bottom: 1rpx solid #D9D9D9;  }

实际操练-轮播

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

第一步,就是找到文件。

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

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

如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列002】》
比如删掉一个代码块。净鼠标的这一段代码删除
在这里插入图片描述
删除了之后,要保存文件。
在这里插入图片描述
也有可能会出现下面的情况:
在这里插入图片描述
这种情况,一般就是标签 不匹配。

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

第三步 狸猫换太子

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

在这里插入图片描述
在这里插入图片描述
然后就可以换图片了。这样是不是感觉很爽?
在这里插入图片描述

第四步 加一点,走两步

在这里插入图片描述
3张图的轮播代码:

<!--轮播图区域的结构 --><swiper indicator-dots="true" autoplay="true" interval="3000">  <swiper-item>    <image src="/images/swiper01.jpg"></image>  </swiper-item>  <swiper-item>    <image src="/images/swiper02.jpg"></image>  </swiper-item>  <swiper-item>    <image src="/images/swiper03.jpg"></image>  </swiper-item></swiper>

实际操练-九宫

第一步 找到文件

在这里插入图片描述

第二步 删一段最显眼的代码

在这里插入图片描述

第三步 修改自己喜欢的样式

其实,九宫格的作用最大的应该是wxss
页面部分(我更喜欢叫wxml–微信妹儿)

<view class="grids">  <view class="item">    <image src="/images/shi.png"></image>    <text>美食</text>  </view>  <view class="item">    <image src="/images/xiu.png"></image>    <text>装修</text>  </view>  <view class="item">    <image src="/images/yu.png"></image>    <text>洗浴</text>  </view>  <view class="item">    <image src="/images/che.png"></image>    <text>汽车</text>  </view>  <view class="item">    <image src="/images/chang.png"></image>    <text>唱歌</text>  </view>  <view class="item">    <image src="/images/fang.png"></image>    <text>住宿</text>  </view>  <view class="item">    <image src="/images/xue.png"></image>    <text>学习</text>  </view>  <view class="item">    <image src="/images/gong.png"></image>    <text>工作</text>  </view>  <view class="item">    <image src="/images/hun.png"></image>    <text>结婚</text>  </view></view>

wxss(微信大小S)

在这里插入图片描述

/* pages/grid/grid.wxss *//* 轮播图区域的样式 */swiper {  height: 350rpx;}swiper image {  width: 100%;  height: 100%;}/* 九宫格区域的样式 */.grids {  display: flex;  flex-wrap: wrap;}/* 九宫格区域中每一个格子的样式 */.grids .item {  width: 250rpx;  height: 250rpx;  border-right: 1rpx solid #eee;  border-bottom: 1rpx solid #eee;  box-sizing: border-box;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}.grids .item:nth-child(3) {  border-right: 0;}.grids .item:nth-child(6) {  border-right: 0;}.grids .item:nth-child(9) {  border-right: 0;}/* 九宫格区域中每一个格子中的图片和文字的样式 */.grids .item image {  width: 70rpx;  height: 70rpx;}.grids .item text {  color: #999;  font-size: 28rpx;  margin-top: 20rpx;}

如果要修改代码的话,可以直接修改CSS格式。
比如,为了更清晰一些,将图片放大一点
将格子变成了可爱一些,粉色
一般来说,最常见的操作就是这样子了
在这里插入图片描述

本文章使用的鼠标方案:

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

配套资源

微信小程序-轮播图-九宫格布局–【开发实战(第2版)】
https://download.csdn.net/download/dearmite/88213567

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

作业:

1 下载本案例,删一轮播图,截图。 加一张轮播图,截图
2 修改九宫格样式表格线颜色及图片大小。截图!

也许您对下面的内容还感兴趣: