微信小程序--》从零实现小程序项目案例

️作者���介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

个人主页：亦世凡华、

系列专栏：微信小程序

座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

引言

       ⚓经过web前端开发的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。

目录

配置导航栏

配置tabBar

实现页面轮播图

实现页面九宫格

实现底部图片

实现九宫格的导航跳转

实现导航跳转时设置标题内容

实现商品列表数据的渲染

实现上拉加载以及loading效果

实现数据是否加载完毕的判断

实现下拉刷新功能

实现wxs处理手机号

最终的实现效果

---

今天借助黑马的本地生活案例，加强一下自己对小程序的学习，并将学习过程分享出来，希望能和以前学习的知识相互印证。现在开始：

配置导航栏

导航栏是小程序的门户，用户进来第一眼看到的便是导航栏，其起着对当前小程序主题的概括。而我们 新建的小程序 时，第一步变开始配置导航栏。如下：

配置tabBar

因为配置tabBar需要借助字体图标，我这里平常喜欢使用阿里云字体图标库，所以需要先去阿里云库中找到相关图标：其官方网站：网站链接 。

随便找两个，一个作为未点击(未激活)状态，另一个作为已点击(已激活)状态：

因为我是属于类似做一个小demo ，图标就随便选了，在正式项目必须严谨了，选好图标命名如下

准备好图片资源之后就要在 app.json 文件中配置tabBar了，配置代码如下：

{  "pages":[    "pages/home/home",    "pages/message/message",    "pages/contact/contact"  ],  "window":{    "backgroundTextStyle":"light",     "navigationBarBackgroundColor": "#008c8c",     "navigationBarTitleText": "本地生活",    "navigationBarTextStyle":"white"  },  "tabBar": {    "list": [{      "pagePath": "pages/home/home",      "text": "首页",      "iconPath": "/images/home.png",      "selectedIconPath": "/images/home-active.png"    },{      "pagePath": "pages/message/message",      "text": "消息",      "iconPath": "/images/message.png",      "selectedIconPath": "/images/message-active.png"    },{      "pagePath": "pages/contact/contact",      "text": "联系我们",      "iconPath": "/images/contact.png",      "selectedIconPath": "/images/contact-active.png"    }]  },  "style": "v2",  "sitemapLocation": "sitemap.json"}

实现页面轮播图

实现轮播图必须有图片资源，而在项目中一般是不会使用本地资源的，都是通过调用接口的形式拿到数据，在本项目中也是，因为轮播图是在 home 组件中进行使用，所有我们需要在home组件去调用接口，具体实现过程如下：

在页面的初始数据data中定义一个数组，用于存放数据：

调用微信的request方法，发起get请求访问接口拿到数据：

// 获取轮播图的方法getSwiperList(){  wx.request({    url: 'https://www.escook.cn/slides',    method:'GET',    success: (res)=>{      // 类似于React中的setState，将状态数据更新      this.setData({        SwiperList: res.data      })    }  })},

在生命周期onLoad，页面刚加载的时候，调用获取轮播图的方法：

在data存放的数据可以在控制台的AppData中看到：

拿到数据之后，我们就可以在wxml中制作页面效果了：