前言
目前，在Vue3中，实例化环信SDK后，通常文件需要在当前文件中的实例之后导入SDK，类似这段代码。
//实例化后导出
import EC, {
EasemobChat } from 'easemob-websdk';
let EaseClient = new EC.connection({
appKey: "YOUR_APP_KEY",
});
export {
EaseClient, EC, EasemobChat };
//使用时引入
<script setup lang="ts">
import {
reactive } from 'vue';
import {
EaseClient } from '@/EaseIM';
const loginEaseIMFrom = reactive({
username: '',
password: '',
});
//登录IM
const loginEaseIM = async () => {
try {
let {
accessToken } = await EaseClient.open({
user: loginEaseIMFrom.username,
pwd: loginEaseIMFrom.password,
});
console.log('accessToken', accessToken);
} catch (error: any) {
console.log('>>>>登录失败')
}
};
</script>
虽然这些方法完全可以满足开发需求，而且在setup语法糖中使用起来也很方便，但是如果我们真的想写一个plugins插件来注册到全局，那么我们应该如何编译呢？
步骤1
根据Vue官方文档插件编译规范，之前导入的EaseClient将会被改造为这种格式。
//文档插件编写格式
export default {
install: (app, options) => {
// 在这里编写插件代码
},
};
//改造后的格式
import type {
App } from 'vue';
import EC, {
EasemobChat } from 'easemob-websdk';
let EaseClient = new EC.connection({
appKey: 'YOUR_APPKEY',
});
interface Options extends EaseIM.EasemobChat.ConnectionParameters {
appKey: string;
}
export default {
install: (app: App, options?: Options) => {
//如果options下的appKey 不为你当前初始化的appKey,则重新实例化
if (options.appKey !== 'YOUR_APPKEY') {
EaseClient = new EC.connection({
appKey: 'YOUR_APPKEY',
});
}
//在app.config.globalProperties上挂载EaseClient
app.config.globalProperties.$EaseClient = EaseClient;
},
};
第2步
改造后我们尝试像element-plus一样引入，使用im插件
import {
createApp } from 'vue';
import EaseClient from '@/EaseIM/plugin';
app.use(EaseClient);
// mount
app.mount('#app');
步骤3
那么下一步我们应该如何在vue组件中使用它呢？
非设置语法糖的使用
<script lang="ts">
export default {
//在mounted中使用是因为需要等组件加载完成后方可访问$EaseIM
async mounted() {
await this.$EaseClient.open({
user:'test',pwd:'1'});
},
setup() {
return {
};
},
};
</script>
设置要使用的语法糖
<script setup lang="ts">
//导入获取当前实例的方法
import {
getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
instance?.proxy?.$EaseClient.open({
user: 'test', pwd: '1' });
</script>
但我们会发现，在使用ts类型检测通知时，$EaseClient找不到这个模块，更不用说调用时的类型提示了。 那么我们如何解决这个问题呢？ 让我们继续下一步。
步骤4
其实这一步在Vue官方文档的安装插件部分有描述。 对于 TypeScript 用户vue引入typescript，请参阅：扩展全局属性。 这里只讲当前问题的解决方案，代码就不多废话了。
/*
* 如果全局中没有类似，app.d.ts或其他命名的类型声明文件请创建。
*紧接可以添加以下下类型声明
*/
import Vue from 'vue';
type EaseClient = EasemobChat.Connection;
export declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$EaseClient: EaseClient;
}
}
然后我们就可以在组件中开始调用测试，发现可以正常使用vue引入typescript，有类型提示。
点击这里下载欢信Vue3 IM Demo，自己尝试一下吧~
欢信web sdk下载：
注册环信：
发表评论