uni-app 接入环信sdk

深藏阁楼爱情的钟 2023-01-07 04:55 605阅读 0赞

[官方文档：][Link 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 3]

**注意：实例化SDK对象需要把appkay加上去，加上去，加上去**  
文件目录一览  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 4]  
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()

<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,
    }

[Link 1]: http://docs-im.easemob.com/im/applet/other/uniappnativeapp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70]: /images/20221119/a44f5b9b1a7d49e68a616440b3239855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 1]: /images/20221119/71ca0f6df25545358e4c55c0d43abe60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 2]: /images/20221119/41ca61a94acc4fadb0328e36723e8f5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 3]: /images/20221119/5149b955902c4710bee373751acd6eba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 4]: /images/20221119/b051f45ca0de416a8fb11ab0040669ae.png