小程序基于wepy框架开发仿微信界面DEMO

先看一个视频，这个视频并不是去演示如何使用微信，而是演示基于wepy开发的微信小程序demo。

视频地址： https://v.qq.com/x/page/x0352lsswtq.html

demo中包含的功能有：

• 仿微信界面

• 联系人列表

• 私聊与自动回复

• 聊天记录本地存储与清除

项目代码地址：https://github.com/wepyjs/wepy-wechat-demo

下面就讲讲是如何一步一步实现这个仿微信demo的。

一、需求分析

首先要确定好自已在DEMO中想要实现的功能，微信有四个tab：微信聊天，通讯录，发现，我。右上角的搜索，添加好友功能，以及发现里的朋友圈和各项菜单功能，这里主要想实现的就是聊天，还有通讯录好友功能。因为考虑到小程序真机体验时只允许请求安全域名，所以数据不打算使用后端接口返回，而是采用MOCK数据模拟后端接口返回。聊天记录储存于小程序提供的Storage中。这样就能完整的模拟聊天功能，而且下载下来的DEMO可以直接在真机上体验。

同时评估一些技术细节：

涉及的原生API

• 登录相关API wx.login。

• 获取用户信息API wx.getUserInfo。

• Storage相关 wx.getStorage，wx.setStorage，wx.clearStorage。

技术方案

• 样式部分使用sass，wepy现阶段支持less，sass，本demo使用sass。

• 代码部分使用新特性async/await。

• 数据接口使用MOCK数据模拟接口返回。

二、页面组件划分

按微信界面展示大致划分为两个页面，首页index，聊天页chat，以及若干组件，如下图：

首页index中包含一个tab组件和四个tab分别所对应的组件message，contact，discovery，me。而且各自还包含一些子组件，如contact组件中包含alpha字母列表组件，discovery和me组件中分别包含一些list菜单列表组件。其中list组件达到了很好的复用效果。

聊天页chat中包含一个聊天面板组件chatboard和输入框组件input。

根据划分的组件，大致可以得到开发的目录结构：

src
    components
        alpha.wpy --- 联系人
        chatboard.wpy --- "聊天面板" 组件
        contact.wpy --- "联系人" 组件
        discovery.wpy --- "发现" 组件
        input.wpy --- 聊天页输入框组件
        list.wpy --- 菜单列表组件
        me.wpy --- "我" 组件
        message.wpy --- message 组件
        tab.wpy --- tab 组件
    pages
        chat.wpy --- 聊天页