fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit e04a08181eeaf062971ff3343fb83d09b90ca846 2 parents 26181fcd f7c6da4d

Merge remote-tracking branch 'origin/develop' into develop

Inline Side-by-side
Showing 10 changed files with 101 additions and 72 deletions
@@ -54,13 +54,15 @@ module.exports = { @@ -54,13 +54,15 @@ module.exports = {
54 infoFile: { 54 infoFile: {
55 name: 'info', 55 name: 'info',
56 level: 'info', 56 level: 'info',
57 - filename: 'logs/info.log' 57 + filename: 'logs/info.log',
  58 + maxFiles: 7
58 }, 59 },
59 errorFile: { 60 errorFile: {
60 name: 'error', 61 name: 'error',
61 level: 'error', 62 level: 'error',
62 filename: 'logs/error.log', 63 filename: 'logs/error.log',
63 - handleExceptions: true 64 + handleExceptions: true,
  65 + maxFiles: 7
64 }, 66 },
65 udp: { // send by udp 67 udp: { // send by udp
66 level: 'debug', // logger level 68 level: 'debug', // logger level
@@ -99,7 +101,7 @@ if (isProduction) { @@ -99,7 +101,7 @@ if (isProduction) {
99 useOneapm: true, 101 useOneapm: true,
100 useCache: true, 102 useCache: true,
101 interfaceShunt: { 103 interfaceShunt: {
102 - useInterfaceShunt: true, 104 + useInterfaceShunt: false,
103 tencentServers: { 105 tencentServers: {
104 api: ['123.206.1.98', '123.206.2.80'], 106 api: ['123.206.1.98', '123.206.2.80'],
105 service: ['123.206.1.98', '123.206.2.80'] 107 service: ['123.206.1.98', '123.206.2.80']
1 -/**  
2 - * 内容码配置文件  
3 - * @author: 赵彪<bill.zhao@yoho.cn>  
4 - * @date: 2016/06/23  
5 - */  
6 -  
7 -'use strict';  
8 -  
9 -const channel = {  
10 - men: '9ee58aadd9559d07207fe4a98843eaac',  
11 - women: '3ad8826fc89fb0d023a4cd06a6991219',  
12 - lifestyle: 'aa8d34c85934c2ccc16e2babd3eb5e47'  
13 -};  
14 -  
15 -const brand = {  
16 - men: '9ee58aadd9559d07207fe4a98843eaac',  
17 - women: 'aa8d34c85934c2ccc16e2babd3eb5e47',  
18 - lifestyle: '3ad8826fc89fb0d023a4cd06a6991219'  
19 -};  
20 -  
21 -const cate = {  
22 - men: '9ee58aadd9559d07207fe4a98843eaac',  
23 - women: 'aa8d34c85934c2ccc16e2babd3eb5e47',  
24 - lifestyle: '3ad8826fc89fb0d023a4cd06a6991219'  
25 -};  
26 -  
27 -module.exports = {  
28 - channel,  
29 - brand,  
30 - cate  
31 -};  
  1 +# blk-wap项目中的一些注意点
  2 +
  3 +## 框架结构
  4 +首先，我们先说一下blk-wap项目的架构，这样便于后面的人能够快速上手
  5 +
  6 +1. 服务端：node的express框架
  7 +2. ui端：vue + gulp + webpack
  8 +
  9 +## 目录结构
  10 +
  11 +apps: node服务端业务代码
  12 +
  13 +config: 配置信息
  14 +
  15 +doraemon：express中全局的一些中间件，以及views目录下的一些模版文件
  16 +
  17 +public: 前段ui代码（css，js，vue等）以及打包工具（gulp，webpack）
  18 +
  19 +utils：辅助工具方法
  20 +
  21 +app.js: node服务入口文件
  22 +
  23 +dispatch.js :路由分发文件
  24 +
  25 +## vue
  26 +
  27 +关于vue部分，如果不熟悉的话，大家可以查看一下官方文档
  28 +http://cn.vuejs.org/guide/
  29 +
  30 +这里面主要是组件方面知识，用的比较多。
  31 +
  32 +## 与app端的交互
  33 +混合模式下，比较麻烦的地方是与app原生端的交互。因为有些业务处理需要app端配合处理。
  34 +
  35 +1.
  36 +涉及到与app端跳转相关的逻辑可参看：public/js/common/intercept-click.js文件
  37 +具体规则可参看：http://git.yoho.cn/mobile/AppJSBridge/tree/master
  38 +
  39 +2.
  40 +监听app端事件参看：public/js/common/vue-bus.js文件，是通过一个全局的vue实例的on及emit来处理的。
  41 +
  42 +## h5页面刷新
  43 +
  44 +目前页面跳转时。有些场合下需要刷新页面，由于刷新的逻辑在每个页面都不同，所以app端很难来处理。没办法，只能由h5这边来做了。
  45 +
  46 +那h5这边是怎么拿到前一个页面的状态，来判定本页面是否需要刷新呢？
  47 +我们目前的做法是通过localstroage来处理的，也就是yoho.js中的 store属性。
  48 +如果，你有更好的想法，欢迎提出来。
  49 +
  50 +
  51 +
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 6
7 const channel = { 7 const channel = {
8 men: '9ee58aadd9559d07207fe4a98843eaac', 8 men: '9ee58aadd9559d07207fe4a98843eaac',
9 - women: 'aa8d34c85934c2ccc16e2babd3eb5e47',  
10 - lifestyle: '3ad8826fc89fb0d023a4cd06a6991219' 9 + women: '3ad8826fc89fb0d023a4cd06a6991219',
  10 + lifestyle: 'aa8d34c85934c2ccc16e2babd3eb5e47'
11 }; 11 };
12 12
13 /* 品牌一览资源位 */ 13 /* 品牌一览资源位 */
@@ -13,23 +13,15 @@ @@ -13,23 +13,15 @@
13 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 13 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
14 } 14 }
15 15
16 -html {  
17 - height: 100%;  
18 - width: 100%;  
19 - overflow: hidden;  
20 -  
21 - body {  
22 - width: 100%;  
23 - height: 100%;  
24 - overflow-y: scroll;  
25 - font-size: 24px;  
26 - font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;  
27 - line-height: 1.4;  
28 - } 16 +html,
  17 +body {
  18 + font-size: 24px;
  19 + font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
  20 + line-height: 1.4;
29 } 21 }
30 22
31 /* stylelint-disable */ 23 /* stylelint-disable */
32 -.app::-webkit-scrollbar { 24 +::-webkit-scrollbar {
33 display: none; 25 display: none;
34 } 26 }
35 /* stylelint-enable */ 27 /* stylelint-enable */
@@ -97,7 +89,7 @@ ul { @@ -97,7 +89,7 @@ ul {
97 } 89 }
98 90
99 img[lazy] { 91 img[lazy] {
100 - transition: all 200ms; 92 + transition: all 100ms;
101 } 93 }
102 94
103 img[lazy=loading] { 95 img[lazy=loading] {
@@ -17,6 +17,10 @@ @@ -17,6 +17,10 @@
17 17
18 .resources { 18 .resources {
19 margin-top: 100px; 19 margin-top: 100px;
  20 +
  21 + .recommend-content-five a {
  22 + height: 186px;
  23 + }
20 } 24 }
21 </style> 25 </style>
22 <script> 26 <script>
@@ -7,7 +7,8 @@ @@ -7,7 +7,8 @@
7 </div> 7 </div>
8 </template> 8 </template>
9 <a class="item ellipsis" href="{{item.sortUrl}}"> 9 <a class="item ellipsis" href="{{item.sortUrl}}">
10 - {{(item.sortNameEn || '').trim()}}{{item.sortName}} 10 + <span class="en">{{(item.sortNameEn || '').trim()}}</span>
  11 + <span class="cn">{{item.sortName}}</span>
11 </a> 12 </a>
12 </template> 13 </template>
13 </div> 14 </div>
@@ -54,6 +55,7 @@ @@ -54,6 +55,7 @@
54 left: 0; 55 left: 0;
55 overflow-x: hidden; 56 overflow-x: hidden;
56 overflow-y: auto; 57 overflow-y: auto;
  58 + background: #f6f6f6;
57 } 59 }
58 60
59 .sidebar { 61 .sidebar {
@@ -65,11 +67,20 @@ @@ -65,11 +67,20 @@
65 padding: 0 30px; 67 padding: 0 30px;
66 height: 124px; 68 height: 124px;
67 line-height: 124px; 69 line-height: 124px;
68 - font-size: 36px; 70 + font-size: 30px;
69 font-weight: bold; 71 font-weight: bold;
70 font-family: "BrownStd-Bold", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial; 72 font-family: "BrownStd-Bold", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
71 73
  74 + .en {
  75 + font-size: 36px;
  76 + }
  77 +
  78 + .cn {
  79 + margin-left: -6px;
  80 + }
  81 +
72 &:first-child { 82 &:first-child {
  83 + font-size: 36px;
73 height: 142px; 84 height: 142px;
74 line-height: 142px; 85 line-height: 142px;
75 font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial; 86 font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
@@ -85,8 +96,12 @@ @@ -85,8 +96,12 @@
85 border-bottom: 1px solid #eee; 96 border-bottom: 1px solid #eee;
86 } 97 }
87 98
88 - &:last-child:after {  
89 - content: none; 99 + &:last-child {
  100 + border-bottom: 1px solid #eee;
  101 +
  102 + &:after {
  103 + content: none;
  104 + }
90 } 105 }
91 } 106 }
92 107
@@ -99,6 +114,7 @@ @@ -99,6 +114,7 @@
99 border-bottom: 1px solid #eee; 114 border-bottom: 1px solid #eee;
100 115
101 & + .item { 116 & + .item {
  117 + font-size: 36px;
102 height: 142px; 118 height: 142px;
103 line-height: 142px; 119 line-height: 142px;
104 font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial; 120 font-family: "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
@@ -140,16 +140,14 @@ @@ -140,16 +140,14 @@
140 let ghost2 = false; 140 let ghost2 = false;
141 let ghost3 = false; 141 let ghost3 = false;
142 142
143 - let myHeaderTop = $('.my-header').offset().top;  
144 -  
145 - if (myHeaderTop < -40) { 143 + if (window.scrollY > 40) {
146 ghost = false; 144 ghost = false;
147 ghost2 = false; 145 ghost2 = false;
148 ghost3 = false; 146 ghost3 = false;
149 - } else if (myHeaderTop < -25) { 147 + } else if (window.scrollY > 25) {
150 ghost = false; 148 ghost = false;
151 ghost3 = true; 149 ghost3 = true;
152 - } else if (myHeaderTop < -10) { 150 + } else if (window.scrollY > 10) {
153 ghost = false; 151 ghost = false;
154 ghost2 = true; 152 ghost2 = true;
155 } 153 }
@@ -167,17 +165,15 @@ @@ -167,17 +165,15 @@
167 return false; 165 return false;
168 }); 166 });
169 167
170 - let body = $('body');  
171 -  
172 - body.on('touchmove', () => { 168 + window.addEventListener('touchmove', () => {
173 this.toggle(); 169 this.toggle();
174 }); 170 });
175 171
176 - body.on('scroll', () => { 172 + window.addEventListener('scroll', () => {
177 this.toggle(); 173 this.toggle();
178 }); 174 });
179 175
180 - body.on('visibilitychange', () => { 176 + document.addEventListener('visibilitychange', () => {
181 if (!document.hidden) { 177 if (!document.hidden) {
182 this.reload(); 178 this.reload();
183 } 179 }
@@ -19,7 +19,6 @@ @@ -19,7 +19,6 @@
19 <script> 19 <script>
20 const yoho = require('yoho'); 20 const yoho = require('yoho');
21 const cheader = require('component/header.vue'); 21 const cheader = require('component/header.vue');
22 - const $ = require('jquery');  
23 22
24 module.exports = { 23 module.exports = {
25 data() { 24 data() {
@@ -46,15 +45,15 @@ @@ -46,15 +45,15 @@
46 }, 45 },
47 46
48 created() { 47 created() {
49 - $('body').on('scroll', () => { 48 + window.onscroll = () => {
50 let transparent = true; 49 let transparent = true;
51 50
52 - if ($('.image-carousel').offset().top < -20) { 51 + if (window.scrollY > 20) {
53 transparent = false; 52 transparent = false;
54 } 53 }
55 54
56 this.$refs.header.$el.classList.toggle('ghost', transparent); 55 this.$refs.header.$el.classList.toggle('ghost', transparent);
57 - }); 56 + };
58 } 57 }
59 }; 58 };
60 </script> 59 </script>
@@ -86,9 +86,9 @@ @@ -86,9 +86,9 @@
86 }, 86 },
87 changeTopStatus() { 87 changeTopStatus() {
88 let topChange = true; 88 let topChange = true;
89 - let topHeight = $('.brand-top-box').offset().top; 89 + let topHeight = document.body.scrollTop;
90 90
91 - if (topHeight < -200) { 91 + if (topHeight > 100) {
92 topChange = false; 92 topChange = false;
93 } 93 }
94 94
@@ -99,7 +99,7 @@ @@ -99,7 +99,7 @@
99 this.domain = this.shareData.domain; 99 this.domain = this.shareData.domain;
100 100
101 if (this.shareData.isBlkShop) { 101 if (this.shareData.isBlkShop) {
102 - $('body').on('scroll', this.changeTopStatus); 102 + window.onscroll = this.changeTopStatus;
103 } 103 }
104 } 104 }
105 }; 105 };