bug修复及支持使用viewport方式缩放 #1

xingqiao · Oct 3, 2019 · 65991a2 · 65991a2
1 parent 0359938
commit 65991a2
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 57 deletions.
diff --git a/clayout-electron.7z b/clayout-electron.7z
diff --git a/layout.html b/layout.html
@@ -45,14 +45,19 @@ <h3>参数设置</h3>
                             <div><label title="页面铺面全屏，并根据屏幕尺寸进行缩放"><input type="radio" class="js_setting" name="type" data-name="type" value="0" checked>H5</label></div>
                             <div><label title="页面居中展示，两旁留白支持设置背景图和背景色"><input type="radio" class="js_setting" name="type" data-name="type" value="1">PC</label></div>
                         </div>
+                        <div class="js_item" data-part="0">
+                            <label>缩放类型</label>
+                            <label><input type="radio" class="js_setting" name="zoomType" data-name="zoomType" value="0" checked>zoom</label>
+                            <label><input type="radio" class="js_setting" name="zoomType" data-name="zoomType" value="1">viewport</label>
+                        </div>
                         <div class="js_item" data-part="0">
                             <label>页面宽度</label>
                             <input type="number" class="js_setting" data-name="size" min="320" max="960" step="1" value="640"> px
                             <input type="range" class="js_setting" data-name="size" min="320" max="960" step="1" value="640">
                         </div>
                         <div class="js_item" data-part="1">
                             <label>背景色</label>
-                            <input type="text" class="js_setting" data-name="bgcolor" value="#ffffff" title="不设置或指无效时为白色">
+                            <input type="text" class="js_setting" data-name="bgcolor" value="" placeholder="默认根据背景图自动获取">
                         </div>
                         <div class="js_item" data-part="1">
                             <label>背景图</label>

diff --git a/main.js b/main.js
@@ -29,7 +29,7 @@ app.on("ready", function () {
         width: 1200,
         height: 1000,
         webPreferences: {
-            // nodeIntegration: false   // 在渲染进程中禁用Nodejs环境
+            nodeIntegration: true   // 在渲染进程中禁用Nodejs环境
         }
     });
 
@@ -58,7 +58,7 @@ app.on("ready", function () {
 
     utils.is_win = /win/i.test(os.platform());
 
-// 类型判断
+    //#region 类型判断
     Array.prototype.forEach.call(["Object", "Function", "String", "Number", "Boolean", "Date", "Undefined", "Null", "Array", "File", "RegExp"], function(t, i) {
         utils["is" + t] = function(obj) {
             return Object.prototype.toString.call(obj) === "[object " + t + "]";
@@ -86,8 +86,9 @@ app.on("ready", function () {
         }
         return false;
     };
+    //#endregion
 
-// 执行系统命令
+    //#region 执行系统命令
 
     /**
      * 执行系统命令
@@ -140,7 +141,9 @@ app.on("ready", function () {
         }, cb);
     };
 
-// 文件操作
+    //#endregion
+
+    //#region 文件操作
 
     /**
      * 复制文件
@@ -254,7 +257,9 @@ app.on("ready", function () {
         });
     };
 
-// 流程控制
+    //#endregion
+
+    //#region 流程控制
 
     /**
      * 串行流程控制，类似async.js
@@ -338,7 +343,9 @@ app.on("ready", function () {
         _iterator(0);
     };
 
-// 其他
+    //#endregion
+
+    //#region 其他
 
     /**
      * 过滤
@@ -385,6 +392,8 @@ app.on("ready", function () {
         });
     };
 
+    //#endregion
+
     return utils;
 })("utils");
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "layout",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "main.js",
   "scripts": {
     "start": "electron ."

diff --git a/style.css b/style.css
@@ -63,4 +63,4 @@ details>div{margin-left:1.5em}
 .result th{font-weight:500;font-size:1.5em;line-height:2em}
 .result td{line-height:1.6em}
 .result img{display:block;margin:2px auto;max-width:200px;max-height:100px}
-.result_export{display:inline-block;margin-left:1em;padding:5px 15px;border:2px solid #f00;font-size:1.2em;color:#fff;background:#f00;vertical-align:middle;}
+.result_export{display:inline-block;margin-left:1em;margin-top:3em;padding:5px 15px;border:2px solid #f00;font-size:1.2em;color:#fff;background:#f00;vertical-align:middle;}
diff --git a/template.html b/template.html
@@ -1,18 +1,5 @@
 <!DOCTYPE html>
 <html lang="zh-cn">
-<head>
-<meta charset="utf-8">
-<title>自动切图DEMO</title>
-<% if (data.type != 1) { %>
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
-<% } %>
-<meta name="format-detection" content="telephone=no">
-<meta http-equiv="Content-Language" content="zh-cn" />
-<meta name="author" content="Tencent-ISUX-Music" />
-<meta name="Copyright" content="Tencent" />
-<meta name="description" content="QQ音乐" />
-<meta name="keywords" content="QQ音乐" />
-<meta name="applicable-device" content="mobile">
 <%#
     模板数据
     data = {
@@ -97,30 +84,30 @@
     var opts = data.opts || {};
     var pageWidth = data.width || 384;
     var css = [];
-    css.push("body,.bgwrap{width:100%;margin:0;background-color:" + data.backgroundColor + "}");
-    css.push(".bglist{width:" + pageWidth + "px}");
-    css.push(".bgimg{position:absolute;background-repeat:no-repeat}");
+    css.push(`html,body,.bgwrap{width:100%;margin:0;background-color:${data.backgroundColor}}`);
+    css.push(`.bglist{width:${pageWidth}px}`);
+    css.push('.bgimg{position:absolute;background-repeat:no-repeat}');
     if (data.list && data.list.forEach) {
-        data.list.forEach(function(item){
+        data.list.forEach(function(item) {
             css.push(
-                ".bg-" + item.index + "{"
-                    + "width:" + item.width + "px;"
-                    + "height:" + item.height + "px;"
-                    + "left:" + (item.left || 0) + "px;"
-                    + "top:" + (item.top || 0) + "px;"
-                    + "background-image:url(" + item.data.src + ");"
-                + "}"
+                `.bg-${item.index}{` +
+                    `width:${item.width}px;` +
+                    `height:${item.height}px;` +
+                    `left:${item.left || 0}px;` +
+                    `top:${item.top || 0}px;` +
+                    `background-image:url(${item.data.src});` +
+                '}'
             );
             if (item.list && item.list.forEach) {
-                item.list.forEach(function(sub, subIndex){
+                item.list.forEach(function(sub, subIndex) {
                     css.push(
-                        ".bg-" + item.index + "-" + subIndex + "{"
-                            + "width:" + sub.width + "px;"
-                            + "height:" + sub.height + "px;"
-                            + "left:" + sub.originalLeft + "px;"
-                            + "top:" + sub.originalTop + "px;"
-                            + "background-position:-" + (sub.left || 0) + "px -" + (sub.top || 0) + "px"
-                        + "}"
+                        `.bg-${item.index}-${subIndex}{` +
+                            `width:${sub.width}px;` +
+                            `height:${sub.height}px;` +
+                            `left:${sub.originalLeft}px;` +
+                            `top:${sub.originalTop}px;` +
+                            `background-position:-${sub.left || 0}px -${sub.top || 0}px;` +
+                        '}'
                     );
                 });
             }
@@ -130,48 +117,77 @@
             var w = i * 320;
             if (data.width > w) {
                 var _sub = [];
-                data.list.forEach(function(item){
+                data.list.forEach(function(item) {
                     if (item.data[w]) {
-                        _sub.push(".bg-" + item.index + "{background-image:url(" + item.data[w] + ")}");
+                        _sub.push(`.bg-${item.index}{background-image:url(${item.data[w]})}`);
                     }
                 });
                 if (_sub.length) {
-                    css.push("@media (max-width: " + w + "px) {" + _sub.join("") + "}");
+                    css.push(`@media (max-width: ${w}px) {${_sub.join('')}}`);
                 }
             }
         }
     }
     var bgDom;
     if (data.type == 1) {
-        css.push(".bgwrap{position:relative;width:" + pageWidth + "px;margin:0 auto}");
+        css.push(`.bgwrap{position:relative;width:${pageWidth}px;margin:0 auto}`);
         var bgimg = data.backgroundImage || {};
-        var bgtype = parseInt(data.opts && data.opts.bgtype || 0);
+        var bgtype = parseInt((data.opts && data.opts.bgtype) || 0);
         var background = [];
         if (bgimg.data && bgimg.data.src) {
-            background.push("background:url(" + bgimg.data.src + ") no-repeat 50% 0");
+            background.push(`background:url(${bgimg.data.src}) no-repeat 50% 0`);
         }
         if (bgtype & 1) {
             bgDom = 1;
         }
         if (bgtype & 2) {
-            background.push("background-repeat-y:repeat");
+            background.push('background-repeat-y:repeat');
         }
         if (bgtype & 3) {
-            background.push("background-size:cover");
+            background.push('background-size:cover');
         }
         if (opts.bgcolor) {
-            background.push("background-color:" + opts.bgcolor);
+            background.push(`background-color:${opts.bgcolor}`);
         }
         if (background.length) {
-            css.push((bgDom ? ".bgcover" : "body") + "{" + background.join(";") + "}");
+            css.push(`${bgDom ? '.bgcover' : 'body'}{${background.join(';')}}`);
             if (bgDom) {
-                css.push(".bgcover{position:fixed;top:0;bottom:0;left:0;right:0}");
+                css.push('.bgcover{position:fixed;top:0;bottom:0;left:0;right:0}');
             }
         }
     } else {
-        css.push(".bglist{transform-origin:0 0}");
+        css.push('.bglist{transform-origin:0 0}');
     }
 %>
+<head>
+<meta charset="utf-8">
+<title>自动切图DEMO</title>
+<% if (data.type != 1) { %>
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
+<% if (opts.zoomType == 1) { %>
+<script>
+    ;(function(){
+        var width = <%- pageWidth %>, s = 1;
+        var viewport = document.querySelector('meta[name="viewport"]');
+        function update() {
+            var ts = window.innerWidth * s / width;
+            if (s !== ts) {
+                viewport.setAttribute('content', 'width=device-width,initial-scale=' + (s = ts) + ',maximum-scale=1,user-scalable=0');
+            }
+        }
+        window.addEventListener('resize', update);
+        update();
+    })();
+</script>
+<% } %>
+<% } %>
+<meta name="format-detection" content="telephone=no">
+<meta http-equiv="Content-Language" content="zh-cn" />
+<meta name="author" content="Tencent-ISUX-Music" />
+<meta name="Copyright" content="Tencent" />
+<meta name="description" content="QQ音乐" />
+<meta name="keywords" content="QQ音乐" />
+<meta name="applicable-device" content="mobile">
 <style>
 <%- css.join("\n") %>
 </style>
@@ -200,7 +216,7 @@
     </div>
 </div>
 
-<% if (data.type != 1) { %>
+<% if (data.type != 1 && opts.zoomType != 1) { %>
 <!--自动调节背景缩放-->
 <script>
     ;(function(){
@@ -219,9 +235,7 @@
         }
         window.addEventListener("resize", function(){
             s = window.innerWidth / width;
-            if (s != 1) {
-                bglist.style.zoom = s;
-            }
+            bglist.style.zoom = s;
         });
     })();
 </script>