uni-app 接入环信sdk
官方文档：一个接入的采坑之路终于完结了，送给需要的人们项目不需要做太多的其他处理，只做发送消息，有提示音、振动即可，多余不处理咯。给大家做个接入参考。环信sdk ：3.x.x版本接入方式：直接引用js包框架：uni-appmain.js里面有一个声音提示，你们自行网上下载好了，效果：注意：实例化SDK对象需要把appkay加上去，加上去，加上去文件目录一览WebIMConfig.js// for
·
一个接入的采坑之路终于完结了，送给需要的人们
项目不需要做太多的其他处理，只做发送消息，有提示音、振动即可，多余不处理咯。给大家做个接入参考。
环信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,
}
致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)