@hotjp 2017-08-15T09:44:50.000000Z 字数 13621 阅读 5416

Doc

文档

[注]此文档为最新版文档，旧版文档地址

框架中用到的资源

artTemplate
mui
AmazeUI
est
插件：
日历 Simple-Calendar
倒计时 DownCount
二维码相关 qrcode
html2canvas
表单验证 validator
时间处理 momentjs
PC插件：
分页 createPage
放大镜 Magnifier
懒加载 jquery_lazyload
滑动验证 slideunlock
瀑布流 Masonry
图片上传 WebUploader
微信插件：
图片上传 uploadImg
滑动验证 sliderUnlock

通用部分

模板引擎

使用artTemplate-3.0，原生语法版本，文档地址

CSS部分

1. less

使用less，工具库使用百度提供的est,编译less需输出map文件。
在less中定义了一些基本色，字体用5种黑色，

@gray-darker: lighten(#000, 17%);  // #2b2b2b
@gray-dark: lighten(#000, 20%);      // #333
@gray: lighten(#000, 40%);         // #666
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee

主色调

@c-main: #4680d1;  // 主色调
@c-main-light: #7ca9ea;  // 浅主色调

状态色

@c-success: #56d146; // 成功
@c-info: #4680d1; // 信息  default和主色调相同
@c-warn: #f49127; // 警告
@c-error: #df3a3a; // 错误

价格颜色

@c-price: #ff5454;

icon颜色

@c-icon: #ffaa06;

2. 基本工具类

微信端的工具类更多些，可去样式表头部查看

.l{
    float: left;
}
.r{
    float: right;
}
.fix{
    *zoom: 1;
    *clear: both;
}
.fix:before, .fix:after {
    display: table;
    clear: both;
    content: '';
}
.pr{
    position: relative;
}
.hide{
    display: none;
}

3. 图标

除了前端框架的图标外，没有新引入的图标库，项目中用到的图标需切图完成。

JS部分

1. common中的公用方法

1.1 全局变量 `page`

定义了一个全局变量page作为页面数据命名空间，在其中存放页面中需要用到的变量，减少全局变量的污染。

page.url 对URL的操作

location.href = "http://192.168.50.114:8083/m/ec/goods/index.html?id=1"
// 返回完整url
page.url.url // http://192.168.50.114:8083/m/ec/goods/index.html?id=1
// 返回url参数
page.url.paras //  {id: "1"}
// 返回不包含参数的url
page.url.pathname //  http://192.168.50.114:8083/m/ec/goods/index.html
// 取URL参数
page.url.get('id')  // 1
// 设置URL参数
page.url.set({'kw':'abc'})  // http://192.168.50.114:8083/m/ec/goods/index.html?id=1&kw=abc
// 重构url
page.url.build() 
// 移除url参数
page.url.remove('id') // http://192.168.50.114:8083/m/ec/goods/index.html?kw=abc

page.page 页码默认0，应在success里做自增操作

page.pageSize 每页显示个数，默认10

1.2 `getJson(url,param,success,error)`

异步json获取

/**
 * 异步json获取
 * @param {String} url 接口地址
 * @param {Object} param 发送数据
 * @param {Function} [success] 成功回调
 * @param {Function} [error] 错误回调
 */
getJson('/ec/goods/doFindGoods.do', {
    goodsId: 129
}, function (res) {
  if(!res.success){
    mui.toast(res.errorMessage);
    setTimeout(function(){
      mui.back();
    },1000);
  }
})

1.3 `getWidgetData(widgetName,type,success,error)`

根据组件名称返回数据
[注] getWidgetData的接口地址为/comm/widget/doSearchWidgetData.do，部分组件的接口地址不是这个地址，可自行封装。

/**
 * @param widgetName 组件中文名
 * @param type 组件数据类型
 * @param {Function} [success] 成功回调函数（返回data）
 * @param {Function} [error] 出错回调
*/
getWidgetData('PC-首页顶部轮播下方多图广告位',2, function (res) {
    var data = {
    vars: vars,
    xData: res.data.widgetData
    };
    renderTmp('#topSilderad', 'topSilderadTpl', data);
    lazyLoad.refresh(true);
});

1.4 `renderTmp(selector,tmpId,data,callback)`

渲染模板，追加数据,传入callback时返回原生dom+html，不做数据追加处理,需手动追加。使用方式：

/**
 * @param {String} selector 原生选择器，只处理第一个元素
 * @param {String} tmpId 模板id，不需要加 #
 * @param {JSON} data 后台返回的json数据
 * @param {Function} [callback] 回调函数
 */
 renderTmp('#topSilderad', 'topSilderadTpl', data);

或者：

 renderTmp('#topSilderad', 'topSilderadTpl', data，function(el,html){
    el.innerHTML += Tpl;
    if(el.className.indexOf('show') < 0){
        el.className += ' show';
    }
 });

1.5 `toNewPage(href,cantBack)`

处理页面跳转，

/**
 * @param {String} href 要跳转的URL
 * @param {Boolean} [cantBack] true 是否禁止页面返回，替换url,默认false，为true时禁止页面返回
 */
toNewPage('http://www.baidu.com',true);

1.6 Cookie操作

cookie.set(key, val, dur)
key 键 ,val 值 ,dur过期时间(毫秒)
cookie.get(key）

cookie.set('name','Bob',10000);
cookie.get('name');

1.7 localStorage操作

使用前先判断浏览器支持情况
local.set(key,val,dur); key 键,val 值,dur过期时间（小时）
local.get(key);

local.set('name','Bob',24);
local.get('name');

1.8 `imgFormat(url,format,[isZip],[notForImg])`

图片格式化集成错误图片替换，返回一个拼接好的URL
，输出时不转义输出，artTemplate需要加#，使用方式：

/**
*@param {String} url 图片路径， 
* @param {String}format 后台拦截器裁剪尺寸 
*@param {Boolean} isZip 是否使用压缩（否的话原图输出），
*@param {Boolean} notForImg只返回路径，不拼接img标签需要的onerror
*/
<img src="<%=#imgFormat(xData[i], '750x750.png',false)%>">

1.9 `dateFormat(date, format)`

格式化时间

/**
*@param {String} date 时间 格式为"2017-05-25 00:00:00"或"2017/05/25 00:00:00"
*@param {String} format格式 'y'年， 'M'月份， 'd'日， 'h'小时，  'm'分， 's'秒 , 'q'季度 , 'S'毫秒
*/
dateFormat("2017-05-25 00:00:00",'yyyy-MM-dd hh:mm:ss')

1.10 `moneyFormat(num, [format])`

格式化金额，每一个设置价格的地方都必须要使用moneyFormat

/**
 * @param num  金额
 * @param [format]  需保留的小数，不设置时原样输出
 */
moneyFormat(3000,2)   //  "3,000.00"

1.11 `Base64`加密解密

toUri(str) 加密
fromUri(str) 解密

toUri(339)   //  "MzM5"
fromUri("MzM5")   //  "339"

1.12 `checkLogin(toLogin,callback)` 判断是否登录

/**
 * 判断登录
 * @param toLogin    如果未登录，是否进入登录页面,默认false
 * @param callback   如果是已登录状态时的回调函数
 */
checkLogin(function(){
    alert('已登录才执行')
})

1.13 `rmoney(s)` 价格转换浮点型把moneyFormat格式化后的金额转成number类型

rmoney('20,100') // 20100

1.14 `autoGrow(selector)`

textarea内容超出自动扩展,不会出现滚动条

1.15 `定位`

若为微信端，可使用微信定位，moClient='wx'即可，否则使用百度定位

var moClient = $('#moClient').val();
jsLocation(moClient, function (city) {
    $('#userAddr').html(city);
});

1.16 `vars` 定义路径

var vars = {
    root: "${vars.root}",       // 根目录
    clientRoot: "${vars.clientRoot}", //根目录或根目录\m，包含root
    uploadRoot: "${vars.uploadRoot}", //图片上传路径
    resourceFolder:"${vars.resourceFolder}",   // 资源路径  \resources 
    theme: {
        id: "${vars.theme.id}",     //模板id  emall-> default
        root: "${vars.theme.root}" //资源路径  \resources 
    }
};

使用方式：

<a href="<%=vars.clientRoot%>/ex/goods/index.html"></a>
<link href="${vars.theme.root}/resources/css/mui.picker.css" rel="stylesheet"/>

2. 插件

2.1 `日历插件` Simple-Calendar

无依赖，只有js和css文件。配置项众多，添加标记的话需要设置option.showMark和mark两项，实例化后追加标记需要调用addmark和updateMark方法。

<div id='container'></div>
<script>
var options = {
      width: '500px',
      height: '500px',
      language: 'CH', //语言
      showLunarCalendar: true, //阴历
      showHoliday: true, //休假
      showFestival: true, //节日
      showLunarFestival: true, //农历节日
      showSolarTerm: true, //节气
      showMark: true, //标记
      timeRange: {
        startYear: 1900,
        endYear: 2049
      },
      mark: {
        '2016-5-5': '上学'
      },
      theme: { //主题颜色
        changeAble: false,
        weeks: {
          backgroundColor: '#FBEC9C',
          fontColor: '#4A4A4A',
          fontSize: '20px',
        },
        days: {
          backgroundColor: '#ffffff',
          fontColor: '#565555',
          fontSize: '24px'
        },
        todaycolor: 'orange',
        activeSelectColor: 'orange',
      }
    }
    var myCalendar = new SimpleCalendar('#container',options);
</script>

2.2 `倒计时插件` DownCount

可从天开始，因需要传入服务器时间，在原来插件基础上做了修改：

<p class="countdown">
    <span class="hours">00</span>时
    <span class="minutes">00</span>分
    <span class="seconds">00</span>秒
</p>
<!--span上的class为必须-->
<script>
    $('.countdown').downCount({
        date: date,   //结束时间
        offset: +8,   //时区
        now_date: now_date    //开始时间、服务器时间
    }, function () {
        // 倒计时执行完回调函数
    });
</script>

2.3 `二维码生成`

依赖qrcode.js （实现二维码数据计算的核心类）
和jquery.qrcode.js（把qrcode用jquery方式封装起来的，用它来实现图形渲染，支持canvas和table两种方式），使用方式：

$('#output').qrcode('http://www.jerei.com')

2.4 `html2canvas`

html2canvas html转成图片因直接截图不清晰，所以在源码基础上做了调整，传参时宽高要乘2，html里的图片不要用百分比设置宽高，否则会缩小变形。

var ct = $('.mui-content');
var width = ct.width();
var height = ct.height();
html2canvas(ct, {
    timeout: 300,
    width: width * 2,
    height: height * 2,
    onrendered: function (canvas) {
    // 回调
    }
});

2.5 `表单验证`

一开始手写验证，随后引入validator.js,支持字符串验证和表单验证，可拓展，相比源码，新增加 is_idCard 身份证验证, 使用如下：

<!--字符串验证-->
<script>
    var v = new validator();
    v.isEmail('wowohoo@qq.com');
    v.isIp('192.168.23.3');
</script>
<!--表单验证-->
<form id="form">
    <div>
        <label for="email">邮箱验证</label>
        <input type="email" name="email" id="email" class="" value="">
    </div>
    <div>
        <input type="radio" name="sex" value="1">
        <input type="radio" name="sex" value="2">
    </div>
    <input type="text" name="phone" value="">
    <button type="submit">提交</button>
</form>
<script>
// 表单验证,submit时验证
var v = new Validator('form', [{
    //name 字段
    name: 'phone',
    display: "你输入的{{phone}}不是合法手机号|不能为空|太长|太短",
    // 验证条件
    rules: 'is_phone|required|min_length(2)|max_length(12)'
},{
    //name 字段
    name: 'email',
    display: "你输入的{{email}}不是合法邮箱|不能为空|太长|太短",
    // 验证条件
    rules: 'is_email|required|min_length(2)|max_length(12)'
}, {
    //name 字段
    name: 'sex',
    display:"请你选择性别{{sex}}|请输入数字",
    regexp_num:/^[0-9]+$/,//增加验证条件
    // 验证条件
    rules: 'required|regexp_num'
}], function(obj, evt) {
    if (obj.errors) {
        // 判断是否错误，obj.errors为数组
        console.log(obj.errors)
    }
})；
// 手动验证
v.validate()
</script>

2.6 `时间处理函数`

momentjs(momentjs中文网)，可支持多语言，对时间进行格式化，计算相对时间，日历时间

微信端

前端框架

使用mui作为前端框架，官方文档地址

CSS

使用rem做单位，设计图宽度750px，定义html的font-size为 13.33333333vw，即1rem=100px。body的font-size为0.32rem，即16px。
对mui的hack在mui.util.less中。
使用雪碧图，切图注意rem的小数像素问题。
渲染模板时，被追加数据的元素需要加dataContent的class，主要作用设置透明度为0，追加完数据后会自动加show的class，透明度置为1，使用方式：

<ul class="sort_left dataContent"  id="sortListLeft"></ul>

JS部分

1. jQuery版本

jQuery3.1.0 无ajax无animate

2. common中的公用方法

2.1 ajax

若要使用ajax的话，使用mui提供的ajax方法

 mui.ajax({
    type: 'POST',
    url:  url,
    data: param,
    dataType: 'json',
    success: function (res) {
    },
    error:function(msg){
  });

2.2 `debug`

真机调试不方便，引入debug，在原来基础上做了封装，使用时在URL上拼接"_debug=true",js需console要输出的信息

2.3 `返回强制刷新`

ios端有返回上一级页面不刷新的问题，此方法可强制执行js，但由后端模板引擎渲染的页面无法刷新

window.addEventListener('pagehide', function(e) {
    var $body = $(document.body);
    $body.children().remove();
    // 要等到回调函数完成，用户按返回才执行script标签的代码
    setTimeout(function() {
        $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
    });
});

2.4 `loading` 进度条

_num 判断进度条显示状态 change 改变进度条状态 check 检查进度条状态
[注]进页面会有默认的loading，若页面有getJson请求，则会在请求完毕后自动关闭，若没有需手动关闭

loading.ing(); // 进度条显示
loading.done();// 进度条隐藏

2.5 `reloadPull(selector)`

清空重置上拉加载需要手动设置页码以及清空dom,会自动触发一次上拉

2.6 `占位图`

可以手动设置在元素上加dataContent和seize的class，然后设置高度，或者用js设置在getJson/getWidgetData时多传一个参数，同时被追加的元素加data-height属性，使用如下：

<ul class="sort_left dataContent seize"  id="sortListLeft"></ul>
<style>
    .sort_left{height:4rem};
</style>

或者：

<ul class="sort_left dataContent" data-height="4rem" id="sortListLeft"></ul>
<script>
getWidgetData(data.name, data.datatype, function (res) {
    var widgetData = {
        vars: vars,
        xData: res.data.widgetData || null
    };
    renderTmp(el, data.tplid, widgetData);
    lazyLoad.refresh(true);
},'#sortListLeft');
</script>

2.7 `toast(message, type)` 弹出提示

/**
 * toast
 * @param {string} message 弹出字符串
 * @param {string} type success/info/warn/error 四种类型
 */
 tosat('some message','success')

3. 插件

3.1 `懒加载`

使用mui提供的懒加载,每次新增图片都要调用refresh方法更新，初始化懒加载的代码在common中，若要替换图片，可到common中修改：

// common
var lazyLoad = mui('body').imageLazyload({
    placeholder: '/resources/images/placeholder.png',
    autoDestroy: false
  });

使用方式：

<img data-lazyload="image.jpg">
<script>
  lazyLoad.refresh(true);
</script>

3.2 `图片上传`

微信端的图片上传是把图片转成base64格式再上传,依赖jQuery版本为1.11.0，支持裁剪，需要的文件在\include\c_multi_img_upload.ftl中,缺点是如果一次上传多张或图片过大，容易断开连接，可以把压缩比率调小点，使用方式：

$(function () {
    uploadComponent._options.width = 350; //裁剪区域宽高
    uploadComponent._options.height = 350;
    uploadComponent._options.noclip = true; // 是否裁剪
    uploadComponent._options.rate = .66;  // 压缩比率
    uploadComponent.init();
});

3.3 `sliderUnlock()` 滑动验证

验证后page.flag等于1，否则等于0

<div class="slider" id="range">
    <div class="label">向右滑动验证</div>
    <div class="track-on" id="track" >
        <div class="bg-green">欢迎登陆英纳维胜商城</div>
    </div>
    <div class="button-on" id="btn" >
        <div class="icon" id="icon"></div>
        <div class="spinner" id="spinner">成功</div>
    </div>
</div>
<script>
    sliderUnlock('#range');
</script>

4.其他

4.1 页面js需放在`pageInit`中

function pageInit() {
    // 页面代码
}

PC端

前端框架

使用Amaze UI作为前端框架，官方文档地址

CSS部分

相比微信端，PC端less定义的基础样式更多，

@support-ie-version: 8;     // 支持的浏览器版本
@support-html5: true;       // 支持HTML5
@default-font-size: 16px;       // 默认字号
@default-border-width: 1px;     // 默认边框宽度
@default-border-radius: 2px;    // 默认圆角
@default-transform-duration: .2s;   // 默认动画时长
// font 字体
@code: Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace;
@sans-serif: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
@serif: Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif;
@body-bg:#f4f4f4;   //body

JS部分

1. common中的公用方法

1.1 `图片上传`

使用百度提供的 WebUploader 0.1.5版本
定义了webupload(btn,list,num)方法，btn 上传按钮， list 追加图片的列表,每个item中.info存放图片url ， num 允许上传图片的个数,使用方式：

<div class="upLoad_list"></div>
<div class="upload_btn">
    <span class="icon">+</span>
</div>
<script>
webupload('upload_btn','upLoad_list',3);
</script>

其中，upLoad_list和upload_btn为必要结构，图片上传后的URL存放在每个file-item的span.imgUrl中

2. 插件

2.1 `瀑布流`

使用Masonry，瀑布流的懒加载使用imagesLoaded

var msny=$('#postingsList').masonry({    //初始化
    itemSelector: '.postings_item'
});
// 新增图片后更新
msny.imagesLoaded().progress( function(instance, image) {
    if(!image.isLoaded ){
        $(image.img).attr('src',vars.theme.root+"/resources/images/placeholder.png").css('height','200px')
    }
    msny.masonry('layout').masonry('reloadItems');
});

2.2 `滑动验证`

使用jquery.slideunlock.js，在源码基础上做了调整，增加重置方法，

<div id="range">
    <div id="slider_bg"></div>
    <span id="label">>></span> <span id="labelTip" data-tip="欢迎登录EMALL商城">拖动滑块验证</span>
</div>
<script>
/**
*el 包裹元素
*[callback]  回调函数
*/
sliderUnlock('#range', function (slider) {
    // 滑动验证成功
    if (!$('#mobile').hasClass('lenPassed')) {
        //没填写手机号需填写手机号
        toast('请填写手机号', 'warning');
        slider.restart(); // 重置
    } else if (!$('#mobile').hasClass('passed')) {
        toast('手机号格式错误', 'warning');
        slider.restart();
    } else {
        $('.step1 .am-btn').removeClass('am-disabled');
    }
});
  </script>

2.3 `懒加载`

使用jquery_lazyload，common中做了处理，使用方式与mui的懒加载基本一致：

<img data-lazyload="image.jpg">
<script>
  lazyLoad.refresh();
</script>

2.4 弹出提示 `toast(data,[type],[callback])`

仿照mui.toast，结合AmazeUI的模态窗

/**
*data 要弹出的内容 ，
*[type] toast样式 success，error，warning，默认success ， 
*[callback] 回调，关闭时执行
*/
    toast('请填写手机号', 'warning');

2.5 `放大镜`

基于AmazeUI的插件Amaze UI Magnifier

<figure class="am-magnifier">
    <img id="small-image" width="480" height="270" src="images/bing-rect.jpg" alt="Bing rect image">
    <div></div>
    <div class="am-margin-left-sm">
        <img width="1920" height="1080" src="images/bing-rect.jpg" alt="Bing rect image">
    </div>
</figure>
<script>
    $(function() {
        $('#small-image').magnify({
          shape: 'rect',
          width: 120
        });
    });
</script>

2.6 `分页插件`

// 分页标志，如果生成过分页则不再重新生成
page.pageFlag = 0;
getJson("/ec/goods/doSearchGoodsByProps.do", {}, function (data) {
    // 获取总页数
    page.pageCount = data.data.pageCount;
    creatPage();
})
function creatPage(){
    if(page.pageFlag == 1){
      $(".paging").page({
        pages:page.pageCount,// 总页数
        groups: 5, //连续显示分页数
        jump:function(context,first){// 触发分页后的回调
            $('#container').empty();
            page.page = context.option.curr;
            getPageData();
        }
      });
      page.pageFlag = 0;
    }
}

Doc

框架中用到的资源

通用部分

模板引擎

CSS部分

1. less

2. 基本工具类

3. 图标

JS部分

1. common中的公用方法

1.1 全局变量 page

1.2 getJson(url,param,success,error)

1.3 getWidgetData(widgetName,type,success,error)

1.4 renderTmp(selector,tmpId,data,callback)

1.5 toNewPage(href,cantBack)

1.6 Cookie操作

1.7 localStorage操作

1.8 imgFormat(url,format,[isZip],[notForImg])

1.9 dateFormat(date, format)

1.10 moneyFormat(num, [format])

1.11 Base64加密解密

1.12 checkLogin(toLogin,callback) 判断是否登录

1.13 rmoney(s) 价格转换浮点型 把moneyFormat格式化后的金额转成number类型

1.14 autoGrow(selector)

1.15 定位

1.16 vars 定义路径

2. 插件

2.1 日历插件 Simple-Calendar

2.2 倒计时插件 DownCount

2.3 二维码生成

2.4 html2canvas

2.5 表单验证

2.6 时间处理函数

微信端

前端框架

CSS

JS部分

1. jQuery版本

2. common中的公用方法

2.1 ajax

2.2 debug

2.3 返回强制刷新

2.4 loading 进度条

2.5 reloadPull(selector)

2.6 占位图

2.7 toast(message, type) 弹出提示

3. 插件

3.1 懒加载

3.2 图片上传

3.3 sliderUnlock() 滑动验证

4.其他

4.1 页面js需放在pageInit中

PC端

前端框架

CSS部分

JS部分

1. common中的公用方法

1.1 图片上传

2. 插件

2.1 瀑布流

2.2 滑动验证

2.3 懒加载

2.4 弹出提示 toast(data,[type],[callback])

2.5 放大镜

2.6 分页插件

内容目录

1.1 全局变量 `page`

1.2 `getJson(url,param,success,error)`

1.3 `getWidgetData(widgetName,type,success,error)`

1.4 `renderTmp(selector,tmpId,data,callback)`

1.5 `toNewPage(href,cantBack)`

1.8 `imgFormat(url,format,[isZip],[notForImg])`

1.9 `dateFormat(date, format)`

1.10 `moneyFormat(num, [format])`

1.11 `Base64`加密解密

1.12 `checkLogin(toLogin,callback)` 判断是否登录

1.13 `rmoney(s)` 价格转换浮点型把moneyFormat格式化后的金额转成number类型

1.14 `autoGrow(selector)`

1.15 `定位`

1.16 `vars` 定义路径

2.1 `日历插件` Simple-Calendar

2.2 `倒计时插件` DownCount

2.3 `二维码生成`

2.4 `html2canvas`

2.5 `表单验证`

2.6 `时间处理函数`

2.2 `debug`

2.3 `返回强制刷新`

2.4 `loading` 进度条

2.5 `reloadPull(selector)`

2.6 `占位图`

2.7 `toast(message, type)` 弹出提示

3.1 `懒加载`

3.2 `图片上传`

3.3 `sliderUnlock()` 滑动验证

4.1 页面js需放在`pageInit`中

1.1 `图片上传`

2.1 `瀑布流`

2.2 `滑动验证`

2.3 `懒加载`

2.4 弹出提示 `toast(data,[type],[callback])`

2.5 `放大镜`

2.6 `分页插件`