IOS中Unity与JS通信解决方案

UniWebView支持mac os，Android，IOS，WP8（2.0以后）

当项目需要h5和Unity协同开发时，前端代码运行在Unity提供的webView环境中。

前言

最近碰到一个项目，需要H5和Unity协同开发。H5负责页面交互，Unity负责模型渲染。在这样的业务场景下，需要Unity与H5之间的频繁通信。H5需要将用户的操作告知Unity。针对此种场景，提供Unity与JS之间的通信解决方案。

Unity向JS传递消息

原理其实很简单：JS是在Unity提供环境下运行的，所以JS注册的全局函数，Unity也有权限调用。webview提供了接口 EvaluateJavaScript() 用来调用JS的方法。

注：注册函数要在调用之前。

//js代码
window.endLoad = function(flag){
    if(flag){
        alert("模型加载完毕")
    }
}

//Unity在合适的场景调用JS函数，传递信息
UniWebViewInterface.EvaluateJavaScript('endLoad',true);

调用成功后，执行js代码，屏幕弹窗显示“模型加载完毕”

JS向Unity传递消息

对于一个较大型的项目，JS与Unity之间可能存在频繁的信息交互。为了方便代码的维护以及增加可扩展性，将各个功能单独封装。

cmd.js

//Unity和JS之间约定不同的代号代表不同的功能
const CMD = Object.freeze({
    start_loading:"1",//开始加载
    open_page:'2'//打开页面
})
export default CMD;

unity.js

const handleStr = obj => {
	let url = "uniwebview://index.html?";
    let keys = Object.keys(obj);
    for (const key of keys) {
    if (obj[key].length) {
        url = url + key + "=[";
        let str = "";
        for (const i of obj[key]) {
            str = JSON.stringify(i) + ",";
            url = url + str;
        }
            url = url.substring(0, url.length - 1);
            url = url + "]&";
        }
    }
    url = url.substring(0, url.length - 1);
    return url;
}

export const Docket = obj => {
	location.href = handleStr(obj)
}

index.js

import CMD from './cmd'
import {Socket} from './unity'

export default class UNITY{
	constructor(){}
	clear(){
		this.queue = {
          keydata: [],
          keyevent: [],
          keysql: [],
          keysdk: []
        };
        return this;
	}
	send(){
		Socket(this.queue);
	}
	openPage(url){
		const socketMsg = {
            CMD:CMD.open_page,
            url:url
		}
		this.queue.keydata.push(socketMsg);
        return this;
	}
}

vue中使用

import UNITY from '@/unity/index'
const unity = new UNITY()
export default{
	methods:{
        openPage(){
        let url ="https://www.123.com"
            unity
                .clear()
                .openPage(url)
                .send()
        }
    }
}