微网站开发规范

• 整体框架布局

• JavaScript书写规范

• CSS书写规范

---

• 整体框架布局

  • 采用seajs实现JavaScript的模块化开发及加载机制，编写时请按前端基本开发规范编写。
  • 主要的css文件为common.css，common.css文件里又import了aui.2.0.css和form.css。form.css主要是针对表单样式。

@import "../plugin/aui/css/aui.2.0.css";
@import "../css/form.css";

• common.js和util.js分别为公用的脚本和工具
  • common.js具体实现了登陆（包括普通登陆和微信登陆）、异步加载、处理用户权限等；
  • util.js具体实现了一些常用的工具方法，包括读取localStorage、判断是否微信浏览器、日志打印等方法，其他方法后续将进一步完善。

require('../plugin/fastclick');// 加载fastclick模块，去掉ios300ms延时  
 require('../plugin/zepto');// zepto
require('../plugin/doT.min');// 模板引擎
require('../plugin/aui/js/aui-dialog');// auidialog,主要用于弹出提示
window.util = require('util')// 工具，引入common.js即可引入util，因此无需同时引入两个脚本

• JavaScript书写规范

  • seajs使用

var dialog,hdId;//声明
window.seajs && seajs.config({
    base: "../../script/"
}).use([
'common',
 '../../plugin/mui/js/mui',
 'img-text'
], function (common) { //此处只有common是按照CMD规范编写的，其他两个引入进来即可
    function xxx(){
      //do someting
    }
    var dialog = new auiDialog({});
    var hdId = util.getParameter('hdId');
    xxx();
})

• 命名
  zepto对象请使用$打头，例如$my代表的是zepto的对象，my代表的是原生的对象

• 下拉刷新和上划加载
  现微网站中的上拉和下划都统一用mui，具体调用方式请参考hd_detail.html。
• 关于微信分享
  在微信浏览器下，众所周知是右上角的三个点是可以分享当前页面的，但是普通的没有经过处理的页面分享出去是没有图片和描述的，这给用户的体验是非常不好的。所以，每个页面都应该加上微信的分享，具体使用方式如下：

window.seajs && seajs.config({   
 base: "../../script/"
}).use(['common','wx-share'], function (common,wxShare) {
wxShare.init(标题,描述,分享链接（为空则默认当前链接）,图片路径（注意不要有中文，ios看不到）);
})

• 关于事件绑定
  因为我们必须再sea.use里写脚本才能使用通过sea引入的模块，因此所有的脚本建议都写在use方法里，但是这会导致页面的onclick事件访问不到sea.use里的方法，因此统一把事件的绑定写在sea.use里，用$('#id').click(function(e){})来代替页面直接onclick。

• CSS书写规范

  • 中心思想是
    使用样式能完成的事就不要用脚本！
  • 页面样式引入
    现在的微网站页面样式都只有一个，例如community_main.html里是这样的：

<!--不规范的写法-->
<link rel="stylesheet" type="text/css" href="../../css/community/community_main.css">
<link rel="stylesheet" href="../../css/index.css">
<!--正确的写法-->
<link rel="stylesheet" type="text/css" href="../../css/community/community_main.css">
//在community_main.css里
@import "../common.css";
@import "../slider.css";
@import "../index.css";

• 每一张图都应有一张默认图片，防止图片加载不出时能给用户良好的交互效果，建议图片显示的地方使用background-image，因为背景图的平铺能防止图片变形，例如用户的头像显示样式为：

.avater-big {    
  width: 4rem;   
  height: 4rem;  
  display: inline-block;  
  background-size: cover;  
  background-repeat: no-repeat;  
  background-position: center;  
  border-radius: 50%;  
  position: relative;  
  border: #fff 0.1rem solid;
}

那么在页面你可以这样写：

<div class="avater-middle"  style="background-image: url(用户头像),url(默认头像);"></div>

• 书写样式时请尽量使用aui里的样式，切勿书写行内样式，例如普通的字体调整可使用aui-font-size-12等样式修改：

.aui-font-size-12 {   font-size: 0.6rem !important;}
.aui-font-size-14 {   font-size: 0.7rem !important;}
.aui-font-size-16 {   font-size: 0.8rem !important;}
.aui-font-size-18 {   font-size: 0.9rem !important;}
.aui-font-size-20 {   font-size: 1rem !important;}

• 关于小图标（iconfont）
  其实就是一种字体，详情请戳这里。现在系统中引入了300+个图标，遇到合适的场景，就痛快地用吧。

iconfont图标

<span class="txz-iconfont txz-icon-share"></span>