前戏
某一天的夜里，敲完了代码之后便直接倒在床上睡着了，醒来时只记得梦里的一句话：“想要成为高手，就必须要大量实践，大量做项目，必须要把自己不会的东西全部吃透，不要得过且过。”，猛然想起是一位大神前辈对我说的，工作之后每天加班，回家之后就不想学习了，总想着一把锤子搞定所有钉子，这样是不行的，于是我就下了几百G的项目实战视频，有Vue、React、Node.js、Angular、Flutter、各个框架源码分析。。。我计划今年把它们全部干完，每做一个项目我都会写一篇博客来记录开发过程和收获，我想着通过大量的项目练习来让自己变成熟练工种，然后再去看源码就会比较轻松；接下来就让我牵着同学们的小手带你们开发一款基于uni-app的微信小程序项目，项目名字叫【懂你找图】。
项目介绍
做这个项目之前，同学们最好写过2-3个移动端的页面，有一定的JS基础，比如map，forEach函数的使用，Promise的使用，掌握Vue的基本语法，基本的生命周期，什么是Watch？怎么使用一个Component？子传父 / 父传子的实现方式。
没有基础的同学也不要担心，可以跟着把项目写完，然后把不理解的地方单独抽出来，逐个学习，然后再把项目独立做一遍就完事了。
这个是项目做完之后的效果：
这个项目我会带领同学们写完首页的模块，其他模块由于API接口还没有写好，暂时不做，等以后写好了，我会马上更新，接下来我们就进入正片环节。
1.项目准备
1.1开发方式
uni-app为我们提供2种开发方式：
1.使用DCloud公司提供HBuilderX工具来快速开发；
2.使用脚手架来快速开发（我们这次项目使用此方式）；
1.2脚手架搭建项目
1.全局安装，如果你以前安装过就不需要重复安装了。
npm install -g @vue/cli2.创建项目。
vue create -p dcloudio/uni-preset-vue dnpicture3.启动项目（微信小程序）。
npm run dev:mp-weixin4.在微信小程序开发者工具导入项目。
注意导入项目的路径。
1.3搭建过程中可能遇到的问题
容易出现 vue 和 vue-template-complier版本不一致的问题。
根据提示重新安装对应的vue版本即可 npm install vue@2.6.10，然后再重新运行项目 npm run dev:mp-weixin。
1.4安装sass依赖
npm install sass-loader node-sass2.项目搭建
2.1新增tabbar页面
| 页面名称 | 路径 |
| 首页 | home/index.vue |
| 横屏 | horizontal/index.vue |
| 精美视频 | video/index.vue |
| 搜索 | search/index.vue |
| 我的 | mine/index.vue |
新建完页面之后，我们再去pages.json文件里面添加页面路径和tabbar对应的图片和样式。
pages.json
接下来我们需要在App.vue中全局引入字体图标文件。
App.vue
引入成功之后，就可以看到如下效果啦。
注意：要记得把icon和styles文件夹放到项目中去哦。
styles文件加放到和App.vue同层级目录下，icon文件夹放入static文件夹里面。
2.2 uni-ui介绍
文档： https://uniapp.dcloud.io/component/README?id=uniui
uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
uni-ui不包括基础组件，它是基础组件的补充：
数字角标、日历、卡片、折叠面板、倒计时、抽屉、悬浮按钮、收藏按钮、底部购物导航、宫格、图标、索引列表、列表、加载更多、自定义导航栏、通告栏、数字输入框、分页器、弹出层、评分、搜索栏、分段器、步骤条、滑动操作、轮播图指示点、标签。
3.首页模块开发准备
3.1 功能分析
1.修改导航栏外观
2.使用分段器组件搭建子页面
3.封装自己的异步请求
3.2 搭建子页面
- 首页模块分为4个部分，分别是 推荐、分类、最新、专辑
- 新建自定义组件来代替上述的4个页面
- home-recommend
- home-category
- home-new
- home-album
3.2.1 分段器介绍
分段器是指uni-ui中的一个组件，其实就是俗称的标签页，tab栏（https://ext.dcloud.net.cn/plugin?id=54）
3.2.2 分段器使用
分段器的使用
3.3 封装自己的异步请求
为什么要封装？
- 原生的请求不支持promise；
- uni-api的请求不能够方便的添加请求中效果；
- uni-api的请求返回值是个数组，不方便取值；
封装的思路
- 基于原生promise来封装；
- 挂载到Vue的原型上；
- 通过this.request的方式来使用；
request
在main.js里面将request函数挂载到Vue的原型上
4.首页-推荐模块开发
4.1 功能介绍
- 数据动态渲染；
- moment.js的使用；
- 基于scroll-view的分页加载；
4.2 实现过程
首页推荐这个页面非常简单，没有任何技术含量。。。
首先我们把静态页面写出来，然后发送请求获取数据然后使用v-for指令循环渲染数据，渲染图片的时候注意接口有没有带rule这个属性，如果有需要把thumb属性和rule进行拼接，这里约定好<Height>的值为300，然后注意一下图像要使用widthFix还是aspectFill，这些都是非常基础的知识，大家可以自行到微信小程序的官方开发文档里面找到，如果你不懂，还不愿意自己去找资料学习，那我也没办法啦。
日期部分使用的是moment.js库，下面是他的文档地址：
接下来说一说分页，无非就是把最顶级的view 标签改成scroll-view标签，加上一个scroll-y属性，再加上一个触底事件@scrolltolower=“handleScrollToLower”即可，这些东西uni-app官网都有，由于这个项目是使用uni-app来开发，所以很多API和组件都需要在uni-app文档和微信小程序的文档穿插查找，搞技术嘛，就是要往上面砸时间，耐心点就完事了。
分页部分的逻辑其实很简单：
页面触底之后，发送请求获取数据，skip的值等于自身加上limit的值，然后limit的值加上30条，需要注意的是在触底之后发送请求之前要判断是否还有新的limit数据，可以在data里面设置一个状态，比如hasLimit：true，然后在请求函数里面判断一下是否还有新数据返回，如果没有的话就将hasLimit的值改为false并且提示用户。
首页推荐组件代码
后续还要加上跳转功能，到时候会将跳转抽离成一个公共组件，到时在下文补充。
5.首页-专辑模块开发
5.1 功能介绍
- swiper轮播图部分
- 专辑列表部分
5.2 实现过程
轮播图的部分直接使用微信小程序官方提供的swiper组件，注意swiper组件默认宽度100%，高度是150px，而且swiper必须和swiper-item配对出现，否则会出问题，下面是小程序基础教程和官方文档：
基础教程：微信小程序入门到实战(1)-基础知识 - replaceroot - 博客园
官方文档：swiper | 微信开放文档
搞定了轮播之后就很容易了，写一下静态页面，发下请求然后渲染数据，注意对分页数据的判断就行啦，对你们来说绝对是小菜一碟，代码如下：
home-album
6.专辑详情模块开发
6.1 功能分析
- 头部背景图部分
- 专辑详情列表图片部分
6.2 实现过程
实现的过程也非常简单，首先放一张image图片当作背景图片，图片里面的文字都知道怎么做吧，直接用定位就完事了。
下面也是一样套路，先写静态页面，然后发请求，注意下图片的宽高，和mode模式就行了，具体的代码如下：
album/index.vue
最后有个小坑需要注意下，小程序里面的view标签不支持文本中的换行符，如果某些特殊场景中后台返回的文本里面包含换行符就直接使用text标签就完事了。
7.图片详情模块开发
7.1 功能分析
- 封装超链接组件
- 发送请求获取数据
- 使用moment.js处理特殊时间格式
- 封装手势滑动组件
- 调用API下载图片
7.2 实现过程
在components组件文件夹下面新建一个goDetail.vue的自定义组件
goDetail.vue
这个地方用到了微信小程序的全局缓存数据的方法，我们把数据缓存在App.vue文件中，使用的时候直接通过getApp().globalData.属性的方法获取数据即可。
具体发请求获取数据渲染页面的部分自行看代码学习吧。
项目github地址：https://github.com/C4az6/dnpicture.git
项目API文档：推荐--ShowDoc
这个项目教程就此结束。
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
