IM即时通讯结合mui 环信

最新推荐文章于 2024-07-17 17:16:09 发布

优小U

最新推荐文章于 2024-07-17 17:16:09 发布

阅读量2.9k

点赞数 4

分类专栏：移动开发文章标签：即时通讯 im mui 环信

本文为博主原创文章，未经博主允许不得转载，违者必究。

本文链接：https://blog.csdn.net/zy1281539626/article/details/72823455

版权

移动开发专栏收录该内容

29 篇文章 1 订阅

订阅专栏

环信文档地址：http://docs.easemob.com/im/400webimintegration/25intiate
具体的用法看下面代码，这是一个简单的用户注册：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
<style>
        .mui-input-group:first-child {
        margin-top: 20px;
    }
</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" placeholder="请输入手机号">
        </div>
        <div class="mui-input-row">
            <label>昵称</label>
            <input id="nickname" type="text" class="mui-input-clear" placeholder="请输入昵称">
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input id="password" type="password" class="mui-input-password" placeholder="请输入密码">
        </div>
        <div class="mui-input-row">
            <label>确认密码</label>
            <input id="password_confirm" type="password" class="mui-input-password" 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.js" type="text/javascript" charset="utf-8"></script>
<!-- 环信web im , 以下三个文件的顺序不能变 -->
<script type="text/javascript" src="sdk/webim.config.js" ></script>
<script type="text/javascript" src="sdk/strophe-1.2.8.min.js" ></script>
<script type="text/javascript" src="sdk/websdk-1.4.5.min.js" ></script>
<script type="text/javascript">
        mui.init();
        mui("#reg")[0].addEventListener('tap',function(e){
            var username = mui('#username')[0].value;
            var nickname = mui('#nickname')[0].value;
            var password = mui('#password')[0].value;
            var passwordConfirm = mui('#password_confirm')[0].value;
            // 是否为电话号码
        function isMobile(value) {
            var validateReg = /0?(13|14|15|18)[0-9]{9}/;
            return validateReg.test(value);
        }
        // 是否为空
        function isEmpty(value){
            var validateReg = /^\S+$/;
            return validateReg.test(value);
        }
            if(!isMobile(username)){
                mui.toast('电话号码格式不正确');
                return;
            }
            if(!isEmpty(nickname)){
                mui.toast('昵称不能为空');
                return;
            }
            if(!isEmpty(password)){
                mui.toast('密码不能为空');
                return;
            }
            if(password != passwordConfirm){
                mui.toast('密码两次输入不一致');
                return;
            }
            //环信SDK注册
            var options = {
                username: username,
                password: password,
                nickname: nickname,
                appKey: WebIM.config.appkey,
                success: function(result){
                    console.log(JSON.stringify(result));
                    mui.toast('注册成功');
                },
                error:function(e){
                    console.log(JSON.stringify(e));
                    mui.toast('注册失败');
                },
                apiUrl: WebIM.config.apiURL
            };
            var conn = new WebIM.connection();
        conn.signup(options);
        });
</script>
</body>
</html>

这里最重要的是这几个js文件，记住顺序不要搞错了，还有版本问题，因为一直在更新，所以在版本选择上要一致，这是目前最新的版本。最后就是那个注册的函数了，之前呢使用的是registerUser()，现在不行，经试验，用signup()函数好用。