WeEngine模板实现

1. 模板的位置：模板位于we7安装目录下的themes/mobile目录下，如下图：

[root@xuehuar weixin]# ls
account.php  cloud.php  extension.php  install.php  member.php  mobile.php  README.md  rule.php     site.php  themes
api.php      data       index.php      install.sql  menu.php    payment     resource   setting.php  source  

[root@xuehuar themes]# ls
index.html  mobile  web

[root@xuehuar mobile]# ls
default  dstyle01  dstyle05  moban1  moban2  moban5  quick  style1  style2  vw011

 可以观察到，每一个文件夹对应了下图中的一个模板。我们这里要编辑的是dstyle01模板。

dstyle01模板包含下列文件：

index.html  manifest.xml  preview.jpg  site  slide.html  style


./site:
detail.html  list.html


./style:
mobile.css

主页对应的模板文件是index.html，这个文件很简单，它主要做了两件事：

1. 包含slide.html进来，这个文件描述的是页面最上面的滚动图片。

{template 'slide'}

2. 列出所有的主页按钮。

{loop $navs $nav}
<li class="icon-items">
  <a href="{$nav['url']}"><i style="background:url({$_W['attachurl']}{$nav['icon']}) no-repeat center center;"></i>{$nav['name']}</a>
</li>
{/loop}

这里它只是简单的把所有按钮罗列出来，罗列的顺序是按照什么来呢？看we7后台：

可以看到这里有一个排序，只需要填入数字即可，模板中就会按照这个数字顺序罗列图标。

下一个议题：为什么不同模板，显示出来的风格完全不同呢？

奥秘在于每个模板用了不同的css来描述页面风格。还是看index.html，有这么一行：

<link href="{$_W['siteroot']}/themes/mobile/dstyle01/style/mobile.css" rel="stylesheet" type="text/css" />

它告诉浏览器，在dstyle01/style目录下有一个mobile.css文件，里面就是描述模板风格的内容。如果你懂的如何修改css，可以通过定制这里的内容来修改模板风格。

@charset "utf-8";

/* HOME Botton */
.home { margin:0 auto ;min-width:300px;color: #fff;padding:0 10px;} 
.icon-items li { position: relative; float: left; width:49.0%; text-align: center; margin: 10px 0 0 0;border-radius:3px;box-sizing:border-box;
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-webkit-transform:scale(0);-webkit-animation-name:janim;-webkit-animation-duration:.3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;-web
kit-animation-direction:normal;-webkit-animation-fill-mode:forwards;}
@-webkit-keyframes janim {0%{-webkit-transform:scale(0.2)}50%{-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1)}}
.icon-items li a{display:block;width: 100%;height:70px;line-height:70px;color:#FFF;font-size:18px;}
.icon-items li a:hover{background-color: rgba(0,0,0,.1); z-index: 1;color:#FFF;}
.icon-items li a i{width:30px;height:30px;display:inline-block;vertical-align:middle;margin-right:15px;}

.icon-items li:nth-child(1){background-color:#3E67E2;-webkit-animation-delay: .15s;}
.icon-items li:nth-child(2){background-color:#678CE1;float:right;}
.icon-items li:nth-child(3){background-color:#1fa9ea;-webkit-animation-delay: .45s;}
.icon-items li:nth-child(4){background-color:#ef9310;-webkit-animation-delay: .75s;float:right;}
.icon-items li:nth-child(5){background-color:#8BCA11;-webkit-animation-delay: .6s;}
.icon-items li:nth-child(6){background-color:#7266d1;-webkit-animation-delay: .6s;float:right;}
.icon-items li:nth-child(7){background-color:#da1e0c;-webkit-animation-delay: 0.55s;}
.icon-items li:nth-child(7) a i{margin:50px 0 0 0;width:100%;clear:both;}
.icon-items li:nth-child(7) a{height:150px;line-height:40px;clear:both;}
.icon-items li:nth-child(8){background-color:#CFA871;-webkit-animation-delay: 0.3s;float:right;}
.icon-items li:nth-child(9){background-color:#FC5366;-webkit-animation-delay: 0.3.3s;float:right;}
.icon-items li:nth-child(9) a i{margin:0px;width:0px;}

比如，你希望修改按钮颜色，只需要修改这些内容即可，里面都是对颜色的描述：

.icon-items li:nth-child(1){background-color:#3E67E2;-webkit-animation-delay: .15s;}
.icon-items li:nth-child(2){background-color:#678CE1;float:right;}
.icon-items li:nth-child(3){background-color:#1fa9ea;-webkit-animation-delay: .45s;}
.icon-items li:nth-child(4){background-color:#ef9310;-webkit-animation-delay: .75s;float:right;}
.icon-items li:nth-child(5){background-color:#8BCA11;-webkit-animation-delay: .6s;}
.icon-items li:nth-child(6){background-color:#7266d1;-webkit-animation-delay: .6s;float:right;}
.icon-items li:nth-child(7){background-color:#da1e0c;-webkit-animation-delay: 0.55s;}
.icon-items li:nth-child(8){background-color:#CFA871;-webkit-animation-delay: 0.3s;float:right;}
.icon-items li:nth-child(9){background-color:#FC5366;-webkit-animation-delay: 0.3.3s;float:right;}

再比如，你希望修改第七个、第九个按钮的大小，只需要修改：

.icon-items li:nth-child(7) a i{margin:50px 0 0 0;width:100%;clear:both;}
.icon-items li:nth-child(7) a{height:150px;line-height:40px;clear:both;}
.icon-items li:nth-child(9) a i{margin:0px;width:0px;}

如果希望调整所有按钮的大小，修改：

.icon-items li { position: relative; float: left; width:49.0%; text-align: center; margin: 10px 0 0 0;border-radius:3px;box-sizing:border-box;
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-webkit-transform:scale(0);-webkit-animation-name:janim;-webkit-animation-duration:.3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;-web
kit-animation-direction:normal;-webkit-animation-fill-mode:forwards;}

总结一下

1. 调整按钮顺序？

登录we7后台-》微站功能-》微站导航图标，设置排序数字。默认是全0，改成你喜欢的从小到大的顺序。

2. 调整页面风格？

修改index.html的样式表。

3. 自己造一个模板？

新建一个目录，如mydream模板。然后里面创建一个index.html文件，以及一个manifest.xml文件。其余文件都是可选。manifest.xml文件怎么写？看看其它模板怎么写，照抄就行了。都弄好后，将mydream文件夹上传到ftp的themems/mobile目录下即可。