用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

天下雪 2016-12-7 01:06

本文作者:Gcaufy,阅读本文时,可以先阅读一下相关文章中的关于wepy框架的介绍;本文已经获得作者授权;你如何对wepy框架有兴趣,可以对相关文章进行仔细研究;先看一个视频,这个视频并不是去演示如何使用微信,而 ...

本文作者:Gcaufy,阅读本文时,可以先阅读一下相关文章中的关于wepy框架的介绍;本文已经获得作者授权;你如何对wepy框架有兴趣,可以对相关文章进行仔细研究;

先看一个视频,这个视频并不是去演示如何使用微信,而是演示基于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现阶段支持lesssass,本demo使用sass

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

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

二、页面组件划分

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

首页index中包含一个tab组件和四个tab分别所对应的组件messagecontactdiscoveryme。而且各自还包含一些子组件,如contact组件中包含alpha字母列表组件,discoveryme组件中分别包含一些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 --- 聊天页
         
鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: Gcaufy 来自: 授权地址

相关阅读