|
|
@@ -4,50 +4,93 @@
|
|
|
百醇，定造（后端接口）
|
|
|
### 目录
|
|
|
dw_f2e\amkit\p\tu
|
|
|
-### 需求
|
|
|
-商务需求（背景图要适配屏幕大小显示）,增加视频栏目
|
|
|
-### 思路
|
|
|
-根据域名判断，异步加载对应的js和css,入口文件main.js可以看到，新建对应模板分支，后续按照需求变更
|
|
|
-### 注意
|
|
|
-执行grunt命令build完文件后，只提交评论那部分代码即可，避免影响其他代码，要刷新cdn
|
|
|
-### 入口
|
|
|
-```html
|
|
|
-<script>
|
|
|
-var comment3Uniqid = '4e6d9cfa1eebdc8a2edf97c0929c1e81';
|
|
|
-</script>
|
|
|
-<a name='comment_top'></a><div id="comment_frame"></div>
|
|
|
-<script src="//assets.dwstatic.com/amkit/entry.js" data-entry="p/comment/main"></script>
|
|
|
-```
|
|
|
|
|
|
-## 测试
|
|
|
+## 需求（2019/07）
|
|
|
+需求: 商务需求（背景图要适配屏幕大小显示）
|
|
|
+
|
|
|
+思路: 监听页面resize事件，动态调整背景图background-size 和页面主内容的宽度（有设下限宽度）
|
|
|
+
|
|
|
+### 测试
|
|
|
+随便复制一个图库详情页源代码，在本地测试
|
|
|
+http://tu.duowan.com/gallery/139208.html#p1
|
|
|
|
|
|
-### 本地测试
|
|
|
-1.配置host：本地ip 开通评论的专区域名
|
|
|
+```js
|
|
|
+//视图适配不同尺寸的屏幕
|
|
|
+ var viewWidth = {
|
|
|
+ viewWidthTimer : null,
|
|
|
+ $window : $(window),
|
|
|
+ $show : $("#show") ,
|
|
|
+ $imageShow:$("#image-show"),
|
|
|
+ $imageShowImg:$("#image-show .show-img"),
|
|
|
+ $main:$("#main"),
|
|
|
+ $conR:$("#con-r"),
|
|
|
+ isFirstInitViewWidth : false,
|
|
|
+ initViewWidth: function(){
|
|
|
+ var winWidth = this.$window.width();
|
|
|
+ var scaleRate = (winWidth/1760).toFixed(2);
|
|
|
+ var minRate = 0.88;
|
|
|
+ var originalWidth = 990;
|
|
|
|
|
|
-[](../image/cms32.png)
|
|
|
+ if(scaleRate>=1) scaleRate=1;
|
|
|
+ scaleRate = scaleRate<minRate? minRate : scaleRate;
|
|
|
|
|
|
-2.demo页传入专区评论id
|
|
|
+ var finnalWidth = originalWidth*scaleRate;
|
|
|
+ if(winWidth<1760){
|
|
|
+ if(!this.isFirstInitViewWidth) {
|
|
|
+ this.isFirstInitViewWidth = true;
|
|
|
+ $("head").append("<style>.tu-cebian-da{transform-origin:top;background-size:100%!important}</style>");
|
|
|
+ }
|
|
|
|
|
|
-### 测试环境（test-assets.dwstatic.com）
|
|
|
+ this.$imageShow.css({
|
|
|
+ 'width': finnalWidth+'px'
|
|
|
+ })
|
|
|
+ this.$main.css({
|
|
|
+ 'width': finnalWidth+'px'
|
|
|
+ })
|
|
|
+ this.$imageShowImg.css({
|
|
|
+ 'width': finnalWidth+'px'
|
|
|
+ })
|
|
|
+ this.$conR.css({
|
|
|
+ 'width': finnalWidth-352+'px'
|
|
|
+ })
|
|
|
+ this.$show.css({
|
|
|
+ 'background': '#202020',
|
|
|
+ 'width': finnalWidth+'px',
|
|
|
+ 'overflow': 'hidden'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init:function(){
|
|
|
+ var _this = this;
|
|
|
|
|
|
-1.拿一篇文章页源码copy下来在开通评论的专区内新建模板
|
|
|
+ if(!'transform' in this.$show[0].style) return
|
|
|
|
|
|
-2.test-assets.dwstatic.com(需要绑定host)->测试入口
|
|
|
+ this.$window.on('resize',function(){
|
|
|
+ clearTimeout(_this.viewWidthTimer)
|
|
|
+ _this.viewWidthTimer = setTimeout(function(){
|
|
|
+ _this.initViewWidth()
|
|
|
+ },200);
|
|
|
+ })
|
|
|
+ _this.initViewWidth()
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
-[](../image/cms33.png)
|
|
|
+ viewWidth.init();
|
|
|
+```
|
|
|
+
|
|
|
+### 注意
|
|
|
+由于当时和评论的档期一起，不能发布这块资源，所以代码直接给定造在页面输出了，后续可调整为前端js里面增加，页面删除
|
|
|
|
|
|
-3.需要新增配置window.dw_seajs_base_host,window.dw_seajs_base
|
|
|
+## 需求（2018）
|
|
|
|
|
|
-```html
|
|
|
-<script>
|
|
|
+需求: 增加爆笑视频栏目，在原来图片轮播的基础上，加个播放按钮，用户点击播放
|
|
|
|
|
|
-window.dw_seajs_base_host = "//test-assets.dwstatic.com/";
|
|
|
-window.dw_seajs_base = "http://test-assets.dwstatic.com/amkit/"
|
|
|
+思路: 看源码解决
|
|
|
|
|
|
-var comment3Uniqid = '4e6d9cfa1eebdc8a2edf97c0929c1e81';
|
|
|
+访问地址：
|
|
|
+>http://tu.duowan.com/gallery/139208.html#p1
|
|
|
|
|
|
-</script>
|
|
|
-<a name='comment_top'></a><div id="comment_frame"></div>
|
|
|
+测试：方法采用了 多玩虎牙旧项目文档下提供的调试方式2
|
|
|
|
|
|
-<script src="//test-assets.dwstatic.com/amkit/entry.js" data-entry="p/comment/main"></script>
|
|
|
-```
|
|
|
+## 需求（2017）
|
|
|
+h5列表页和详情页添加广告位，涉及广告预览上报和点击上报
|
