文章来源：小青年原创
发布时间：2016-06-15
关键词：mui，环信 web im，html5+，im，页面传值，缓存
转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20160615
写在前面
感觉自从qq、微信这种APP用多了，现在都没啥人发短信了，现在什么APP都想加入IM的功能，曾经有段时间在折腾自己撸一个聊天的东西，也尝试过很多平台，今天这里给大家介绍一下从零开始自己做一个聊天的app功能。因为之前帮朋友做过一个基于环信的聊天功能，这里就以环信的平台为例举个例子说明。这篇文章注意想讲解一下集成这种第三方的一般实现方法，不会一下子就把所有的功能都集成，因为之前做环信主要是在微信上用，所以用的是环信的Web IM，遇到了蛮多坑，这次打算用dcloud这边的mui重新集成，所以在没有完全做完之前，所以也不知道有些坑具体能够在有限的时间内解决，本文仅供参考，欢迎大家去实践检验。在写这篇文章之前先贴一个Dcloud论坛中的资源帖，【即时通信、im问题汇总】
准备工作
1.注册账号
我们要先去环信官网注册一个账号，然后在后台创建一个应用，因为我们后面在做功能的时候可以用后面发送消息及图片来测试收消息，用户管理在后台也可以看得一清二楚。
创建成功后找到应用标识(AppKey)，这个在后期配置中会用到。
2.下载SDK
http://www.easemob.com/download/im
这里我们使用的是Web IM，所以下载的SDK是Web IM版本，下载之后我们会看到一个演示demo,由于这个是pc版本，和我们需求不一致，所以我们只需要关心sdk目录下的文件和sdk集成需要修改的配置文件easemob.im.config.js。
|---README.MD：
|---index.html：demo首页，包含sdk基础功能和浏览器兼容性的解决方案
|---static/：
js/：
easemob.im.config.js：sdk集成需要修改的配置文件
css/：
img/：
sdk/：/*sdk相关文件*/
release.txt：各版本更新细节
quickstart.md：环信WebIM快速入门文档
easemob.im-1.1.js：js sdk
easemob.im-1.1.shim.js：支持老版本sdk api
strophe.js：sdk依赖脚本3.开发文档
Web IM 介绍 http://docs.easemob.com/im/400webimintegration/10webimintro
项目实战
由于这篇重在在于如何使用第三方开发IM，感觉说再多也诶有意义，直接上代码说明。不讲解过多的原理、细节，只讲究开发流程。
1.用户注册功能
首先我们在hbuilder中先新建一个项目easemobIM,然后把环信sdk文件夹和配置文件拷贝到我们的工程中。为了节约时间，下面的功能演示我是根据官方登录模板改的。
html/reg.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<style>
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>手机</label>
<input id=\'username\' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号码">
</div>
<div class="mui-input-row">
<label>昵称</label>
<input id=\'nickname\' type="text" class="mui-input-clear mui-input" placeholder="请输入昵称">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id=\'password\' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
</div>
<div class="mui-input-row">
<label>确认</label>
<input id=\'password_confirm\' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
</div>
</form>
<div class="mui-content-padded">
<button id=\'reg\' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
</div>
</div>
<script src="../js/mui.min.js"></script>
<!--sdk-->
<script src="../sdk/strophe.js"></script>
<script src="../sdk/easemob.im-1.1.js"></script>