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: "---------------------#-----",//你在环信平台申请的创建的appkey
	https: 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 server
	heartBeatWait: 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()

login.vue

<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,
				};
				// 登录到IM
				this.$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 = this
				var 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,
}