相信很多开发微信小游戏的小伙伴都清楚，微信为了用户对小游戏更好的体验，对上传的包体整体大小设置了4mb以下（4mb! emmm~~~），那么只好把游戏的一些资源放在服务器上了。
废话不多说，我以cocos creator引擎加载几张放在apache服务器上的图片为例
ps：我使用的服务器是自己的，另外服务器使用的是centos的操作系统
在服务器上搭建apache服务器请看centos6.7下搭配apache+php+mysql环境 - CSDN博客
首先使用xftp软件在服务器上放两张图片资源image1.png、image2.png（注意路径！是你网站站点下！）
然后在这里建一个php文件（注意路径！是你网站站点下！）
php文件内容如下：
<?php
header('Access-Control-Allow-Origin:*');
header('Control-type:image/png');
if(isset($_GET['url'])){
echo file_get_contents($_GET['url']);
}
?>在cocos creator加载资源代码如下：
现在，很多小伙伴会不解：在服务器上的那个php文件有什么用处呢？
其实这个php起到了中转的作用，如果你用cocos creator直接加载服务器上的资源的话，会受到浏览器的 CORS 跨域策略限制，所以我们就需要这个php文件了，这个时候我们直接访问这个php文件，并把我们需要的资源路径参数传给它，让这个php帮我们加载资源，然后在它返回的数据添加头信息
header('Access-Control-Allow-Origin:*');
header('Control-type:image/png');
有了这个头信息，浏览器才会允许你加载资源！
现在我们再说说预加载并设置进度条！
首先新建节点、挂progressBar组件和新建一个javascript文件！
最后javaScript示例代码：
cc.Class({
extends: cc.Component,
properties: {
progressBar:{
default:null,
type:cc.ProgressBar
},
},
// LIFE-CYCLE CALLBACKS:
onLoad () {
this._urls = [
{url:'http://127.0.0.1（这里填你的服务器ip)/test.php?url=http://127.0.0.1（这里填你的服务器ip)/image1.png', type:'png'},
{url:'http://127.0.0.1（这里填你的服务器ip)/test.php?url=http://127.0.0.1（这里填你的服务器ip)/image2.png', type:'png'},
];
this.resource = null;
this.progressBar.progress = 0;
this._clearAll();
cc.loader.load(this._urls, this._progressCallback.bind(this), this._completeCallback.bind(this));
},
start () {
},
_clearAll: function() {
for(var i = 0; i < this._urls.length; ++i) {
var url = this._urls[i];
cc.loader.release(url);
}
},
_progressCallback: function(completeCount, totalCount, res) {
//加载进度回调
console.log('第 ' + completeCount + '加载完成！');
this.progress = completeCount / totalCount;
this.resource = res;
this.completeCount = completeCount;
this.totalCount = totalCount;
},
_completeCallback: function(err, texture) {
//加载完成回调
},
update (dt) {
if(!this.resource){
return ;
}
var progress = this.progressBar.progress;
if(progress >= 1){
console.log('加载完成')
//加载完成
this.progressBar.node.active = false;
this.enabled = false;
return ;
}
if(progress < this.progress){
progress += dt;
}
this.progressBar.progress = progress;
},
});不要忘了把New ProgressBar节点拖到脚本里哦！
来个预览！
好了，教程到这里就完结了。不足之处，欢迎指出！