Unity之webgl端通过vue3接入腾讯云联络中心SDK

腾讯云联络中心SDK:云联络中心 Web-SDK 开发指南-文档中心-腾讯云 (tencent.com)

1 首先下载Demo

​

 1.1 对其进行解压

​

 1.2根据文档操作

查看README.md,根据说明设置server下的dev.js里的相关参数。

然后打开电脑终端，cd到项目的路径：

​

安装依赖

 ​

运行

​ 

1.3 运行demo

复制http://127.0.0.1:5173/在浏览器里输入，这时候会显示如下画面：

输入电话号码，点击拨打就会把电话打出去。

​ 

 2 在Unity端的操作

2.1 创建Unity工程

 新建一个Unity工程，在Assets/Plugins/WebGl下创建一个后缀为jslib的文件，记事本打开编写脚本如下：

mergeInto(LibraryManager.library, {
	ReportReady: function () {
		window.ReportReady()
	},
         
        TellPhone:function(typeName, phone){
             SendPhone(UTF8ToString(typeName), UTF8ToString(phone))
        }

});

​

 2.2 编写挂载对象UIPanel上的脚本

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class UIPanel : MonoBehaviour
{ 
    [DllImport("__Internal")]
    private static extern string ReportReady();
    [DllImport("__Internal")]
    private static extern string TellPhone(string type,string phone);
    public TextMeshProUGUI text;
    public TMP_InputField inputField;
    void Start()
    {
        ReportReady();//向vue报告脚本初始化完成
    }
    public void OpenPhone()
    {
        TellPhone("tellphone",inputField.text);
    }
    public void receiveMsgFromVue(string token) {
        text.text = token;
        Debug.Log("接受来自vue的消息 == " + token);
    }
}

2.3 Unity的UI界面

​

2.4最后打包webgl的包

放在tccc-demo-vue\src\路径下，如下图所示：

 ​

2.5改写index.html

打开index.html:

​

SendPhone是Unity发送给网页的方法，sendMsgToUnity方法是网页发送个Unity的方法。

index.html完整代码如下：

  
    
    
    
    
    
  
  
    

      
      

        

        

          

        
      
      
 
      

        

        

        
Web731
      
    
    
  

2.6 修改Container.vue脚本

增加和Unity交互的方法

​

 把原先显示的界面代码删除掉

​

 style 部分也删掉

对Vue不熟悉，我的理解是这样的（理解不对请留言指正）

其中 

onMounted(()=>{
        window.addEventListener('message', unityWatch,true)
    }) 

是事件，对Unity发送来的消息进行监听。

function  vueSendToUnity(){
      console.log(statusMap[status.value])
      unityIframe.value.contentWindow.sendMsgToUnity({userId:'****',状态:status.value|| '加载中...'})  
}

是vue把消息发送到Unity端。