本文由作者邹永胜授权网易云社区发布。
简介
为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是:
云信 IM 小程序 SDK 的能力演示
提供开发者小程序开发参考
换句话说就是在微信里面通过我们云信的IM SDK再实现一个mini版微信。整个小程序主要功能点总的来说是:
登录注册(为了实现不同端同一账号体系,所以没有采用微信授权登录)
最近会话展示
通讯录
单聊对话
用户名片
废话不多说直接上图:
一期已经上线,不足的地方,恳请斧正
本文从基础开始介绍在开发云信DEMO的过程中的一些难点、整体的结构设计、思考的一些解决方案以及踩过的一些坑,希望对大家有些帮助当然希望更多人接入网易云信SDK。
基础
小程序开发基本零门槛,难度基本与模板语言相当,如果你有使用MVVM框架开发前端的经验,基本花个半小时过一遍微信小程序官方文档,即可入门,具体开发细节可以边做边查本人就是这样的。。。。
首先需要明白小程序的运行环境,它运行在微信的上下文中,处于微信这个沙盒中,没有window对象,不能访问基于browser context下的DOM。在ios设备上是运行在JSCore(苹果开发),在android设备上则是在X5(腾讯基于webkit开发),在开发工具中运行在nwjs(同类型还有electron)
一个标准的小程序是由一个应用实例以及多个页面实例构成。仔细想来微信小程序不就是由多个相互关联的页面组成的嘛,在每个页面中,需要考虑与外部以及与其他页面进行交互。本着“3W+1H”原则,因此也就可以提炼出在开发整个IM DEMO过程中需要关注的点:
如何定义页面、修改样式
页面怎么进行屏幕适配
多页面间怎么进行通信
每个页面的生命周期过程
如何定义组件、组件间如何通信
局部与全局状态的通信
交互事件的处理
官方提供的一些组件以及能力
0x01 静态页面
在微信官网下载开发工具,然后新建一个小程序工程,会发现项目根目录下会有一个 app.json和project.config.json以及pages/logs 目录下的 logs.json,这里来阐述下它们的区别:
app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等,具体每一项代表什么可以查看
project.config.json是针对小程序开发工具的一个配置文件,记载了你针对开发工具配置进行的一些修改,例如界面颜色、编译配置等,详细配置可查看这里
page.json页面级的配置文件,可以单独定义该页面的一些属性,例如顶部颜色、是否可下拉、使用组件定义等,详细配置可查看这里
阐述完各种配置文件之后,可以开始进行页面的编程。传统的网页编程采用的三剑客 HTML+CSS+JS来实现,在微信小程序中同样有三剑客 WXML+WXSS+JS。