codecamp

一、需求分析

首先要确定好自已在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数据模拟接口返回。


二、页面组件划分
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }