根据文档，mip-video 可以支持 source 方式引入视频，但是经过实际测试，这样引入视频会出问题，视频根本无法正确加载（直接空白），浏览器报错：

TypeError: undefined is not an object (evaluating 'this.attributes.src.match')
firstInviewCallback — mip.js:4:9645
viewportCallback — mip.js:3:27496
setInViewport — mip.js:3:31962
_update — mip.js:4:107
_update
n — mip.js:2:29794

# 图1是mip-nav-slidedown菜单在iPhone5 Safari上的表现（表现正常）

# 图2是mip-nav-slidedown菜单在iPad mini4 Safari上的表现（表现异常：data-brandname文字与nav的各个子项发生重叠，如红框中所示）

联系方式：156-0431-2041

目前有此需求：根据当前网络状况默选清晰度，且用户可以切换清晰度。

核心功能提供了将 cache url 转化为原 url 的功能，可以通过以下方式调用：

var util = require('util');
util.parseCacheUrl(url);

有时嵌入的页面的宽高比是不固定的，自定义高度或者自定义宽高比都不是很合适，希望 mip-iframe 组件能通过接收 postMessage 消息来自定义宽高。

参考实现:

// mip-iframe 组件:
window.addEventListener('message', evt => {
  if (evt.origin !== ALLOWED_ORIGIN_FROM_PROPS) {
     return;
  }
  if (!evt.data) {
    return
  }
  if (evt.data.type === 'MIP_IFRAME_SET_SIZE') {
    _iframe.width = evt.data.width
    _iframe.height = evt.data.height
  }
}, false)

// iframe:
window.postMessage({type: 'MIP_IFRAME_SET_SIZE', width: 300, height: 400}, '*')

遵循 MIP 规范，页面元素使用 event-action 形式，如： <div on="tap:test.custom_event">不带参数</div> （文档），但由于是 tap 事件，如果应用于一些事件里会覆盖触发元素的场景（如：弹出层），就会发生点击穿透，场景如：

在页面中 <button on="tap:right-sidebar.open"> 点击按钮时让一个 sidebar 显示，而这个 sidebar 是个弹层，弹层中又有一些跳转链接，导致点击时先触发弹层显示，又直接跳转了页面。

本身想使用 on="click:right-sidebar.open" 解决，但没有该接口。而 tap 事件在 pc 中又是由 click 替换，从而在 pc 中又复现不了。

via:

目前的 mip-pix 没有支援将 referrer header 的内容带到分析服务后台，且 MIP 流量不会经由服务伺服器，因此无法分析流量来源来自于哪些搜索引擎或网站。

建议增加一参数（如 {referer}），并自动带入 encodeURIComponent(document.referrer) 内容

一个页面怎么正确的判定它是不是mip页面，求解

动画

Naboo是一个前端动画解决方案，包含动画调度机制和动画工具集，支持串并行动画及回调，支持自定义插件；

使用

可以在类和实例中根据场景进行挑选使用

var util = require('util');
// 类对象
var Naboo = util.naboo;
// 实例对象
var naboo = new util.naboo();
naboo.animate(...);

API

naboo.start([fn])

• 开始执行动画的指令函数；
• Naboo实例方法；
• 参数列表

参数      类型      描述
fn     Function    可选，动画完成后的回调函数

• 示例

naboo.animate(animate1, {
    'transform': 'translateX(200px)'
}, {
    duration: 2000
})
.start();

naboo.next()

• 让动画进入下一步的指令函数，在调用done或者register（注册插件）方法需要调用next()才能进入下一个动画；
• Naboo实例方法；
• 示例

naboo.animate(animate1, {
    'transform': 'translateX(200px)'
}, {
    duration: 2000
})
.done(function(next) {
    console.log(1);
    next();
})

naboo.cancel()

• 取消动画的指令，调用该函数后，当前未执行完的动画仍会继续执行完成，后续的动画不会执行；
• Naboo实例方法；
• 示例

var instance;
btn1.onclick = function () {
    instance = naboo.animate(animate1, {
        'transform': 'translateX(200px)'
    }, {
        duration: 2000,
        cb: function() {
            console.log(1);
        }
    })
    .start();
}
btn2.onclick = function () {
    instance.cancel();
}

naboo.on(name, fn)

• 事件绑定，可以通过该函数绑定自定义事件；
• Naboo实例方法；
• 参数列表

参数      类型      描述
name     string    必选，事件名
fn       Function  必选，事件触发的方法

• 示例

var handle = function(e) {
    console.log(e);
}
btn.onclick = function () {
    naboo.on("customer", handle);
}

naboo.off([name], [fn])

• 解除事件绑定；
• Naboo实例方法；
• 参数列表

参数      类型      描述
name     string    可选，事件名，如果为空则解除所有事件
fn       Function  可选，事件触发的方法，如果为空则解除该name下所有事件

• 示例

btn.onclick = function () {
    console.log('解除事件');
    naboo.off("customer", handle);
}

naboo.trigger(name, [data])

• 触发事件；
• Naboo实例方法；
• 参数列表

参数      类型      描述
name     string    必选，事件名
fn       Function  可选，触发事件时需要传递的数据

• 示例

btn.onclick = function () {
    naboo.trigger("customer", {
        a: 1
    });
}

Naboo.transition(dom, prop, opt)

• Naboo提供的执行css3 transiton动画的函数，类方法;
• 参数列表

参数              类型          描述
dom             Object    需要进行动画的dom元素
prop            Object    需要进行动画的css属性键值对对象
[opt]           Object    可选的动画参数对象
[opt.duration]  number    动画时长，默认值400，单位ms
[opt.ease]      string    动画的缓动函数名，默认值ease，可选值包括ease、linear、ease-in、ease-out、ease-in-out
[opt.delay]     number    动画延迟执行的时间，默认值0，单位ms
[opt.cb]        Function  动画完成后的回调函数
[opt.mode]      string    动画的模式，默认值transition，可选值包括transition、keyframes(暂未支持)、js(暂未支持)

• 示例：同Naboo.animate；

Naboo.register(name, fn)

• 插件注册函数，如果animate不能满足需求，亦或是站长需要封装自己的插件来做到方便调用，可以通过该方式来进行方法注册；
• 在实现register fn时需调用next()才能执行下一个动画；
• Naboo类方法；
• 参数列表

参数        类型          描述
name       string       必选，插件名
fn         Function     必选，插件函数，用于定义插件的执行逻辑

• 示例

Naboo.register('animate', function (next, dom, prop, opt) {
    opt = opt || {};
    var cb = opt.cb;
    opt.cb = function () {
        cb && cb();
        next();
    };
    opt.mode = ([
        'transition'
    ].indexOf(opt.mode) > -1) ? opt.mode : 'transition';
    Naboo[opt.mode](dom, prop, opt);
});

Naboo.p(list) & naboo.p(list)

• Naboo的并行插件，通过该方式可以将多个动画并发执行，可以通过类或实例对象进行调用；
• 参数列表

参数        类型          描述
list       array       需要并行的naboo对象列表

• 示例

naboo.p(
    naboo.animate(animate1, {
        'transform': 'translateX(200px)'
    }, {
        duration: 2000,
        cb: function() {
            console.log(1);
        }
    }),

    naboo.animate(animate2, {
        'transform': 'translateX(200px)'
    }, {
        duration: 3000,
        cb: function() {
            console.log(2);
        }
    })
).start();

Naboo.done(fn) & naboo.done(fn)

• Naboo的done插件，可用于在任何一个动画插件后进行回调，可以通过类或实例对象进行调用；
• 需要在该方法中调用next()才能进入下一步的动画，因为考虑到可能会有一些异步行为，如ajax请求；
• 参数列表

参数        类型          描述
fn       function       回调函数

• 示例

naboo.animate(animate1, {
    'transform': 'translateX(200px)'
    }, {
        duration: 2000,
        cb: function() {
            console.log(1);
        }
    })
    .done(function(next) {
        console.log(2);
        next();
    })
    .animate(animate2, {
        'transform': 'translateX(200px)'
    }, {
        duration: 2000,
        ease: "ease",
        cb: function() {
            console.log(3);
        }
}).start();

Naboo.animate(dom, prop, opt) & naboo.animate(dom, prop, opt)

• Naboo的animate插件，专门用于进行动画操作的插件，可以通过类或实例对象进行调用;
• 参数列表

参数              类型          描述
dom             Object    需要进行动画的dom元素
prop            Object    需要进行动画的css属性键值对对象
[opt]           Object    可选的动画参数对象
[opt.duration]  number    动画时长，默认值400，单位ms
[opt.ease]      string    动画的缓动函数名，默认值ease，可选值包括ease、linear、ease-in、ease-out、ease-in-out
[opt.delay]     number    动画延迟执行的时间，默认值0，单位ms
[opt.cb]        Function  动画完成后的回调函数
[opt.mode]      string    动画的模式，默认值transition，可选值包括transition、keyframes(暂未支持)、js(暂未支持)

• 示例

naboo.animate(animate1, {
    'transform': 'translateX(200px)'
}, {
    duration: 2000,
    ease: 'ease',
    delay: 1000,
    mode: 'transition',
    cb: function() {
        console.log(1);
    }
}).start();

看了 mip-cli 工具, 里面有个 server 功能, 但也只是本地的, 如果本地项目依赖后端输出, 如何本地调试呢? 比如有个按钮可以模拟从百度结果页进入项目某页面, 在页面内点击也支持 MIP 跳转的功能, 现在发现必须上线, 然后使用 https://www.mipengine.org/validator/preview 功能预览...求指导...

我们的示例文件命名都是 xxx-mip.html（如examples/img-mip)，而extension/builtins都是mip-xxx.html（如builtins/mip-img）。一致一下？

我认为把mip前/后缀干掉就可以，mip项目中的示例HTML当然是mip。

mip-pix组件，https://m.a.com/js.gif?t={TIME}&title={TITLE}&host={HOST}&from=baidu ，请求不会替换“{}”的内容。

问题分类

（请在括号中输入"x"来选择）

• [ x ] MIP 页面内容（广告不显示，排版错乱）

问题描述

mip.js放在head中，页面会报错并显示空白

当组件内检查传入属性时，如果属性不合法，需要报错到控制台，来告知开发者。
建议mip-cli 工具放开对console.warn 和 console.error的限制

https://www.mipengine.org/examples/mip/mip-iframe.html

目前是通过把宽度设置0解决的。

MIP核心代码的文档（教程和API）文档需要统一维护吧？当前该项目下并没有最新的API文档，现在更新一个文档可能需要手动地同步到官网和内网文档。列一下我知道的文档：

• github:mipengine/mip: src/builtin/*.md
• github:mipengine/mip: docs/
• github:mipengine/mip-extensions: */readme.md
• gitlab: mip/mipengine（貌似官网在用这个里的doc）
• gitlab: mip/mipmain（貌似废弃了？）

以下（活跃的）文档有重合但不同步：

• 官网与src/builtin/*.md
• 官网与mip-extensions: */readme.md

现在superframe是这样维护文档的，看是否可以参考：

1. 源码仓库中维护API注释（文档）
2. 文档仓库中维护教程文档
3. 源码/文档仓库的push都会触发文档仓库更新在线文档

文档更新流程（还未完全实现）：

1. pull最新的文档仓库，获得教程文档
2. pull最新的源码仓库，并生成API文档（superframe是从代码生成API文档的）
3. 更新在线文档。

另，

• 官网文档结构有点confuse：开发指南->让搜索发现你的页面，技术规范->让搜索发现你的页面规范升级
• MIP核心代码缺少API文档？

你好，我看了下文档，发现mip中是禁用script标签，无法在页面中写自己的js，只能通过开发组件的方式来满足自己的需求吗？

当cache域名下cookie超过一定数量（chrome模拟器下为7k左右）会导致http header过大而出现bad request，短线方案将超过5k的cookie清理至3k以下，长线方案制定中；

目前在使用mip是，页面中如果需要使用一些个性化组件需要引入各种js来支持，像下面一样：

<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-gototop/mip-gototop.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-fixed/mip-fixed.js"></script>

而且这些很长的 js 的 url，需要手动复制粘贴，既然是基于组件化的，那么是否可以借鉴下 requirejs，直接在 <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> 标签上直接配置引入组件，如下：

<script src="https://mipcache.bdstatic.com/static/v1/mip.js" data-components="nav-slidedown,gototop,fixed"></script>

这样页面在加载的时候，直接根据 data-components 属性，自动人引入相关组件，会不会更优雅点，以上只是一点小小的建议。

hash参数识别时，如果只有key则会自动加上一个'='号

图片默认占位符解决不了图片闪现的问题，真实图片请求还是由firstInviewCallback触发的。而图片闪现，本身对用户的感知就是网速好慢，图片刚刚才加载出来。和MIP速度快其实是不一致的。

能不能加上默认展现的图片高度是两屏，这样用户在正常浏览的时候，基本看不到图片的抖动了。 除非用户猛划页面向下滚动，但是这个情况，是用户非正常浏览的情况。

待出方案

页面存在position: fixed样式，导致在iframe下触发MIP的兼容逻辑。具体为找到所有声明为fixed元素并移除，代码见：https://github.com/mipengine/mip/blob/51dbededbe1b54b4f8f32d437ffe99f2e19004fc/src/fixed-element.js#L252。

直接移除操作会导致页面元素丢失，严重会导致页面白屏。建议换用mip-fixed逻辑，移动目标元素，而不是直接移除。

你好：

我的移动站已经上线，全部使用mip开发，地址是：https://m.cz89.com
通过站长平台后台的移动匹配，现在已有部分页面生效(mip)。

目前发现一个较严重的问题，希望能解决或回复，如无更好的解决办法，只有放弃mip的使用。

1、mip对页面进行了缓存，而且时间较长，比如列表页，能否对这个时间可配置？
2、网站上有部分时效性较高的内容，比如彩票的开奖号码，如果使用mip cache api来清理缓存，需要请求的页面也很多，100s内不超过10次的限制，很逆天。
3、能否提供像其他公司cdn的配置后台，比如设置哪一类页面的过期时间(通过正则)。
4、如果没有配置后台，或者通过response header方式，来实现第3点的控制？

总之，对内容的时效性，mip处理的太欠佳了！

期望回复，谢谢！

mip-zpm-jobdetail组件审核结果如下
由于组件使用了特殊【登录】和【cookie】功能，请到github 提交 issue， 详细描述您的功能和需求: https://github.com/mipengine/mip-extensions/issues 我们会有技术同学专门解答您的问题
请帮忙处理

跟官博跑了一下mip的组件环境，执行到：
mip add index.html
mip add index.html mip-share

提示：
ERROR 存在同名页面！

mip add index2.html 也是一样的。问下原因？

-----------------------已解决，文档太主观---------------------

mip官网

Hello!

I know AMP-Cache does not work in mainland China, but I know Baidu is indexing AMP pages. Does MIP-Cache caches AMP pages?

Thank you.

问题:

由于在 https://github.com/mipengine/mip/blob/master/.travis.yml#L18 名文配置了 key, 再加上 sauce 服务一个github帐号只能对应一个邮箱, 不然生成的 build status img 就不准了, 我自己也测了下确实, 如: 我 fork 了 mip, 随便改改在自己仓库就可以编译, 并且这个编译状态将直接影响 mipengine/mip@msater 的编译状态.

解决方案:

• 在 http://saucelabs.com 上重置下 key
• 使用 https://docs.travis-ci.com/user/encryption-keys/ 把 key 加密了
• 在.travis.yml里使用

addons:
  sauce_connect:
    username: sauce帐号id
  jwt:
    secure: 加密后的secure

经我多次测试, 只在 https://travis-ci.com 里repo/settings里配的Environment Variables会在别人PR时不生效, 因为密钥是保护的~ 必须使用addons.jwt.secure方式才行~ 这个事坑了我好几天!!! layui/layui@943a276

广告/图片占位符可能需要个性化

What is the difference between MIP and AMP from the developer's perspective? How to make a MIP page from an AMP page and vice versa?

从开发者的角度来看，MIP和AMP有什么区别？ 如何从AMP页面制作MIP页面，反之亦然？

https://www.mipengine.org/examples/mip/mip-pix.html

添加referrer
在html 标签中增加, 可以在请求头中增加referrer信息

上述段落中的說明須更新，新的規範中，相對應的參數是 content="unsafe-url"
https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-unsafe-url

util.platform文档：https://www.mipengine.org/doc/3-widget/6-help/1-introduce.html
需求：根据平台不同，绑定click/touchend事件。

网页分析时，常有跨页面识别单一终端的需求，例如计算 unique user (client)、pageview per user (client)。例如 Google Analytic 的 cid 参数即用于此用途。

建议 MIP-PIX 也提供一个用於识别个别终端的参数。

技术需求建议

1. 在用户开启页面时，检查是否存在 uuid cookie
2. 如不存在，产生一乱数 uuid（可参照 RFC4122 之格式），并存入 uuid cookie
3. 将参数代换为 cookie 中之 uuid

由於 4dd80cc#diff-9776594e8835a6366f9e3b834557b78cR16 的實作方式，
目前 mip-pix 只會替換變數名稱為「title, host, t」的變數內容，
任何其他追蹤服務，只要其變數名稱非 t / host / title，就無法適用。

例如以下寫法（變數名稱為 pt, ptitle, phost）替換變數即無效：
<mip-pix src="https://www.mipengine.org/a.gif?pt={t}&ptitle={title}&phost={host}&area=A"></mip-pix>

建議修改行為：應檢測 {變數名稱}（例如 {t}, {title}, {host}），並將之替代為對應變數。

測試資料 1
<mip-pix src="https://www.mipengine.org/a.gif?t_x={t}&title_x={title}&host_x={host}&area=A"></mip-pix>
預期結果 1
<mip-pix src="https://www.mipengine.org/a.gif?t_x=__時間__&title_x=__頁面標題__&host_x=__頁面網址__&area=A"></mip-pix>

測試資料 2
<mip-pix src="https://www.mipengine.org/a.gif?t={t}&title={title}&host={host}&area=A"></mip-pix>
預期結果 2
<mip-pix src="https://www.mipengine.org/a.gif?t=__時間__&title= __頁面標題__&host=__頁面網址__&area=A"></mip-pix>

另外也建議改用 ${變數名稱}，以符合 JS Template Literals 的語法習慣。

之前直接用js调用腾讯的播放器http://www.mvyxws.com/js/h5connect.js，现在怎么在mip里去调取这个

rt

review 源码，发现 pix 的执行在页面是一上来就会发送统计请求，有违 pix 的简单统计的最初设计原则，申请将 pix 改成进入可视区域才执行，这样修改后，比如我想知道页面的某个模块（非首屏）用户看到了这样的统计需求，就很方便，只需在这个模块添加一个 mip-pix 即可。

问题分类

线上bug

问题描述

mip-form 组件内嵌套 mip-img组件 ，每次插入dom的时候都会执行一遍 layout.js

复现方式（线上bug 填写此项）

稳定复现：示例demo：https://gkrace.github.io/test_component/mip-img/online.html

修复

修复后demo：https://gkrace.github.io/test_component/mip-img/repair.html

.mip-carousle-subtitle {
....code;
background-color: rgba(0, 0, 0, 0.43);
}

没有背景图，文字无法看清楚

加上半透明背景后，文字更好辨识，也算是用户体验吧

问题分类

• [x ] MIP 组件使用

问题描述

1、该组件在图片加载之前，占位的地方页面是空白的，可以添加默认图片（是否用户可配？）
2、支持 srcset
3、支持 alt 和 title 属性的值传递
4、图片加载失败能够给一张默认图片（是否用户可配？）

旨在实现通用请求方案，并提高兼容性

昨天修改 mip-img 图片的时候，因为我已图片是 position:absolute，然而 mip-img 默认会有个标签包裹 img 标签，所以整体定位依赖父级标签 mip-img，然而它默认是 position:relative 试了半天，才发现我的图片如果想绝对定位，layout 必须为 fill....，此时 mip-img 才是绝对定位。

鉴于踩过的坑，所以希望能够更新官方文档，方便后来者不再踩坑。