uni-app 接入环信sdk

官方文档：

一个接入的采坑之路终于完结了，送给需要的人们
项目不需要做太多的其他处理，只做发送消息，有提示音、振动即可，多余不处理咯。给大家做个接入参考。
环信sdk ：3.x.x版本
接入方式：直接引用js包
框架：uni-app
main.js里面有一个声音提示，你们自行网上下载好了，
效果：

注意：实例化SDK对象需要把appkay加上去，加上去，加上去
文件目录一览

WebIMConfig.js


// for react native
let location = {protocol: "https"
};let config = {xmppURL: "wss://im-api.easemob.com/ws/",apiURL: "https://a1.easemob.com",appkey: "---------------------#-----",//你在环信平台申请的创建的appkeyhttps: false,isMultiLoginSessions: false,isWindowSDK: false,isSandBox: false,isDebug: false,autoReconnectNumMax: 15,autoReconnectInterval: 2,isWebRTC: false,isAutoLogin: true
};export default config;

main.js

import Vue from 'vue'
import App from './App'
import SDK from "sdk/wxsdk3.4.2.js"; // 3.0sdk
import config from "sdk/WebIMConfig.js"; // 3.0sdk
import helper from 'helper/helper.js'
Vue.prototype.$helper = helper;
const WebIM = wx.WebIM = SDK;
WebIM.config = config
WebIM.conn = new WebIM.connection({isMultiLoginSessions: false, //是否可以登录多个，并在所有端上接收消息appKey:WebIM.config.appkey,//必须。https: false, //是否使用HTTPS url: 'wss://im-api-wechat.easemob.com/websocket', // socket server (3.0 SDK)apiUrl: 'https://a1.easemob.com',    // rest serverheartBeatWait: 10000, //心跳间隔autoReconnectNumMax: 2, //自动重连次数useOwnUploadFun: false ,// 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url）open(opt) {this.curOpenOpt = opt;WebIM.conn.open(opt);this.closed = false;},reopen() {if (this.closed) {//this.open(this.curOpenOpt);WebIM.conn.open(this.curOpenOpt);this.closed = false;}}
});Vue.config.productionTip = false
Vue.prototype.$WebIM = WebIM;Vue.prototype.ScanAudio = function(){var music = null;music = uni.createInnerAudioContext(); //创建播放器对象music.src= "../../static/com.mp3"; //选择播放的音频music.play(); //执行播放
}App.mpType = 'app'const app = new Vue({...App
})
app.$mount()

<template><view class="content"><view class="tyb-form"><view class="tyb-input-li"><text>IM账号</text><input placeholder="请输入IM用户账号" type="text" class="tyb-inutt" v-model="form.username" value="" /></view><view class="tyb-input-li"><text>IM密码</text><input placeholder="请输入IM账号密码" type="text" class="tyb-inutt" v-model="form.password" value="" /></view><view class="tyb-input-li" ><view class="tyb-bt" style="" v-on:click="toLogin">登录</view></view></view></view>
</template><script>export default {data() {return {form:{username:"18314452801",password:"52801"}}},onLoad:function(){this.islogin()},methods: {islogin:function(){var user = uni.getStorageSync('userinfo');if(user){try {uni.navigateTo({url: '../index/index',// url:'pages/index/index?username='+user.username})} catch (e) {}}},// 登录toLogin:function(){// IM账号登录数据var options = {user: this.form.username,pwd: this.form.password,apiUrl:this.$WebIM.config.apiURL,appKey: this.$WebIM.config.appkey,};// 登录到IMthis.$WebIM.conn.open(options)// 加入到缓存uni.setStorage({key:"userinfo",data:{ userId:this.form.username, password: this.form.password }})try {uni.navigateTo({url: '../index/index',// url:'pages/index/index?username='+user.username})} catch (e) {}},}}
</script><style>.tyb-form{padding: 20rpx;}.tyb-form text{display: block;}.tyb-form .tyb-input-li{padding: 10rpx;}.tyb-bt{background: #007AFF;color: #fff;padding:10rpx 20rpx;text-align: center;}.tyb-inutt{border: 1px solid #0873DE;padding: 10rpx;}</style>

index.vue

<template><view class="content"><view class="tyb-form"><view class="tyb-input-li"><text>IM账号</text><input placeholder="需要发送给谁" type="text" class="tyb-inutt" v-model="form.username" value="" /></view><view class="tyb-input-li"><text>I发送内容</text><input placeholder="发送内容" type="text" class="tyb-inutt" v-model="form.text" value="" /></view><view class="tyb-input-li" ><view class="tyb-bt" style="" v-on:click="sendCustomMsg">{{bttitle}}</view></view></view></view>
</template><script>export default {data() {return {form:{username:"18314452802",text:"你好啊"},bttitle:'发送消息'}},onLoad:function(){},methods: {sendCustomMsg:function(){console.log("发送消息")var _thef = thisvar user = uni.getStorageSync('userinfo')var id = _thef.$WebIM.conn.getUniqueId();                 var msg = new _thef.$WebIM.message('txt', id);      var option = {msg: _thef.form.text,                to: _thef.form.username,                roomType: false,success: function (id, serverMsgId) {console.log('发送成功');},fail: function(e){console.log("发送事变",e);}};console.log(option)msg.set(option);msg.body.chatType = 'singleChat';console.log(_thef.$WebIM)_thef.$WebIM.conn.send(msg.body);},islogin:function(){var user = uni.getStorageSync('userinfo');console.log('yhu',user.data)// try{//  var user = uni.getStorages('userinfo');//    console.log('用户信息',user)// }catch(e){//   console.log('没有用户信息')// }}            }}
</script><style>.tyb-form{padding: 20rpx;}.tyb-form text{display: block;}.tyb-form .tyb-input-li{padding: 10rpx;}.tyb-bt{background: #007AFF;color: #fff;padding:20rpx 20rpx;text-align: center;}.tyb-inutt{border: 1px solid #0873DE;padding: 10rpx;}
</style>

swich.vue

<template><view class="content">接收的信息：{{msg}}</view>
</template><script>export default {data() {return {msg:''}},onLoad:function(){this.getMsg()},methods: {getMsg:function(){var message = uni.getStorageSync('message');this.msg = message.data}         }}
</script><style></style>

helper.js


/*** 页面跳转* @param {Object} url*/
function to(url) {uni.navigateTo({url: url});
}function toast(icon, text, duration, mask, position) {duration = duration || 1500;mask = mask || false;position = position || false;uni.showToast({icon: icon,title: text,duration: duration,mask: mask,position: position,})
}export default {to,toast,
}

uni-app 接入环信sdk相关推荐

使用环信sdk做一个简单的聊天APP
使用环信sdk做一个简单的即时聊天APP,实现简单的通讯感悟在很早以前就想做一个简单的即时聊天app.可能自己对即时聊天的三方SDK了解的不是特别深,在进行了一段时间的学习以后感觉自己的能力达到了 ...
IM实战：Android接入环信 IM SDK
本次学习目标: 注册环信: Android端集成环信 IM SDK: 实现注册-登录-发送消息-会话列表等: 一.环信IM 什么是环信IM 环信IM是一款即时通讯产品,为开发者提供基于移 ...
环信SDK 客服和IM聊天踩坑记录
1 .在使用前需要在Application初始化 /*** 环信客服*/private void initCECIM(){ChatClient.Options options = new ChatCl ...
UNIAPP实战项目笔记57 发送手机验证码接入短信SDK
UNIAPP实战项目笔记57 发送手机验证码接入短信SDK 注册时候需要发送验证通过验阿里云或腾讯云等短信sdk供应商实际案例图片后端接口文件 index.js var express = r ...
即时通信---环信SDK(IOS)使用教程
一. 提前准备注册环信即时通讯云账号下载iOS的环信SDK 登陆到管理后台在我的应用中创建一个应用在苹果的个人开发中心创建一个推送证书(当然不创建也没用关系,只是不能推送消息而已) 创建完证书 ...
android-使用环信SDK开发即时通信功能及源码下载
最近项目中集成即时聊天功能,挑来拣去,最终选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁,说明文档清晰易懂.文档有android.ios.和后台服务器端,还是非常全的. 环信官网:htt ...
环信SDK 头像、昵称、表情自定义和群聊设置的实现二（附源码）
前言: 环信SDK 头像.昵称.表情自定义和群聊设置的实现一(附源码) 接着上面说的,我们来说说表情,它在哪里可以自定义,怎么写,那个方法是添加表情的我们都说说,找到 ChatViewControl ...
环信IM SDK使用（二）：环信SDK初始化及注册和登录
上一篇文章,我们介绍了如何集成环信IM SDK:环信IM SDK使用(一):集成环信SDK及注意事项,后面的文章是在这个的基础上一步一步实现的,如果还有不清楚如何集成环信IM SDK的,请翻看上一篇文 ...
基于环信sdk在uni-app框架中快速开发一款多平台社交Demo
说在前面:此款 demo 是基于环信sdk 开发的一款具有单聊.群聊.聊天室.音视频等功能的应用.在此之前我们已经开发完 Vue.react(web端).微信小程序.这三个热门领域的版本,如有需要源 ...

uni-app 接入环信sdk

uni-app 接入环信sdk相关推荐

最新文章

热门文章