cocos creator微信小游戏 加载进度页面

参考文档
1、Cocos creator 微信小游戏 加载远程资源启动页
https://blog.csdn.net/nihaoqlw/article/details/85139823
2、手把手教你制作微信小游戏的下载进度条-适用于cocos3D
https://forum.cocos.org/t/cocos3d/89614

正文
1、添加 loading-scene 页面内容

loading-scene.js 是主要页面代码，其他的图片文件是进度条资源，loading-scene2.js是参考文件(没有用处可删除)。
loading-scene.js 代码：

var createImage = function(sprite, url, cb) {
  if(cc.sys.platform = cc.sys.WECHAT_GAME){
    let image = wx.createImage();
    image.src = url
    image.onload = function(){
      let texture = new cc.Texture2D();
      texture.initWithElement(image)
      texture.handleLoadedTexture();
      sprite.spriteFrame = new cc.SpriteFrame(texture);
      if(cb)
      cb(sprite);
    };
  }
}
//设置分辨率
cc.view.setDesignResolutionSize(1280, 720, 0);
var scene = new cc.Scene();
let visibleSize = cc.view.getVisibleSize();
//1.新增Canvas组件
var root = new cc.Node();
root.name = 'Canvas';
var canvas = root.addComponent(cc.Canvas);
root.parent = scene;
var bgSprite = root.addComponent(cc.Sprite);
createImage(bgSprite, "loading-scene/startScene_bg.jpg");

// 进度条组件位置
let pos = cc.v2(0,-200);

let loadingBgNode = new cc.Node();
loadingBgNode.parent = root;
loadingBgNode.position = pos;
let loadingBgSprite = loadingBgNode.addComponent(cc.Sprite);
createImage(loadingBgSprite, 'loading-scene/loadingBg.png');

let loadingBarNode = new cc.Node();
loadingBarNode.parent = root;
loadingBarNode.position = pos;
let loadingBarSprite = loadingBarNode.addComponent(cc.Sprite);
createImage(loadingBarSprite, 'loading-scene/loadingBar.png', function (sprite){
  sprite.type = cc.Sprite.Type.FILLED;
  sprite.fillType = cc.Sprite.FillType.HORIZONTAL;
  sprite.fillStart = 0;
  sprite.fillRange = 0;
});

//新增进度条的label
var labelNode = new cc.Node();
var label = labelNode.addComponent(cc.Label);
label.fontSize = 25;
label.lineHeight = label.fontSize;
labelNode.position = pos;
label.color = cc.color(255,255,255,255);
label.string = '资源加载中...0%'
labelNode.parent = root;

//3.预加载场景
scene.loadinglaunchScene = function(launchScene) {

  cc.director.preloadScene(launchScene, (completedCount, totalCount, item) => {
    //todo 这个地方加载精度条
    loadingBarSprite.fillRange = completedCount / totalCount;
    label.string = ("资源加载中..." + parseInt((completedCount / totalCount) * 100) + "%")
  }, (error) => {
    if (error) {
      //todo 这个地方提示网络环境不好，请检查网络后重试
      console.log('==preloadScene error==', launchScene, error)
      label.string = '加载失败,请检查网络';
      return;
    }
    cc.director.loadScene(launchScene, null, function() {
      if (cc.sys.isBrowser) {
        // show canvas
        var canvas = document.getElementById('GameCanvas');
        canvas.style.visibility = '';
        var div = document.getElementById('GameDiv');
        if (div) {
          div.style.backgroundImage = '';
        }
      }

      cc.view.setDesignResolutionSize(640, 1136, 4);
      cc.loader.onProgress = null;
      console.log('Success to load scene: ' + launchScene);
    });
  })
}

module.exports = scene;

注：如果包体太大，可以将背景和进度条图片资源放到服务器 修改加载的url地址就可 如下：

2、修改main.js onStart 方法
修改后如下：

var onStart = function () {
        cc.loader.downloader._subpackages = settings.subpackages;

        cc.view.enableRetina(true);
        cc.view.resizeWithBrowserSize(true);

        if (!true && !false) {
            if (cc.sys.isBrowser) {
                setLoadingDisplay();
            }

            if (cc.sys.isMobile) {
                if (settings.orientation === 'landscape') {
                    cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
                }
                else if (settings.orientation === 'portrait') {
                    cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
                }
                cc.view.enableAutoFullScreen([
                    cc.sys.BROWSER_TYPE_BAIDU,
                    cc.sys.BROWSER_TYPE_WECHAT,
                    cc.sys.BROWSER_TYPE_MOBILE_QQ,
                    cc.sys.BROWSER_TYPE_MIUI,
                ].indexOf(cc.sys.browserType) < 0);
            }

            // Limit downloading max concurrent task to 2,
            // more tasks simultaneously may cause performance draw back on some android system / browsers.
            // You can adjust the number based on your own test result, you have to set it before any loading process to take effect.
            if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_ANDROID) {
                cc.macro.DOWNLOAD_MAX_CONCURRENT = 2;
            }
        }
        //#region 注释掉的部分
        // function loadScene(launchScene) {
        //     cc.director.loadScene(launchScene,
        //         function (err) {
        //             if (!err) {
        //                 if (cc.sys.isBrowser) {
        //                     // show canvas
        //                     var canvas = document.getElementById('GameCanvas');
        //                     canvas.style.visibility = '';
        //                     var div = document.getElementById('GameDiv');
        //                     if (div) {
        //                         div.style.backgroundImage = '';
        //                     }
        //                 }
        //                 cc.loader.onProgress = null;
        //                 console.log('Success to load scene: ' + launchScene);
        //             }
        //             else if (CC_BUILD) {
        //                 setTimeout(function () {
        //                     loadScene(launchScene);
        //                 }, 1000);
        //             }
        //         }
        //     );
        // }
        // var launchScene = settings.launchScene;
        // load scene
        // loadScene(launchScene);
        //#endregion
       

      

       //#region 新加代码部分
        var launchScene = settings.launchScene;
       //代码没分包
        var loadingScene = require('loading-scene/loading-scene');
        cc.director.runSceneImmediate(loadingScene);
        loadingScene.loadinglaunchScene(launchScene);
        
        //代码分包 先加载代码
        // cc.loader.downloader.loadSubpackage('script',function(err){
        //     if(err){
        //         return console.error(err);
        //     }
        //     console.log('load subpackage successfuly.')
        //     var loadingScene = require('loading-scene/loading-scene');
        //     cc.director.runSceneImmediate(loadingScene);
        //     loadingScene.loadinglaunchScene(launchScene);
        // })
        //#endregion
    };

注：如果做了代码分包加载 先加载分包的代码再加载页面 做如下调整:

本文地址：https://blog.csdn.net/qq_18924323/article/details/107335611