在Unity中调用js

由于项目是在WebGL平台，就不得不跟浏览器还有JS打交道。上篇笔记有提到，有个功能是生成实验报告，由于是网页端，暂时想到以网页的形式展示报告。 于是思考出了一个貌似可行的解决方案

方案选取

① 用户点击实验报告按钮，生成html格式的实验报告数据(实时)

② 将数据保存在数据库中，与存档关联，并返回报告ID

③ 调用JS函数(window.open) 打开html，并传递报告ID

④ html即报告界面，在OnLoad函数中请求服务器报告数据，显示报告

其实这个解决方案是不太合理的，因为我把html中的模板+数据都放在了数据库中，一个报告大概有100k大小，需要mediumText类型。真正合理的方案应该 是把模块写好，数据空出来，然后数据库中只要存放关键数据。不过由于报告内容有些庞杂，拆分起来有些困难，就先用了这样一个偷懒的方案。

代码实现

接下来就是实施了。首先是如何调用JS函数：

① 首先要在 Assets/Plugins（必须是这个目录）中创建一个.jslib文件，命名无要求。

② 在jslib中写好函数内容

mergeInto(LibraryManager.library, {
  //接受参数，并在新的页面打开html页面
  linkApp: function (url) {
    var urlStr = Pointer_stringify(url);
    console.log(urlStr);
    console.log(window.location.pathname);
    window.open(urlStr, 'blank');
  },

  //弹窗提示当前未登录 并跳转到登录页面
  turnLogin: function (url) {
    var urlStr = Pointer_stringify(url);
    alert('当前未登录');
    self.location = urlStr;
  },

  //弹窗提示"网络错误"
  showMsg: function (url) {
    var urlStr = Pointer_stringify(url);
    alert(urlStr);
  },
});

③ 在unity中执行该js函数

using System.Runtime.InteropServices;
//引入要执行的JS函数名和参数
private static extern void linkApp(string str);
//通过函数名调用
linkApp(a.url);

④ 在html文件中读取报告信息

window.onload = function () {
  var afterUrl = window.location.search.substring(1); //截取参数
  var httpRequest = new XMLHttpRequest(); //创建需要的对象
  httpRequest.open('GET', 'http://127.0.0.1:8000/requestData?id=' + afterUrl, true); //打开连接
  httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
  httpRequest.send('name=teswe&ee=ef'); //发送请求 将情头体写在send中
  /**
   * 获取数据后的处理程序
   */
  httpRequest.onreadystatechange = function () {
    //请求后的回调接口，可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      //验证请求是否发送成功
      var data = httpRequest.responseText; //获取到服务端返回的数据
      document.body.innerHTML = data; //将接收的数据添加到html中
    }
  };
};

简单总结

其实unity也有能打开链接的API：即Application.OpenURL(string url) 但在网页端的情况下，会在原网页打开，而不是在新的页面打开，于是才选择了通过JS打开。虽然现在已经制作完毕， 但总觉得这个解决方案不太好，后续还是需要加以优化和调整。