更多腾讯海量技术文章,请关注云加社区:https://cloud.tencent.com/developer
作者:Gcaufy
前言
先看一个视频,这个视频并不是去演示如何使用微信,而是演示基于wepy开发的微信小程序demo。
点击观看视频 : 【wepy开发的微信小程序demo 】
demo中包含的功能有:
仿微信界面
联系人列表
私聊与自动回复
聊天记录本地存储与清除
源代码地址:https://github.com/wepyjs/wepy
wepy是什么?可以查看我的另外一篇文章:《打造小程序组件化开发框架》
下面就讲讲是如何一步一步基于wepy实现这个仿微信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。
根据划分的组件,大致可以得到开发的目录结构:
三、切图与重构
直接用手机截屏然后放到Photoshop中处理。小程序做不同机型的适配很方便,提供了一个rpx的单位,官方说明如下:
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
我的手机截图尺寸是 720px × 1280px, 为了方便计算,直接将截图按比例调整为 750px × 1333px。那么此时的单位换算就是1px = 1rpx,也就是说一个图片在Photoshop中是 80px × 80px,那么就直接写width: 80rpx;height: 80rpx;。
整理出各图标大小以及各元素之间的宽高间距等,方便在sass中使用。如下图:
按照第二步划分的页面组件,对组件进行基本的填充。然后页面内容就十分简单了。
src/pages/index.wpy:
接着完成基本的重构工作,如下图:
四、MOCK数据设计
通过需求分析得到只需要两份基础数据:
联系人数据
初始聊天记录数据
其对应的数据表结构如下:
因此我们可以使用js构建这两份数据表作为原始数据,
目录结构设计大致如下:
五、接口API设计
因为使用MOCK数据的关系,我们可以同步吐出接口数据,但这里希望能更接近于AJAX访问的异步效果,所以所有接口均返回setTimeout处理的Promise对象。
整理出所需功能的所有数据请求如下:
拉取聊天列表页的聊天列表(用户头像,用户名称,最后一条聊天信息)
拉取聊天页面的聊天记录 (用户头像,自己头像,聊天记录)
发送聊天信息
拉取tab我下的个人头像以及用户昵称等信息
因为涉及到的数据接口并不多,所以单独放在
src/common/api
模块下。
代码结构大致如下:
六、逻辑代码开发
逻辑代码部分主要包括三部分:
调用数据接口,返回数据,渲染视图
组件内事件交互
组件之间相互通信
在message组件中需要拉取聊天列表信息并且渲染,代码如下:
message组件中只有一个数据源list,通过自定义方法loadMessage调用api模块获取聊天列表信息进行渲染,因为是在自定义的异步方法中进行数据绑定,所以需要执行this.$apply()让视图渲染。
同时,组件响应页面的tap事件select,选中聊天之后跳转至chat页面。
在chat页面进行聊天之后,返回到index页面时,需要message页面再次调用接口数据,重新渲染聊天列表页,这就需要在index页面的onShow方法中去让message组件重新调用loadMessage方法。这里可以选用 wepy 提供的$boradcast方法或者$invoke方法,代码如下:
// src/pages/index.wpyonShow() { this.$invoke('message', 'loadMessage'); }
这样就完成了message组件的所有功能,进入页面渲染列表,点击消息进入聊天页面。
在index页面中加入状态currentTab来标记当前选中tab。并提供切换tab事件。
src/pages/index:
在tab组件中,直接通过$parent去调用父组件的changeTab方法,来达到实现tab切换效果:
至此已完成大致雏形,更多代码还请参考提供源代码。
结束语
wepy让用户能以组件化思维开发小程序,加上一些新特性的引入让开发与维护变得更简单,但同时缺点又在于引入框架以及额外的polyfill,npm增加项目代码体积(压缩后170kb),在仅限1M代码体积的小程序中,代码容量时时刻刻又显得有些捉肘见襟了。希望小程序能早日能放宽限制。
领取专属 10元无门槛券
私享最新 技术干货