前戏
某一天的夜里,敲完了代码之后便直接倒在床上睡着了,醒来时只记得梦里的一句话:“想要成为高手,就必须要大量实践,大量做项目,必须要把自己不会的东西全部吃透,不要得过且过。”,猛然想起是一位大神前辈对我说的,工作之后每天加班,回家之后就不想学习了,总想着一把锤子搞定所有钉子,这样是不行的,于是我就下了几百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/cli
2.创建项目。
vue create -p dcloudio/uni-preset-vue dnpicture
3.启动项目(微信小程序)。
npm run dev:mp-weixin
4.在微信小程序开发者工具导入项目。
注意导入项目的路径。
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-sass
2.项目搭建
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
这个项目教程就此结束。