mipengine/mip-extensions

[Deprecated] MIP 组件包括官方组件和开发者自定义组件，请到 mip2-extensions 查看官方组件

mip-extensions's Issues

mip-form 组件未监听回车按键事件

• 导致在某些手机某些浏览器 点击前往不起作用
• 同时提交时间监听的是所有的form 表单，需要修复

mip-ad 增加 ssp 直投广告类型

如题

mip-video poster上方显示播放按键，隐藏控制条

在播放视频前，显示poster时，不显示默认的控制条，在poster上方显示一个大的播放按键（样式可自定义）
这个可根据参数选择只是首次显示或者每次暂停都显示
参见新浪新闻，搜狐新闻
请问这个是你们可以给组件升级呢 还是我们自己封装

使用mip组件 ad-ssp有错误

<mip-ad 
        type="ad-ssp"
        data-site-id="1402397"
        data-block-id="3351338">
 </mip-ad>

使用开发者工具查看请求发现502错误.

mip-carousel 多图轮播会出现时间间隔被过滤的情况

可以和#25 一起修复

mip-share组件微信分享样式问题

浮层图片过大，文字显示不全

mip-carousel 建议

轮播图的indicator半透明的背景是通过js添加的内联样式，无法用css更改。

联想 lenovo K920 5.0.2，自带浏览器结果页打开MIP页， 未显示出图片

如题：

• 问题描述：从百度搜索结果页打开MIP页面，图片不显示
• 测试手机：lenovo K920
• 系统版本：Android 5.0.2
• 浏览器：自带浏览器
• 问题地址：https://m.baidu.com/sf?word=%E8%83%8E%E5%84%BF%E5%BF%83%E8%B7%B3%E8%BF%87%E5%BF%AB%E6%98%AF%E4%BB%80%E4%B9%88%E5%8E%9F%E5%9B%A0&mod=0&tn=normal&pd=mms_mip&actname=act_sf_mip&title=%E6%9C%89%E9%97%AE%E5%BF%85%E7%AD%94%E7%BD%91&top=%7B%22sfhs%22%3A4%7D&ext=%7B%22url%22%3A%22%252F%252Fmipcache.bdstatic.com%252Fc%252Fm.120ask.com%252Faskg%252Fbd_detail%252F42105756%22%2C%22lid%22%3A%2213631052171058821649%22%7D&lid=13631052171058821649&ms=1&frsrcid=1529&frorder=3

代码合并后,需要等下一次上线才能引用?

如题

mip-carousel 建议添加样式

1.支持当前显示的图片和总图片的数量，例如右下角显示1/20（在轮播图很多的情况下有这种需求）。

2.支持滑动时的效果。 目前的是在滑动后显示下一张图片，没有拖动效果（参考swiper）。

mip-360doc-script组件地址无法使用

组件于2016年11月10日 commit 并被 merge 到master 分支中。 根据docs 中MIP 扩展组件规范 的上线地址格式 https://mipcache.bdstatic.com/static/mip-360doc-script/latest/mip-360doc-script.js 无法访问。

不是说三点上线的么？

请问一下，不是说三点上线的么？为啥这个 https://mipcache.bdstatic.com/static/v1.1/mip-stats-ajk.js
返回还是404诺？

mip-nav-slidedown 的 showbrand 不起作用

showbrand为0或1是都显示，同时能不能增加参数，可以控制.navbar-brand 的链接内容，如：' + brandtext + '

mip-mustache 建议添加使用文档

这个是模板组件吧？

mip-fixed组件在外层元素有padding情况下，在ios上有不贴边显示问题

如果body统一设置了padding:20px，可见效果。

mip-carousel组件

升级组件,提供手势滑动切换。

mip-accordion 功能升级

• 升级组件，希望支持高度控制（可以设置高度阈值，超过高度才会显示『展开』『收起』按钮）

mip-form支持更多input type展现清除按钮

参考type: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

前进-后退功能

实现 history.go(-1)

Mip-experiment 设计文档

• 简介
• 技术方案
• 技术细节
• 统计方案
• 站长使用
• 未来计划

简介

mip-experiment是一个用于页面实验的组件。站长通过配置实验变量，达到展示不同页面内容样式的目的。支持通过url配置，强制显示某个实验效果。

功能

1. 支持单个抽样的分组，支持配置单用户在实验期间体验是否统一（用户刷新是否会进不同的实验分组）
2. 支持配置多个抽样，且配置抽样间是否互相影响（实验一的A组和实验B的A组同时展现）
3. 支持url强制抽样

技术方案

1. 前端抽样分组：用户第一次访问页面时，为用户分组，储存在cookie中。多次访问时，从cookie中查看用户分组。
2. 前端标记，修改样式：为标记分组，给body加上mip-x-name="groupA"属性。站长通过css选择器来控制前端样式。
3. 强制抽样：根据url中的hash获取强制抽样分组，跳过步骤1，直接标记分组。
4. 统计：支持百度统计或mip-pixel统计。

技术细节

抽样分组：

从Cookie中读取实验分组。已存在分组的用户，直接标记分组。未存在分组的用户，使用math.random进行分组。

cookie:

使用mip-cookie组件，在cookie中储存用户的实验分组，支持多组实验同时进行。

• 名称：mip-experiment
• 值：base64加密后的实验抽样标记
• 示例：bWlwLWV4cC1BPWdyb3VwQSZtaXAtZXhwLUI9Z3JvdXBFJm1pcC1leHAtMTIxMi0xMj15ZWxsb3c=
• 明文示例：mip-x-A=groupA&mip-x-B=groupE&mip-x-1212-12=yellow

url:

强制抽样，支持配置多组实验

• 名称：实验名
• 值：分组名
• 示例：www.mip.com/a.html#mip-x-A=groupA&mip-x-12=yellow

统计方案：

一. 百度统计

使用百度统计的自定义变量api，将实验名和实验分组作为参数加入到统计请求中。具体需要和百度统计对一下技术方案。

• _hmt.push(['_setCustomVar', 1, 'mip-x-A', 'groupA', 2]);
• 自定义变量参考：http://tongji.baidu.com/open/api/more?p=guide_setCustomVar

二. mip-pix：使用mip-pix统计组件发请求

站长在使用mip-pix组件时加入mip-x-A={mip-x-A-group}参数，在组件中会将mip-x-A-group替换成mip-x-A的分组，拼出最终请求。

// mip-pix 用法
<mip-pix src="https://yourselfdomain/mipurl/tj.gif?
    t={TIME}&title={TITLE}&host={HOST}
    &mip-x-A={MIP-X-A}&mip-x-B={MIP-X-B}
    &from=baidu">
</mip-pix>

// 产生的mip-pix请求
https://yourselfdomain/mipurl/tj.gif?
    TIME=1483961727115&
    title=%E…%97%E6%AC%A2%E8%BF%8E&
    host=http%3A%2F%2F172.20.130.52%3A8014%2Ffixed1.html&
    from=baidu&
    mip-x-A=groupRed&
    mip-x-B=groupYellow

广告统计计费（重要！）

现有广告计费方式为：页面加载后算一次广告展示。页面广告在隐藏元素中或用户未看到广告也算一次展示。

在实验中，如果广告外层元素为display:none，则应该不计费。

站长使用

例如，站长需要针对广告位A进行抽样，40%显示广告M，40%显示广告N,20%不显示广告。

抽样配置

<mip-experiment>
    <script type="application/json">
    {
        "ad-A-exp": {
            "variants": {
                "showM": 40,
                "showN": 40
            }
        }
    }
    </script>
</mip-experiment>

css代码

/* 40%流量显示广告M */
body[amp-x-ad-A-exp="showM"] .wrapper-A .M {
    display: block;
}
body[amp-x-ad-A-exp="showM"] .wrapper-A .N {
    display: none;
}

/* 40%流量显示广告N */
body[amp-x-ad-A-exp="showN"] .wrapper-A .M {
    display: none;
}
body[amp-x-ad-A-exp="showN"] .wrapper-A .N {
    display: block;
}

/* 20%流量不显示广告 */
body .wrapper-A .M,
body .wrapper-A .N {
    display: none;
}

未来计划

1. 修改mip-pix代码，支持统计
2. 与百度统计合作，支持统计
3. 广告统计计费方案确认
4. cookie中确认是否可以增加mip-experiment=bWlwLWV4cC1BPWdyb3VwQSZtaXAtZXhwLUI9
5. 编写用户分组，url抽样，cookie抽样逻辑
6. 支持实验分组，AB两个实验分组具有相关性

使用XXX组件出现了XX错误

mip-stats-baidu 统计组件问题

统计事件同时使用 click 和 load 的时候 去触发click的时候并没有生效 并且触发到了load。
现在我们遇到这个问题希望能够快点解决。http://m.iask.sina.com.cn/mib/tqmMWGJOfF.html

mip-360doc-script 组件代码更新问题

2016年11月11日 上午提交的版本，已经 commit 并且 merge ，但是线上文件https://mipcache.bdstatic.com/static/v1.2/mip-360doc-script.js 还是旧版本

增加是否是微信内置浏览器和是否是ipad的判断

在mip内置模块中增加是否是微信内置浏览器和是否是ipad的判断 @wupengFEX

mip-vd-tabs 升级支持异步请求数据

## 使用mip组件 ad-ssp有错误

<mip-ad 
        type="ad-ssp"
        data-site-id="1402397"
        data-block-id="3351338">
 </mip-ad>

使用开发者工具查看请求发现502错误.

mip-form 在input type=text时不创建清空按钮

代码如图：

根据MDN文档，input没有type="input"的选项：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

ads/mip-ad-baidu 组件报错（已自愈）

引用了mip-ad-baidu组件之后，浏览器出现错误提示

Uncaught TypeError: 
Failed to execute 'getPropertyValue' on 'CSSStyleDeclaration':
 1 argument required, but only 0 present.

经过检查，是
https://mipcache.bdstatic.com/static/v1.2/ads/mip-ad-baidu.js
里的如下代码引起的。

e&&e.getPropertyValue()?e.getPropertyValue("position"):"";

组件说明文档书写格式

大标题

组件说明表格

示例

小标题

说明文字内容

// 代码示例

属性

type

描述：
是否必须：
取值：

top

昨天审核通过的mip-xem-comment-duoshuo组件js文件404 Not Found

https://mipcache.bdstatic.com/static/v1/mip-xem-comment-duoshuo/mip-xem-comment-duoshuo.js

组件说明文档书写格式

大标题

组件说明表格

示例

小标题

说明文字内容

// 代码示例

属性

type

描述：
是否必须：
取值：

top

mip-appdl 组件定位未使用mip-fixed

增加一个点击展开更多的组件

增加一个点击展开更多的组件

mip-lightbox a标签颜色

mip-lightbox a标签的颜色请不要!important 啊
求放过

mip-ad qwang不支持悬浮的搜索推荐广告

mip-storage支持存储

现在的mip页面都是在cdn下面，站长设置存储（如cookie）是不被建议的，因为会造成存储乱用，臃肿，安全性等问题，为此需要开发一套存储系统来统一管理。

mip-lightbox失效问题

mip-form和mip-lightbox组件有个bug
你们可以尝试同一个页面引入这两个组件，当使用form表单提交后，然后把页面刷新，这时候lightbox弹层就会失效，不知道什么原因
我测试的浏览器是360手机模式，谷歌移动端模式。两个浏览器都是这样的问题。
但是我用iPhone7的自带浏览器safari没发现问题。求官方解决
---- [email protected]

mip 限制了a标签target="_blank" 属性建议

mip 的a标签加target="_blank"，该属性时 在打开 链接都生成 一个 新的窗口, 如果在同一个站访问多个页面时没有注意适当关掉一些窗口，会出现一大堆。手机配置比较低的会很卡。

mip-carousel 多图轮播 建议添加 index指示器

内置的mip-carousel 多图轮播 建议加入小圆点指示器，比较常用到。

mip-fixed组件嵌套fixed元素-兼容性问题

华为mate7自带浏览器可以复现问题。滚动时mip-fixed正常，内嵌fixed元素抖动。

mip-form 在按回车时，submit事件会触发两次

建议添加类似require text的功能

在开发自有业务组件过程中，有时会有大量的DOM，希望能支持require html文件，把DOM结构模块化。

mip-gototop 组件

mip-lightbox 弹层建议 页面初始化时弹出层是否显示

1. 页面初始化后可能会需要直接弹出活动消息状态等，弹出层内有按钮可关闭弹出层，运营活动中可能常会有相关需求。建议组件添加可选字段，选择后页面初始化时显示弹出层。
2. 相应的是否可以添加cookie，适用于设备第一次进入时加载相应的组件，之后进入不加载。

mip-list 列表组件

• 支持模板渲染list
• 支持异步获取列表数据

mip-live-list实时更新列表组件

目录

• 简介

• 业界背景

  • 技术方案

  • 技术细节

简介

mip-live-list是一个用于页面非感知实时刷新的组件。主要是加强用户的沉浸式阅读体验。用户无需手动触发更新以判断页面是否存在新内容。该组件会自动判断页面是否有内容更新，通过提示以告知用户更新。

业界背景

业界一些新闻类页面，比如微博，今日头条，手百下的新闻列表等，在用户访问页面的时候，不需要用户刷新页面，页面会定时的去访问数据接口请求最新数据，如果有最新数据，则提示用户内容有更新。

技术方案

实现流程图

具体实现方案

1. 请求控制: 采用定时器实现定时调用fetchDocument对文档进行请求

2. fetchDocument: 异步请求本页面(url = 当前url + origin)

3. 文档解析loadXML解析文档

4. diff当前页面中的id以判断返回页面是否存在id更新

5. 对返回的数据进行时间排序以及条数控制按钮

6. 显示提醒按钮

7. 插入到页面中

技术细节

• fetchDocument:

请求的url由会自带一个origin数据,origin数据为mip页面自身的url.看起来就是这样: get('http://www.mipcache.com?origin=http://www.youraddress.com') .在cache页面中需要cache服务器对源地址进行代理访问以返回最新的页面

• 对页面的id是否更新判断:

将在本地维护一个数组或多个数组(根据mip-live-list来个数确定)。每次页面的返回会获取数据框内存在的id.然后判断id是否再存在于现有的数组中。以判断页面是否需要更新

• 插入数据或者删除数据:

本地还将维护一份虚拟的dom树，每次更新的数据都会放到虚拟dom树中，等待用户点击更新以便插入到文档中。

mip-lightbox 支持统一按钮打开关闭

• 按钮 toggle 功能，即统一按钮可以展开和收起
• 遮盖层控制开关，是否需要遮盖曾

mip-form 在表单为http时，sf-mip弹出提示框

图片为ios-safari效果

mip-app-banner 调起app详情或下载

组件需求

支持通过点击调起原生app，如果手机上已经安装了此app，则直接调起；如果手机上没有安装此app，则跳转下载页面去下载；同时，组件有关闭按钮，如果用户点击了关闭按钮，那么用户再次打开页面也不会显示此组件（根据localStorage 控制）

业界背景

实现

最通用的方法是以 URL Scheme 的方式去打开app,实际实现过程中要区分 IOS 和 安卓两种情况。

• 安卓：首先，被调起的app需要对配置文件进行注册（https://developer.android.com/training/app-indexing/deep-linking.html ）；然后，在 head 部分添加 link 标签 <link rel="manifest" href="https://link/to/manifest.json">；在安卓手机下，当用户点击调起app的按钮或者连接时，会首先异步请求 manifest.json 文件，解析里面的app-id，然后进行调起

• IOS：首先，在 head 部分添加 meta 标签 <meta name='apple-itunes-app' content='你的APP-ID'>；然后，可以通过 URL Scheme来进行调起

其他需求

• 如果手机上没有需要调起的app，则应该跳转到下载页去下载

  • 在ios上面可以统一跳转itunes
  • 根据目前国内的情况，以及大多数app下载类的站点来看，国内更多的是依赖下载助手去下载相应的app，所以这里的下载地址设置为用户可配，不固定到具体的应用下载商场

实现思路

• 采用业界的基本思路，同时兼容国内市场的情况，具体开发思路如下：

  • IOS: 已安装：通过URL Scheme调起app，未安装：跳转itunes去下载
  • 安卓：已安装：通过URL Scheme调起app，未安装：打开用户配置的下载地址进行下载

mip-accordion 增加‘不记录用户展开历史’选项，增加展开动画