微信小程序开发中的二三事之网易云信IMSDK DEMO

本文由作者邹永胜授权网易云社区发布。

简介

为了更好的展示我们即时通讯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。

• WXML与HTML十分类似，可以说就是带有模板语法，经过微信封装的自定义标签的集合。

  • 操碎了心的微信给我们封装了很多组件，例如view、button、text、map、video、audio等等，全部通过自定义标签的方式实现，部分组件渲染提升为原生组件，提高了整体效率(也带来了不少麻烦)。

  • 当然整个页面上还支持个人十分喜爱的一种模板语法-Mustache语法，与Vue类似，你可以在表达式中访问在data中已经定义好的数据，一旦数据发生变化，绑定的页面会自动刷新，实现渲染与逻辑分离。当然还需要条件、循环等控制能力，这些在整个模板中都有，更为详细的可以查看文档

• WXSS说白了就是弱化版C