mpVue高仿美团小程序教程

2018-05-24 本文已影响716人 PrivateEye_zzy

本章涉及知识点

1、前言

2、mpVue框架简介

3、项目配置和结构

4、主程序入口配置

5、首页页面

6、城市选择页面

7、搜索页面

8、订单列表页面

9、我的页面

10、商品详情页面

11、评论列表页面

12、提交订单页面

13、订单详情页

14、通用方法封装

15、Vuex的设计

16、后记

一、前言

继写完上一篇原生JS实现轻量Vue+指令解析+变异数组监听的代码和文章后，本来笔者已经写完了原生JS实现轻量React的代码，而正在写其文章的时候，突然被mpVue打断，因为从前自己一直不喜欢小程序开发，依赖微信平台不说，微信还重新封装了一遍其语法糖，但是mpVue的开源让开发者可以用原生Vue来开发小程序，其实其本质任然是将Vue编译成原生小程序的AST，最后再翻译成原生webView代码，于是笔者暂停下了写React的文章转而用mpVue先开发个小程序

既然是美团开源的框架，那我们就高仿一个美团呗！于是就写了这篇文章教程，笔者花了3天时间，用mpVue框架+自定义Vue组件+原生小程序组件+Vuex开发出了一个高仿美团的小程序，相似度达到90%以上，体验程度还是非常流畅的，毕竟翻译到最后是原生App代码

二、mpVue框架简介

我们知道微信小程序有着自己的一套语法糖，包括自己的标签，样式规范和语法，本身也没有组件化机制（表示难以接受），其推出的Wepy也是类Vue的开发规范，用着也是别扭，为此，mpVue是完全基于Vue的开发规范，包括生命周期，且完全支持Vue自定义组件规范，对于Vue开发者来说，可以无缝对接的开发小程序

关于mpVue更多的功能，可以参考其官网：mpVue官网

三、项目配置和结构

整体项目结构

可以看到mpVue的项目目录结构非常熟悉，下面我们开始开发各个页面

四、主程序入口配置

入口设计-1

我们在项目入口里引入公共css、公共方法、以及store，并将公共方法挂载到Vue的原型上

入口设计-2

根据小程序app.json的配置，我们配置好所有页page、window以及tabBar

五、首页页面

首页有轮播图，图标九宫格，猜你喜欢的商品列表，还有当前城市和搜索面板，其分别是选择城市页面和搜索页面页面的入口

首页页面的页面布局代码为

首页部分代码-1

首页部分代码-2

首页部分代码-3

其中我们提取封装出商品卡片组件good

good组件部分代码

注意我们注入store中的当前城市变量，让其不被跳转影响

引入store

最终首页在真机上显示如下

首页

六、城市选择页面

城市选择页面有当前/最近访问城市、热门城市、根据首字母展示所有城市，还有右侧固定住的26个首字母作为点击事件，可以滑动到相应的首字母下的城市列表

我们封装出city组件，其页面布局代码为

city组件部分代码-1

city组件部分代码-2

我们引入cityData，并在点击任意城市的时候emit给父组件（即城市选择页面）

对于点击首字母滑动页面到相应首字母对应城市的位置的处理，由于小程序没有任何dom，我们不能使用锚点或者window.scrollTo，但是我们可以利用原生小程序提供的scroll-view中scroll-into-view属性来滚动到相应位置，为此我们只需要用Vue来托管scroll-into-view变量currView即可

city组件部分代码-3

最终城市选择页面在真机上显示如下

城市选择页面

七、搜索页面

搜索页面有搜索输入框，猜你想找和历史搜索的面板，对于动态监听到输入的搜索关键词，以滚动列表的形式展示符合搜索关键词的结果集合，所以猜你想找和历史搜索的面板，与搜索结果列表为互斥关系

搜索页面的页面布局代码为

搜索页面部分代码-1

搜索页面部分代码-2

对于模拟搜索动态列表，我们在data里定义搜索总集合、当前搜索关键词和根据当前搜索关键词匹配到的结果列表

搜索页面部分代码-3

我们需要监听input的输入事件和完成事件，来维护当前搜索关键词和动态过滤符合搜索关键词的结果集

搜索页面部分代码-4

最终搜索页面在真机上显示如下

搜索页面

八、订单列表页面

订单列表页面比较简单了，只有商品列表的滚动展示

这里为了演示滚动效果，我模拟循环了12次常量数据，订单列表页面的页面布局代码为

订单列表页面部分代码-1

最终订单列表页面在真机上显示如下

订单列表页面

九、我的页面

我的页面有登录、退出、以及4个入口项，在点击登录后动态获取用户信息，渲染登录按钮为用户的头像、昵称、性别和居住地信息，点击退出按钮后清除用户信息并替换为登录按钮

我的页面的页面布局代码为

我的页面部分代码-1

我的页面部分代码-2

我们引入store来在用户点击登录或者退出的时候，动态维护用户登录状态和用户信息

我的页面部分代码-3

最终我的页面在真机上显示如下

我的页面

十、商品详情页面

商品详情页面有商品主图价格信息、映像标签、商家信息、套餐信息、购买须知、部分用户评论和相关商品推荐板块，页面里有两个其它页的入口，分别是提交订单和用户评论列表入口

商品详情页面的页面布局代码为

商品详情页部分代码-1

商品详情页部分代码-2

商品详情页部分代码-3

商品详情页部分代码-4

商品详情页部分代码-5

这个页面里用到了卡片组件good，打星评分组件star和评论组件comment，good组件首页已经封装好，下面我们封装出star和comment组件

下面是star组件的布局代码

star组件部分代码-1

注意：由于小程序没有伪类，为此我们利用absolute来动态渲染星星的颜色

为此需要动态的计算每一个星星染色宽度，100表示完全染色，30表示1/3染色

star组件部分代码-2

下面是comment组件的布局代码

comment组件部分代码-1

最终商品详情页面在真机上显示如下

商品详情页面

十一、评论列表页面

这个页面是通过商品详情页为入口进入，其评论分为全部、晒图评论、低分评论和最新评论，各个评论的通过swiper滑动切换来更新相应的评论列表

评论列表页面的页面布局为

评论列表页面部分代码-1

评论列表页面部分代码-2

评论列表页面部分代码-3

为了演示不同类型评论的切换，我们定义好全集评论列表，并过滤计算出不同类型的数组用于渲染不同的列表

评论列表页面部分代码-4

最终评论列表页面在真机上显示如下

评论列表页面

十二、提交订单页面

这个页面主要有数量的动态增加或者减少，以及价格的动态变化

提交订单页面的页面布局为

提交订单页面部分代码-1

提交订单页面部分代码-2

由于数量需要动态增减，我们封装出计数组件counter

counter组件的布局为

counter组件部分代码-1

增减数量后emit给父组件即可

counter组件部分代码-2

最终订单提交页面在真机上显示如下

订单提交页面

十三、订单详情页面

订单详情页面由订单列表页进入，主要就是商家信息和订单信息的展示

订单详情页部分代码-1

订单详情页部分代码-2

最终订单详情页面在真机上显示如下

订单详情页

十四、通用方法封装

开发完所有页面后，我们来封装一些通用函数，方便挂载到Vue原型上在任何页面使用

首先是Ajax封装，由于微信提供的request是类似Jquery的语法里带上各个回调函数，这让我们使用习惯Promise或者es7的async/await的异步编程风格后显得非常不舒服，所以我们将request封装成Promise风格，让我们可以在任何页面通过async/await来接收服务器的返回值

封装Ajax为Promise风格的函数如下