uni-app引入极光im

uni-app引入极光im

最近在使用uni框架开发app,app需要有聊天的功能,由于之前项目是使用极光im的,但是之前的引入方法不太正确,导致im初始化慢或总是断掉的问题。于是我就乖乖按照极光文档中引入小程序的方法重写了代码。

注意点:极光官网上目前的小程序sdk版本是1.4.2的,但是我用最新版本总是连接不上,所以该教程引用的是1.4.0

  1. 在项目某个目录下创建js文件,命名为chat.js,然后引入极光im sdk:
// chat.js
import JMessage from '@/common/jmessage-wxapplet-sdk-1.4.0.min.js'
  1. 在chat.js中创建一个Chat类,用于编写im业务逻辑,并挂载到vue实例上
// chat.js
	export default class Chat{
    
    
		constructor() {
    
    
			this.jim = null
		}
	}

在main.js中挂载:

// main.js
import Chat from './common/chat.js'
Vue.prototype.$chat = new Chat()
  1. 写一个getJIM方法用于创建JMessage实例,要保证全局只有一个实例
// chat.js
	getJim() {
    
    
	// 保证只有一个实例,不然总会出现断开的情况
		if (!this.jim) {
    
    
			this.jim = new JMessage({
    
    
				debug: false //是否开启调试模式
			})
		}
	}
  1. 在需要登录的地方使用,如(App.vue文件)中使用
// App.vue
onShow: function () {
    
    
		console.log('App Show')
		//login是JMessage的方法,自己根据文档使用
		this.$chat.getJim().login()
	},
  1. app进入后台,需要退出im
    onHide: function() {
          
          
    	console.log('App Hide')
    	// 这里有一个坑,安卓不会关闭socket,导致进入app初始化失败(解决方案下一篇)
    	this.$chat.getJim().loginOut()
    }
    

该文章只是根据极光官网简单的写导入的方法,保证im在连接过程中比较稳定的使用

demo下载地址:
github

猜你喜欢

转载自blog.csdn.net/weixin_40216358/article/details/102873484