【更新】：

1.验证token；
2.更换开屏loading；
3.弹窗背景加安全框；
4.设置移动平台构建模板；

assets/main/SceneMain.fire

@@ -73,18 +73,21 @@
       },
       {
         "__id__": 5
+      },
+      {
+        "__id__": 7
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 12
+        "__id__": 14
       },
       {
-        "__id__": 13
+        "__id__": 15
       },
       {
-        "__id__": 14
+        "__id__": 16
       }
     ],
     "_prefab": null,
@@ -233,6 +236,100 @@
     "_alignWithScreen": true,
     "_id": "ea1MDxU7BPMb9AjP2dy+Az"
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "bg",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 6
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 2480,
+      "height": 1440
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": "57dpEEmjdEWpMBbWM5m+k8"
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "7d07c1e2-73b5-410d-998f-dbe6f1cc8026"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": "ebD4sGX51Ek7m3NGwtQQY4"
+  },
   {
     "__type__": "cc.Node",
     "_name": "btnNext",
@@ -242,19 +339,19 @@
     },
     "_children": [
       {
-        "__id__": 6
+        "__id__": 8
       }
     ],
     "_active": false,
     "_components": [
       {
-        "__id__": 8
+        "__id__": 10
       },
       {
-        "__id__": 9
+        "__id__": 11
       },
       {
-        "__id__": 10
+        "__id__": 12
       }
     ],
     "_prefab": null,
@@ -310,13 +407,13 @@
     "_name": "label",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 5
+      "__id__": 7
     },
     "_children": [],
     "_active": true,
     "_components": [
       {
-        "__id__": 7
+        "__id__": 9
       }
     ],
     "_prefab": null,
@@ -372,7 +469,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 6
+      "__id__": 8
     },
     "_enabled": true,
     "_materials": [
@@ -405,7 +502,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 5
+      "__id__": 7
     },
     "_enabled": true,
     "_materials": [
@@ -437,7 +534,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 5
+      "__id__": 7
     },
     "_enabled": true,
     "alignMode": 1,
@@ -464,7 +561,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 5
+      "__id__": 7
     },
     "_enabled": true,
     "_normalMaterial": null,
@@ -473,7 +570,7 @@
     "zoomScale": 1.2,
     "clickEvents": [
       {
-        "__id__": 11
+        "__id__": 13
       }
     ],
     "_N$interactable": true,
@@ -582,7 +679,7 @@
       "__uuid__": "cd07e761-75fb-4f91-be77-c08f86d00457"
     },
     "btnNext": {
-      "__id__": 5
+      "__id__": 7
     },
     "_id": "80oQpM9U1KTIx7FH0iSB/b"
   },

assets/main/SceneMain.ts

@@ -59,6 +59,7 @@ export default class Scene extends cc.Component {
 
     /** 游戏开始 */
     async start() {
+        common.hideLoading();
         let result = await this.checkUser();
         if (result) {
             this.enterGame();
@@ -83,22 +84,20 @@ export default class Scene extends cc.Component {
         let url = 'https://open.api.luojigou.vip/mall/mobile/common/verify/token';
         let token = Tools.getLocalStorage('token', null);
         common.log('token验证 url: ', url, '; token: ', token);
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             let xhr = new XMLHttpRequest();
+            xhr.open("GET", url, true);
+            xhr.setRequestHeader('token', token);
             xhr.onreadystatechange = function () {
-                if (xhr.readyState == 4) {
-                    let text = HttpStateMap.instance.getErrorInfoById(xhr.status);
-                    console.log(text);
-                    if (xhr.status == 200) {
-                        resolve(true);
-                    }
-                    else {
-                        reject(false);
-                    }
+                if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
+                    console.log(xhr.responseText);
+                    let json = JSON.parse(xhr.responseText);
+                    resolve(json.status == 200);
                 }
             };
-            xhr.open("GET", url, true);
-            xhr.setRequestHeader('token', token);
+            xhr.onerror = function () {
+                resolve(false);
+            }
             xhr.send();
         });
     }

assets/resources/prefab/popUp.prefab

@@ -113,8 +113,8 @@
     },
     "_contentSize": {
       "__type__": "cc.Size",
-      "width": 1920,
-      "height": 1080
+      "width": 2480,
+      "height": 1440
     },
     "_anchorPoint": {
       "__type__": "cc.Vec2",

assets/src/common/common.ts

@@ -54,6 +54,13 @@ class common {
         this.pageCur = pageNum;
     };
 
+    //隐藏页面loading
+    hideLoading() {
+        var splash = document.getElementById('splash');
+        splash.style.visibility = 'hidden';
+        console.log("--hideLoading--: 隐藏加载界面");
+    }
+
     /** 获取当前游戏的本地数据 */
     getGameFormLocal(): number {
         let objLocal: any = Tools.getLocalStorage(this.project, null);

build-templates/web-mobile/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <title>与逻辑狗一起玩转思维</title>
+
+    <!--http://www.html5rocks.com/en/mobile/mobifying/-->
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1" />
+
+    <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="format-detection" content="telephone=no">
+
+    <!-- force webkit on 360 -->
+    <meta name="renderer" content="webkit" />
+    <meta name="force-rendering" content="webkit" />
+    <!-- force edge on IE -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="msapplication-tap-highlight" content="no">
+
+    <!-- force full screen on some browser -->
+    <meta name="full-screen" content="yes" />
+    <meta name="x5-fullscreen" content="true" />
+    <meta name="360-fullscreen" content="true" />
+
+    <!-- force screen orientation on some browser -->
+    <meta name="screen-orientation" content="landscape" />
+    <meta name="x5-orientation" content="landscape">
+
+    <!--fix fireball/issues/3568 -->
+    <!--<meta name="browsermode" content="application">-->
+    <meta name="x5-page-mode" content="app">
+
+    <!--<link rel="apple-touch-icon" href=".png" />-->
+    <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->
+
+    <link rel="stylesheet" type="text/css" href="style-mobile.css" />
+    <link rel="icon" href="favicon.ico" />
+</head>
+
+<body>
+    <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
+    <div id="splash">
+        <div class="progress-bar stripes">
+            <span style="width: 0%"></span>
+        </div>
+    </div>
+
+    <script src="src/settings.js" charset="utf-8"></script>
+
+    <script src="main.js" charset="utf-8"></script>
+
+    <script type="text/javascript">
+        (function() {
+            // open web debugger console
+            if (typeof VConsole !== 'undefined') {
+                window.vConsole = new VConsole();
+            }
+
+            var debug = window._CCSettings.debug;
+            var splash = document.getElementById('splash');
+            splash.style.display = 'block';
+
+            function loadScript(moduleName, cb) {
+                function scriptLoaded() {
+                    document.body.removeChild(domScript);
+                    domScript.removeEventListener('load', scriptLoaded, false);
+                    cb && cb();
+                };
+                var domScript = document.createElement('script');
+                domScript.async = true;
+                domScript.src = moduleName;
+                domScript.addEventListener('load', scriptLoaded, false);
+                document.body.appendChild(domScript);
+            }
+
+            loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.js', function() {
+                if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
+                    loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
+                } else {
+                    window.boot();
+                }
+            });
+        })();
+    </script>
+</body>
+
+</html>

build-templates/web-mobile/main.js

@@ -0,0 +1,144 @@
+window.boot = function() {
+    var settings = window._CCSettings;
+    window._CCSettings = undefined;
+    var onProgress = null;
+
+    var RESOURCES = cc.AssetManager.BuiltinBundleName.RESOURCES;
+    var INTERNAL = cc.AssetManager.BuiltinBundleName.INTERNAL;
+    var MAIN = cc.AssetManager.BuiltinBundleName.MAIN;
+
+    function setLoadingDisplay() {
+        // Loading splash scene
+        var splash = document.getElementById('splash');
+        var progressBar = splash.querySelector('.progress-bar span');
+        onProgress = function(finish, total) {
+            var percent = 100 * finish / total;
+            if (progressBar) {
+                progressBar.style.width = percent.toFixed(2) + '%';
+            }
+        };
+        splash.style.display = 'block';
+        progressBar.style.width = '0%';
+
+        cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function() {
+            // splash.style.display = 'none';
+        });
+    }
+
+    var onStart = function() {
+
+        cc.view.enableRetina(true);
+        cc.view.resizeWithBrowserSize(true);
+
+        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_BAIDU_APP,
+                cc.sys.BROWSER_TYPE_WECHAT,
+                cc.sys.BROWSER_TYPE_MOBILE_QQ,
+                cc.sys.BROWSER_TYPE_MIUI,
+                cc.sys.BROWSER_TYPE_HUAWEI,
+                cc.sys.BROWSER_TYPE_UC,
+            ].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.assetManager.downloader.maxConcurrency = 2;
+            cc.assetManager.downloader.maxRequestsPerFrame = 2;
+        }
+
+        var launchScene = settings.launchScene;
+        var bundle = cc.assetManager.bundles.find(function(b) {
+            return b.getSceneInfo(launchScene);
+        });
+
+        bundle.loadScene(launchScene, null, onProgress,
+            function(err, scene) {
+                if (!err) {
+                    cc.director.runSceneImmediate(scene);
+                    if (cc.sys.isBrowser) {
+                        // show canvas
+                        var canvas = document.getElementById('GameCanvas');
+                        canvas.style.visibility = '';
+                        var div = document.getElementById('GameDiv');
+                        if (div) {
+                            div.style.backgroundImage = '';
+                        }
+                        console.log('Success to load scene: ' + launchScene);
+                    }
+                }
+            }
+        );
+
+    };
+
+    var option = {
+        id: 'GameCanvas',
+        debugMode: settings.debug ? cc.debug.DebugMode.INFO : cc.debug.DebugMode.ERROR,
+        showFPS: settings.debug,
+        frameRate: 60,
+        groupList: settings.groupList,
+        collisionMatrix: settings.collisionMatrix,
+    };
+
+    cc.assetManager.init({
+        bundleVers: settings.bundleVers,
+        remoteBundles: settings.remoteBundles,
+        server: settings.server
+    });
+
+    var bundleRoot = [INTERNAL];
+    settings.hasResourcesBundle && bundleRoot.push(RESOURCES);
+
+    var count = 0;
+
+    function cb(err) {
+        if (err) return console.error(err.message, err.stack);
+        count++;
+        if (count === bundleRoot.length + 1) {
+            cc.assetManager.loadBundle(MAIN, function(err) {
+                if (!err) cc.game.run(option, onStart);
+            });
+        }
+    }
+
+    cc.assetManager.loadScript(settings.jsList.map(function(x) { return 'src/' + x; }), cb);
+
+    for (var i = 0; i < bundleRoot.length; i++) {
+        cc.assetManager.loadBundle(bundleRoot[i], cb);
+    }
+};
+
+if (window.jsb) {
+    var isRuntime = (typeof loadRuntime === 'function');
+    if (isRuntime) {
+        require('src/settings.js');
+        require('src/cocos2d-runtime.js');
+        if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
+            require('src/physics.js');
+        }
+        require('jsb-adapter/engine/index.js');
+    } else {
+        require('src/settings.js');
+        require('src/cocos2d-jsb.js');
+        if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
+            require('src/physics.js');
+        }
+        require('jsb-adapter/jsb-engine.js');
+    }
+
+    cc.macro.CLEANUP_IMAGE_CACHE = true;
+    window.boot();
+}

build-templates/web-mobile/style-mobile.css

@@ -0,0 +1,127 @@
+html {
+    -ms-touch-action: none;
+}
+
+body,
+canvas,
+div {
+    display: block;
+    outline: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+
+/* Remove spin of input type number */
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+    margin: 0;
+    /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    margin: 0;
+    cursor: default;
+    color: #888;
+    background-color: #333;
+    text-align: center;
+    font-family: Helvetica, Verdana, Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    /* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 */
+    /* overflow cannot be applied in Cocos2dGameContainer, 
+  otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */
+    overflow: hidden;
+}
+
+#Cocos2dGameContainer {
+    position: absolute;
+    margin: 0;
+    left: 0px;
+    top: 0px;
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+    -webkit-box-align: center;
+    -webkit-box-pack: center;
+}
+
+canvas {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+a:link,
+a:visited {
+    color: #666;
+}
+
+a:active,
+a:hover {
+    color: #666;
+}
+
+p.header {
+    font-size: small;
+}
+
+p.footer {
+    font-size: x-small;
+}
+
+#splash {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(./splash.png) no-repeat center;
+    background-size: 100%100%;
+}
+
+.progress-bar {
+    position: absolute;
+    left: 27.5%;
+    top: 80%;
+    height: 3px;
+    padding: 2px;
+    width: 45%;
+    border-radius: 20px;
+    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
+}
+
+.progress-bar span {
+    display: block;
+    height: 100%;
+    border-radius: 10px;
+    transition: width .4s ease-in-out;
+    background-color: #3dc5de;
+}
+
+.stripes span {
+    background-size: 30px 30px;
+    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+    animation: animate-stripes 1s linear infinite;
+}
+
+@keyframes animate-stripes {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 60px 0;
+    }
+}