| File协议加载vue(局部div容器内嵌cocos)项目，媲美原生体验方案分享 |
|---|
一、Vue + Hybrid部分
解决问题：
- 启动应用时，一次性加载vue项目资源、脚本文件
-
加载进入后，更流畅的处理页面切换、渲染速度，
-
离线访问：当用户设备处于离线状态或网络连接不稳定时，使用本地文件可以保证应用的某些功能和内容仍然可用
-
热更新：应用可以通过在适当时机下载更新的内容包到本地沙盒，再通过
file协议加载，使内容更新能够更快捷
Bridge整理
支持热更新的bridge大体如下:
-
判断文件/文件夹是否存在
-
删除文件/文件夹
-
创建文件夹
-
读取文本文件内容
-
写入文本文件(内容全替换)
-
追加写入文本文件
-
拷贝文件夹内的所有内容到另一个文件夹下
-
拷贝单个文件/文件夹到指定文件夹下
-
下载文件到指定目录
-
获取远程Json的内容
-
上传文件到CDN，如cos/oss(支持并发)
-
加载沙盒URL
加载流程
— 
二、Cocos部分
原生webview，加载集成了cocoscreator的vue项目（file://协议打开）时，修改了哪些内容？
1. 忽略 orientationchange 屏幕旋转事件
_orientationChange: function _orientationChange() {
return;
}
resizeWithBrowserSize: function resizeWithBrowserSize(enabled) {
return
}
2. 允许加载 Bitmap,否则移动端图片无法加载
ALLOW_IMAGE_BITMAP: true,//!cc.sys.isMobile,
3. 跳过 XMLHttpRequest, window.COCOS_RES_CONFIG 配置由 creator 项目构建完成后的自定义脚本生成至 cocos-res-config.[hash].js
function downloadFile(url, options, onProgress, onComplete) {
if (false) {
onComplete && onComplete(null, xhr.response);
} else {
let result = window.COCOS_RES_CONFIG[url];
if (/\.png$/i.test(url)) {
var mimeType = "image/png";
result = base64ToBlob(result, mimeType);
}
onComplete && onComplete(null, result);
return;
}
//...
}
4.main.[hash].js ：
// 1.canvas全透明处理
// ...
cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
var onStart = function() {
// ...
};
// ...
bundle.loadScene(launchScene, null, onProgress, function(err, scene) {
if (!err) {
cc.director.setClearColor(cc.color(0, 0, 0, 0));
// ...
}
});
// 2.禁用全屏
cc.view.enableAutoFullScreen(false);
// 3.去掉splash相关代码
效果展示
，脚本资源都已经融合到vue项目内了，不需要postmessage，window的方法都可以互相访问，比如在外面让游戏暂停：cc.game.pause()