cocoscreator webview 视频视频直播
具体使用请看官网教程:https://docs.cocos.com/creator/manual/zh/components/webview.html?h=webview
解决跨域
html5 head内加入下面代码
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Access-Control-Allow-Methods" value="OPTIONS,POST,GET">
<meta http-equiv="Access-Control-Allow-Headers" value="x-requested-with,content-type">
<meta http-equiv="X-Frame-Options" content="deny">
nginx 加下代码
###start####
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Headers X-Requested-With;
###end ###
或者
#add_header Access-Control-Allow-Origin *;
#add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
#add_header Access-Control-Allow-Headers
#DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization;
具体参数自行百度google
顺便映射也记录下,有用可以再学习
#upstream other_html{
# server 192.168.0.146:8888;
#}
#proxy_redirect off;
#proxy_set_header Host "192.168.0.146:8888";
#proxy_set_header X-Real-IP $remote_addr;
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_pass http://other_html;
方法调用
app 调用 html 的全局函数数据传到html 因此再html 中加入
function onAppDataFunction(data){
var obj = JSON.parse(data);
var datas = obj.data;
switch (obj.cmd) { //命令
// 彩票信息
case 1188002:
// html 对数据的操作
// html 的行为
break;
default :
break;
}
console.log("[==APP TO HTML5==]----->>", obj.cmd, obj.data);
};
html 向app获取数据 cmd 命令 data数据
function sendMessageToApp(cmd, data){
var obj = {};
obj.cmd = cmd;
obj.data = data;
var str = JSON.stringify(obj);
console.log("[==HTML5 TO APP==]----->>", str);
var messageData = 'webgame://' + encodeURI(str);
document.location = messageData;
};
html响应形势
.on('click', '.html5_btn', function (){
sendMessageToApp('Html_To_App_btn_event', {
json: json,
});
})
上面的方法只试用于native 不支持web版本
web版本试用
function sendMessageToApp(cmd, data){
var obj = {};
obj.cmd = cmd;
obj.data = data;
var str = JSON.stringify(obj);
console.log("[==HTML5 TO APP==]----->>", str);
var messageData = 'webgame://' + encodeURI(str);
// document.location = messageData;
// parent.cc.webgame(encodeURI(str));
// 如果 webgame 是定义在 window 上,则
parent.webgame(encodeURI(str));
};
cocoscreator 中的实现
cc.Class({
extends: cc.Component,
properties: {
webnode :cc.Node,
webview :cc.WebView,
},
onLoad () {
this.webnode.x = -750;
this.scheduleOnce(this.evaluateJs,5);
},
evaluateJs : function(){
var obj = {}
obj.cmd = "cmd"
obj.data = "json"
this.webview.evaluateJS(`onAppDataFunction('${JSON.stringify(obj)}')`);
},
start: function () {
// 这里是与内部页面约定的关键字,请不要使用大写字符,会导致 location 无法正确识别。
var scheme = "webgame";
function jsCallback (target, url) {
// 这里的返回值是内部页面的 URL 数值,需要自行解析自己需要的数据。
var str = url.replace(scheme + '://', ''); // str === 'a=1&b=2'
// webview target
console.log(target,str);
console.log(decodeURI(str));
var obj = JSON.parse(decodeURI(str));
if(obj.cmd){
console.log(obj.cmd)
}
}
window.webgame = function(data){
console.log("html5toapp",data)
console.log(decodeURI(str));
var obj = JSON.parse(decodeURI(str));
if(obj.cmd){
console.log(obj.cmd)
}
}
this.webview.setJavascriptInterfaceScheme(scheme);
this.webview.setOnJSCallback(jsCallback);
},
onWebFinishLoad: function (sender, event) {
if (event === cc.WebView.EventType.LOADED) {
console.log("load over")
this.webnode.x = 0;
} else if (event === cc.WebView.EventType.LOADING) {
console.log("load ing")
} else if (event === cc.WebView.EventType.ERROR) {
console.log("load error")
}
},
});
直接运行时还是会报跨域的问题,解决办法直接发布web版本将文件放入同一个目录下让其不跨域就能运行啊!