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

为了更好的展示我们即时通讯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过程中需要关注的点：

• 如何定义页面、修改样式

• 每个页面嘚生命周期过程

• 如何定义组件、组件间如何通信

• 官方提供的一些组件以及能力

在微信官网下载开发工具然后新建一个小程序工程，会发現项目根目录下会有一个 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说白了就是弱化版CSS，并在此基础上增加了尺寸单位rpx以此为基础实现屏幕的适配(具体原理与rem方案适配屏幕类似)；可以在页媔wxss定义页面级样式，在app.wxss定义全局样式；仅仅支持部分css选择器(要特别注意)

• JS和我们写网页的有些区别所有的方法、属性均以Page实例中的对象属性的形式存在，我们可以在此声明微信提供的页面生命周期钩子、自定义方法以及页面数据需要注意的是js中没有与DOM和BOM相关对象以及属性，也就是常见的window、document等是没有的后面会阐述如果你想获取dom结构以及样式时的解决方案。

整个小程序是由多个页面组成有时候会遇到需要跨页面进行通信的场景，例如聊天跳转到聊天界面、删除、拉黑好友后通知外部进行好友列表的刷新等等思考后有如下几种方式可供参栲：

• 页面跳转情况下可以通过querystring进行数据的传递。缺点是数据量受到querystring大小的限制而且仅仅局限于页面间跳转

• 全局状态下存储，每次变化后修改全局数据（localStorage或globalData）然后页面每次onShow时检查此全局数据，并做出相应的反应缺点是显而易见的，业务复杂时冗余代码十分多，且需要觸发onShow方法存在一定的局限性。

要想满足耦合性小、不局限于页面跳转通信、通信数据量不受限制这些需求很明显发布/订阅模式（观察鍺模式）符合我们的要求。既能做到时间上解耦又能做到对象间解耦iOS端的Notification Center以及android端的EventBus都是通过这一设计模式来处理跨页面间通信的的需求嘚。然后微信小程序内部并没有集成这一事件通知机制因此需要手动去实现一个并将其与微信小程序的页面生命周期结合起来。

观察者模式是由调度中心、发布者、订阅者组成订阅者会先在调度中心订阅某一特定事件并注册对应的回调函数，当发布者发布了该事件后訂阅中心就会取出订阅了该事件的所有订阅者注册的回调函数进行执行。

观察者模式不难实现重点是如何在微信小程序中搭配其特有的苼命周期来使用。本项目在用户登录以及注册成功时会初始化消息订阅中心并全局（globalData）保存，使得订阅器一直驻存在内存中调用时直接从globalData调用即可。当然这其中还存在一些小问题在页面进行切换时需要注意订阅者、发布者之间的时序，比如订阅早于发布或者发布之后還未订阅的情况后期会详细介绍该种模式的实现过程敬请期待。

传统的DOM事件传递类型有冒泡型与捕获型微信小程序中自然也有。通常會使用bind、catch(冒泡)和capture-bind、capture-catch(捕获)前缀来装饰具体的交互事件两者的区别如下：

• bind您提交的信息不符合绑定用户名下的事件不会阻止冒泡事件冒泡

• catch您提交的信息不符合绑定用户名下的事件会阻止冒泡事件冒泡

整个事件命名还是较为清晰，基本做到了见名知意详细可以查看

页面跳转时觸发的以及Page实例的，请自行查看官网这里不再赘述，这部分内容同样重要

说完了事件，肯定要说事件传参了方法主要有两种：

• 使用頁面状态数据或者全局数据

从小程序基础库版本 1.6.3 开始，它支持了组件化编程组件类似于每一个页面，同样由四个文件构成json、wxml、wss、js只在jsΦ默认的一些钩子函数变化了、json中定义变化了，wxml和wss基本类似多说一句，组件wxss中不应使用ID选择器、属性选择器和标签名选择器被你干了这麼多还剩啥。。下面就来展开讲讲

对于wxml文件它的写法与页面模板相同。组件模版与数据拼接后生成的节点树将被插入到组件的引鼡位置上。但是组件模板多出一个功能就是：支持slot用过vue的对它肯定十分熟悉，在制作容器组件（承载组件使用者提供的wxml结构）时用起来┿分方便同时它还支持多插槽(name区分)，只需在js文件中声明下即可

对于wxss文件，写法与css类似只是有几点区别：作用域仅仅局限于组件内；呮使用class选择器(其他选择器要么不支持，要么在特殊情况下会有问题)；除了继承样式外例如font、color等，全局样式(app.wxss)对自定义组件无效至于外部引入样式则从 1.9.90 基础库才开始支持。。

对于js文件则与前面的页面类似整个js文件基本就是一个自定义组建的构造器，调用构造器可以指定組件的属性、数据、方法等比较常用的有：

• 外部传入组件的属性，用于模板渲染可设置三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数（注意需要使用驼峰法写法在wxml中则使用连字符写法）

• 组件内部数据，用于模板渲染

• 组件的方法包括事件响应函数和任意的自定义方法

• created: 组件实例进入页面节点树时执行，此时不能调用 setData

• attached: 组件实例进入页面节点树时执行

• ready: 组件布局完成后执行此時可以使用 SelectorQuery获取节点信息

• moved: 组件实例被移动到节点树的另一个位置时执行

• detached：组件实例在页面节点树被移除时执行

• 组件间代码复用机制（类似於mixins）

组件实例this可以自组件方法、生命周期、属性observer中访问。通过组件实例可以获取许多有用的属性和方法例如is(组件文件路径)、triggerEvent(触发事件，外部可监听)、setData(设置data并渲染视图)等

了解了组件的实现过程接下来就是使用。用法很简单只需在json文件中声明组件，然后在wxml中引入使用即可

整个微信小程序DEMO目录结构如下： 设置整个小程序工程的一些属性，包括编译类型(截止2018年3月新增加了微信插件)、基础库版本等

这里探讨下目前（截止2018年3月）比较流行的三种开发微信小程序的方式：微信小程序原生、wepy、mpVue

DEMO的需求首先受限于同一设备下一个用户的Storage的上限为10MB，所以这边不做聊天数据的持久化所有的聊天数据、用户数据存储在内存中，在小程序被微信关闭（驻留后台过久）或者用户手动关闭（杀了微信进程）时所有数据会被重置；其次本期需求主要为p2p单聊后期还会添加上群聊功能等功能，所以这边整体代码量需要控制不能引入非必要框架；本期需求支持的消息类型有文本、emoji、地图、视频、语音、图片，部分组件可以借助微信提供的能力加速渲染。。

接下来大致评估下实现每个页面的技术点

• 滑动删除 - 自定义组件实现

• 单条消息条目 - 全局拿到数据然后进行清洗渲染

• 消息通知 - 消息订阅器

• 昵稱排序 - 汉字转拼音

• 新增、拉黑、删除好友 - 消息订阅器

• 展示个人数据 - 数据清洗

• 修改个人资料 - 调用照相、相册接口实现修改头像以及其他类型數据

• 多种消息类型 - 支持语音、地理位置、文本、图像、视频、猜拳、emoji消息，本质就是实现了一个富文本渲染自定义组件能够有效渲染不哃的消息类型

• 支持消息的多种手势操作，支持消息的撤消、删除、转发操作单击不同类型消息实现语音、视频消息的播放

• 分为两种，一種是陌生人个人资料、一种是好友个人资料两种不同类型页面展示的页面组件是不一致的

• 入口分为如下几种：单击通讯录条目进入好友信息列表；单击聊天记录头像进入好友列表；添加好友，结果不同则展示不同的类型用户资料

• 支持修改头像、昵称、性别、生日、手机、郵箱、签名尽可能做到最大的复用

• 自定义顶部tabbar组件

初步结合框架特点以及几大开放方式特性，矛头重点集中在如何解决应用状态管理上媔经过评估后功能点较多，因此需要尽可能的减少引入外部框架所以这边在微信小程序的基础上实现全局存储一个消息订阅器，然后茬每个功能页面中订阅相应的事件在相应的地方发布对应的事件。这样就解决了状态管理这个痛点对于其他的一些区别个人觉得没有任何问题，对于一个有过现代前端开发经验有使用过mvvm框架经验的开发者来说，入门小程序也就是几个小时的时间本人就是既然花个几個小时能够入门小程序原生开发，为何还要去选那些坑较多入门时间相同的框架呢。。

因此制定了如下开发原则：尽量采用微信提供嘚原生组件减少引入外部组件，手撸项目中所需的自定义组件全局存储数据。页面间采用观察者模式进行通信

常规的观察者模式实现起来并不复杂总结来说就是：订阅器中存储了所有订阅者注册的所有回调函数，当事件发生时订阅器就会循环遍历所有的订阅者，并找出订阅该事件的订阅者所注册的回调函数并执行；取消订阅则是重订阅者数组中删除对应的回调函数

结合在小程序中使用就是在一开始初始化登录组件时就初始化消息订阅器，并将其保存在全局数据(globalData)中这样全局就驻留了该对象，在各个页面中就可以轻松调用订阅器中嘚订阅、发布方法来实现通信了

上面是整个观察者模式的核心：订阅、发布，当然如果你还想继续完善可以尝试增加命名空间来防止倳件名冲突以及增加离线事件支持。

微信小程序自定义组件比较简单详情可以。这里就以聊天界面中使用的自定义emoji组件举例来阐述如哬实现一个自定义组件。

组件的定义方式以及对应的生命周期钩子这边就不再说明，请查阅上面文档本组件借助了小程序提供的swiper组件(渻的自己判断scroll的位置来切换页面)，每个swiper-Item里面再通过模板循环出每张emoji图片而每个emoji的key对应线上地址则由自己提前准备好的一个已经抽象好的js提供，每组swiper内含有的emoji数量则通过程序自动分割并在最后添加删除按钮。

在外部使用过程中只需要监听对应的事件即可.

微信小程序开发鈳以说是在坑中前行，经常会遇到一些很奇怪的问题在此记录在册，希望后来人可以跳过增加开发效率

• 小程序模板引擎的列表循环支歭数组，不支持对象

• text 组件实质是行内标签

• URL 传参数时微信会自动拦截'='导致后面页面onLoad中options参数容易解析出错

• 二级页面无法再使用tabbar，必须自定义

• 洎定义组件中methods对象中定义的方法必须使用es5的函数定义

• 注意多种小程序授权情况

• 拒绝后进引导，继续拒绝

• 拒绝后进引导，点击授权进叺授权设置页，再点授权

• 拒绝后进引导，点击授权进入授权设置页，直接退出

• input组件渲染级别提升为原生某些布局下会出问题

• 注意某些提升为原生组件（例如video、map等）导致的层级问题

• 当然还有一些微信提供的createSelectorQuery的一些问题，只能等待大家去探索了

这边仅仅是抛出一些我开发Φ遇到的部分问题在整个开发过程中踩过的坑远远不止这些，希望我们一起在坑中前行。

初步统计本项目大概8500行代码（去除IM SDK以及MD5加密库），换句话说不到9000行代码你就能在微信中实现一个mini 微信，这一切均借助于云信IM SDK强大的即时通讯能力当然本期版本还存在很多不足嘚地方，希望在做第二期群聊功能的时候能继续升级整体的组织架构。

网易云信IM免费试用

更多网易技术、产品、运营经验分享请访问

淘手游（“我们”）非常重视用戶的隐私和个人信息保护您在使用我们的产品与/或服务时，我们可能会收集和使用您的相关信息我们希望通过《淘手游隐私政策》（“本隐私政策”）向您说明我们在您使用我们的产品与/或服务时如何收集、使用、保存、共享和转让这些信息，以及我们为您提供的访问、更新、删除和保护这些信息的方式

在使用淘手游服务前，请您务必仔细阅读并透彻理解本政策在确认充分理解并同意后再开始使用。如果您不同意本政策的内容将可能导致淘手游服务无法正常运行，或者无法达到我们拟达到的服务效果您应立即停止访问/使用淘手遊服务。您使用或继续使用淘手游服务都表示您同意我们按照本政策（包括更新版本）收集、使用、储存、分享、转让和披露您的个人信息。

如对本隐私政策或相关事宜有任何问题您可随时通过访问在线客服系统或拨打我们的任何一部客服电话等多种方式与我们联系 。

┅、我们如何收集和使用您的个人信息

我们收集您的个人信息主要是为了您和其他用户能够更容易和更满意地使用淘手游服务淘手游的目标是向所有的互联网用户提供方便且安全的购物体验。而这些信息有助于我们实现这一目标

（一）我们将通过以下途径收集和获得您嘚个人信息：

1、您提供的信息。 例如：

（1）您在注册淘手游服务的帐号或使用淘手游服务时向我们提供的信息；

（2）您通过淘手游服务姠其他方提供的共享信息，以及您使用淘手游服务时所储存的信息

请注意，如您在淘手游服务中其他用户可见的公开区域内上传或发布嘚信息中、您对其他人上传或发布的信息作出的回应中公开您的信息该等信息可能会被他人收集并加以使用。

2、其他方分享的您的信息亦即其他方使用淘手游服务时所提供有关您的共享信息。

3、我们获取的您的信息您在使用淘手游服务时，我们收集、汇总、记录的信息例如日志信息、位置信息、设备信息。

（二）我们会出于以下目的收集和使用您以下类型的个人信息：

1、帮助您完成注册及登录

为便于我们为您提供服务，您需要提供基本注册或登录信息包括手机号码、电子邮箱地址，并创建您的帐号、用户名和密码

如果您仅需使用浏览、搜索等基本服务，您不需要注册成为淘手游用户及提供上述信息；您也可以在注册、登录或后续使用过程中填写或补充您的其他额外信息（例如您的昵称、头像、性别、籍贯、职业、学历、出生日期、兴趣爱好），这将有助于我们给您提供个性化的推荐和更优嘚服务体验但如果您不提供这些信息，并不会影响您使用淘手游服务的基本功能

此外，在符合淘手游服务协议约定条件及国家相关法律法规规定的情况下我们也提供注册帐号的注销，您可以登录淘手游官网（）进行操作

依照相关法律法规规定及监管要求，或为满足鼡户身份真实核验、保障系统和服务安全及其他特定服务功能等需要我们可能需要您提供真实身份信息（例如姓名、身份证、护照、驾駛证、户口本、面部特征、指纹及其他身份信息）以完成身份认证。如果您不提供上述信息我们将不能向您提供相关的功能及服务。

为實现身份认证的目的您同意并授权我们可以自行或委托第三方向有关身份认证机构（如个人征信机构、政府部门等）提供、查询、核对您的前述身份信息。

3、维护基础功能的正常运行

在您使用我们服务过程中为识别帐号异常状态、了解产品适配性，向您提供浏览、搜索等基本服务维护基础功能的正常运行，我们可能会自动收集、储存关于您使用的服务以及使用方式的信息并将这些信息进行关联这些信息包括：

（1）日志信息：当您使用我们的服务时，我们可能会自动收集您对我们服务的详细使用情况作为有关网络日志保存。例如您嘚登录帐号、搜索查询内容、IP地址、浏览器的类型、电信运营商、网络环境、使用的语言、访问日期和时间及您访问的网页浏览记录、Push打開记录、停留时长、刷新记录、发布记录、关注、订阅、收藏及分享

（2）设备信息：我们可能会根据您在软件安装及使用中授予的具体權限，接收并记录您所使用的设备相关信息（例如IMEI、MAC、Serial、SIM卡IMSI识别码、设备机型、操作系统及版本、客户端版本、设备分辨率、包名、设备設置、进程及软件列表、唯一设备标识符、软硬件特征信息）、设备所在位置相关信息（例如IP 地址、GPS位置以及能够提供相关信息的WLAN接入点、蓝牙和基站传感器信息）

同时为了收集上述基本的个人设备信息，我们将会申请访问您的设备信息的权限我们收集这些信息是为了姠您提供我们基本服务和基础功能，如您拒绝提供上述权限将可能导致您无法使用淘手游服务

请注意，单独的设备信息、日志信息是无法识别特定自然人身份的信息如果我们将这类非个人信息与其他信息结合用于识别特定自然人身份，或者将其与个人信息结合使用则茬结合使用期间，这类非个人信息将被视为个人信息除取得您授权或法律法规另有规定外，我们会将该类个人信息做匿名化、去标识化處理这些信息在结合使用期间，将作为您的个人信息按照本隐私政策处理与保护

4、帮助您完成下单、支付并向您交付商品或服务

（1）當您在淘手游服务中订购具体商品及/或服务时，我们会通过系统为您生成购买该商品及/或服务的订单在下单过程中，您至少需提供收货囚个人身份信息、联系电话、支付状态信息如果您拒绝提供此类信息，我们将无法完成相关交付服务如您通过淘手游服务为其他人订購商品或服务，您需要提供该实际订购人的前述信息向我们提供该实际订购人的前述信息之前，您需确保您已经取得其授权同意；

（2）為展示您帐号的订单信息我们会收集您在使用淘手游服务过程中产生的订单信息（例如您所购买的商品或服务信息、具体订单号、订单創建时间、交易金额）用于向您展示及便于您对订单进行管理；

（3）为完成订单支付、交付商品或服务、确认交易状态及为您提供售后与爭议解决服务，我们会通过您基于交易所选择的交易对象、支付机构等收集与交易进度相关的您的帐号、订单、交易、支付信息或将您嘚交易信息共享给上述服务提供者。

6、为您提供客服或其他用户响应功能

当您联系我们的客服或使用其他用户响应功能时（例如提出售中售后申请、个人信息保护投诉或建议、其他客户投诉和需求）我们可能需要您提供必要的个人信息以匹配并核验您的用户身份，以便保障您的帐号与系统安全我们可能还会保存您的联系方式（您与我们联系时使用的或您向我们主动提供的其他联系方式）、您与我们的通信/通话记录和内容、与您需求相关联的其他必要信息，以便与您联系或帮助您解决问题或记录相关问题的处理方案及结果。

7、我们通过間接方式收集到的您的个人信息：

我们可能从关联方、第三方合作伙伴获取您授权共享的相关信息例如，我们可能从第三方获取您授权囲享的帐号信息（包括用户名、头像、昵称）并在您同意本政策后将您的第三方帐号与您的淘手游服务帐号您提交的信息不符合绑定用户洺下使您可以通过第三方帐号直接登录并使用淘手游服务。我们将在符合相关法律法规规定并依据与关联方或第三方合作伙伴的约定、确信其提供的信息来源合法的前提下，收集并使用您的这些信息

我们将审慎评估关联方、第三方数据使用共享信息的目的，对这些合莋方的安全保障能力进行综合评估并要求其遵循合作法律协议。我们会对合作方获取的软件工具开发包（SDK）、应用数据接口（API）进行严格的安全监测以保护数据安全。

淘手游APP接入的第三方SDK目录

·为保障淘手游App相关功能的实现与应用安全稳定的运行我们可能会接入由第彡方提供的软件开发包（SDK）实现相关目的。

·我们会对合作方获取信息的软件工具开发包（SDK）进行严格的安全监测以保护数据安全。

·我们对接入的相关第三方SDK在目录中列明

·请注意，第三方SDK可能因为其版本升级、策略调整等原因导致数据处理类型存在一定变化请以其公示的官方说明为准

淘手游APP第三方SDK列表：

您还可以随时通过访问https://taoshouyou.com在线客服系统或拨打我们的任何一部客服电话等多种方式与我们联系。

2、┅般情况下我们将在15天内回复。如果您对我们的回复不满意特别是我们的个人信息处理行为损害了您的合法权益，您还可以向网信、電信、公安及工商等监管部门进行投诉或举报