unity webgl 与 js 交互判断用户是移动端还是PC端的案例

使用Unity版本为2019.4.36

第一步,编写.jslib文件

首先在unity中随便新建一个后缀是.jslib的文件,放在Plugins文件夹中(如果没有这个文件夹,可以自己自己新建一个),然后用记事本或者其他文本编辑器打开,输入以下代码


mergeInto(LibraryManager.library, {
  //LogStr 注意js的方法参数没有类型
  jsLogStr:function(str) //这个方法名必须和c#中的相同
  {
  	  //Pointer_stringify(value)   函数是将参数转换成字符串
      jsLogStr(Pointer_stringify(str)); //此处为调用hmtl页面中的Js方法
  },
  //无参数方法 用来判断是否为移动端
  isMobile:function()
  {
      isMobile();
  },
});

上述代码中,大致代码结构是这样

//每一个方法之间必须用逗号分割
mergeInto(LibraryManager.library, { 函数A:function(){},函数B:function(){},函数A:function(){},···  });

第二步,编写c#部分

然后开始写c#部分代码,随便新建一个带有MonoBehaviour的脚本,方便可以挂载到物体上面

using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.UI;
class Tojs : MonoBehaviour
{
    [DllImport("__Internal")] //internal前是两个下划线  这一步的作用是动态调用dll
    private static extern void jsLogStr(string str); //方法的名字要和上一步的jslib中的方法名一致,用起来和普通方法完全一致
    [DllImport("__Internal")]
    private static extern void isMobile();

    private void Start()
    {
    	//物体可以添加一个Button组件,方便测试
        transform.GetComponent<Button>().onClick.AddListener(MouseDown);
    }
    private void MouseDown()
    {
        //jsLogStr
        string str="Hello World";
        jsLogStr(str);
        //isMobile
        isMobile();
    }
    public void CheckClientModel(string str)//js判断用户是什么端完成之后,调用的c#函数
    {
        Debug.Log($"客户端是:{str} 端");
    }
}

第二步,编写js部分

c#部分搞定了,现在来写js部分,这部分需要先用Unity打出webgl的包出来,然后打开其中的html文件,在script标签中写入以下代码:

      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/test.json", { onProgress: UnityProgress });

      function jsLogStr(str){//上面c#部分的jsLogStr就是调用的这个jsLogStr
        console.log(str);
      }
      //判断是否为移动端
	  function isMobile() {//上面c#部分中的isMobile就是调用的这个isMobile
        let flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (flag) {
          //此处使用Unity自带的gameobject.SendMessage()函数调用unity中的函数
          //第一个参数是脚本挂载的物体名称,第二个参数是要调用的函数名称,第三个是传入的参数
          //具体的全部用法可以在官方文档查到
          unityInstance.SendMessage("Login", "CheckClientModel", "Mobile");
        } else {
          unityInstance.SendMessage("Login", "CheckClientModel", "pc");
        }
      }

HTML完整的实例代码:

DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | New Unity Projecttitle>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js">script>
    <script src="Build/UnityLoader.js">script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/test.json", { onProgress: UnityProgress });
      //判断是否为移动端
	  function isMobile() {//上面c#部分中的isMobile就是调用的这个isMobile
        let flag = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (flag) {
          //此处使用Unity自带的gameobject.SendMessage()函数调用unity中的函数
          //第一个参数是脚本挂载的物体名称,第二个参数是要调用的函数名称,第三个是传入的参数
          //具体的全部用法可以在官方文档查到
          unityInstance.SendMessage("Login", "CheckClientModel", "Mobile");
        } else {
          unityInstance.SendMessage("Login", "CheckClientModel", "pc");
        }
      }
      //打印字符串
      function jsLogStr(str){//上面c#部分的jsLogStr就是调用的这个jsLogStr
        console.log(str);
      }
    script>
  head>
  <body >
    <div class="webgl-content" >
      <div id="unityContainer" style="width: 960px; height: 600px" >div>
      <div class="footer">
        <div class="webgl-logo">div>
        <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)">div>
        <div class="title">New Unity Projectdiv>
      div>
    div>
  body>
html>

到这里就大功告成了,一个简单的js和unity通讯的案例就完成了。

你可能感兴趣的:(Unity,unity,webgl,javascript)