达人店文档整理之活动页面开发

@(showjoy)

达人店文档整理之活动页面开发

通用链接

注意所有绝对地址链接全部去掉协议头部分

说明 链接地址

已抢光

//cdn1.showjoy.com/images/c3/c36ee6bc24044bc49ac1a0e06840300a.png.png

加载中

//cdn1.showjoy.com/images/f1/f1470821244341018d5dd9fe53c73ab3.png

客服链接

//shop.m.showjoy.com/shop/chat?type=1

图片使用策略

  • .less文件中背景图使用:所有使用到图片背景的部分全部用mixin.less中的.webpbg(imgurl)方法来加载.webp格式图片,节省流量
  • .html文件中的图片使用:使用lazyload方式加载,用fecomponent中最新的lazyload插件并建议设置图片宽高来占位(注意更新一下插件,插件集成了webp图片格式转换和retina屏幕使用高清图配置)
  • img标签图片占位:img标签中src标签中放入占位图(链接统一使用通用链接中的加载中占位图)

分享信息配置

  • 配置信息全部在发到线上的.js文件中配置
  • 链接协议头全部使用http(由于服务端微信分享配置不可扩展https导致二次分享配置会失效)
  • link属性后添加shopId参数
  • 调用客户端分享组件方法shopc_send_shareInfo
shareData = {  
  title: '12.12岁末狂欢季,百万店主的福利和狂欢,底价大SHOW场!',
  desc: '12.12岁末狂欢季,百万店主的福利和狂欢,底价大SHOW场!',
  link: 'http://shop.m.showjoy.com/activity/ctopic/47943.html?shopId=' + shopId,
  imgUrl: 'http://cdn1.showjoy.com/images/64/643500a03d6e4315a927598e9d85b27a.png'
};

公用信息获取

  • 是否开店:$('.j_HasShop').val()
  • 店铺ID:$('.j_ActivityShopId').val()
  • 服务器当前时间:$('.j_SeverTime').val()

页面展示控制

  • 是否显示收益信息:通过hasShop字段值来判断,值为true时则显示【该字段值通过DOM$('.j_HasShop').val()中获取】
  • 跳转商品详情链接:链接后添加shopId参数【shopId字段值通过DOM$('.j_HasShop').val()中获取】
  • 返回操作获取商品最新信息:在请求商品信息的接口中添加参数,改参数的作用是清楚浏览器默认缓存,建议使用时间戳的方式,添加参数v: new Date().getTime()
  • 返回操作跳转到上一次浏览页面的位置:记录页面滚动位置
var oHash = window.location.hash;

// check if there is oHash and scroll
if(oHash && oHash.length > 0) {  
  var scrollTop = oHash.split('=')[1];
  $('body')[0].scrollTop = scrollTop;
}

// record scrollHeight when page was scrolled
$(window).on('scroll', function () {
  var scrollHeight = document.documentElement.scrollTop ?
  document.documentElement.scrollTop : document.body.scrollTop;
  if(history.replaceState) {
    history.replaceState({}, '', '#pageScrollTop=' + scrollHeight);
  } else {
    window.location.hash = 'pageScrollTop=' + scrollHeight;
  }
});

米奇

继续阅读此作者的更多文章