mipengine/mip2-extensions

MIP2.0 官方组件库

mip2-extensions

官方公用组件库

当前 MIP 的官方组件在这里托管，开发者可以通过提交 Pull Request 的方式来贡献优秀的组件。

提交步骤

1.fork 官方组件仓库

在 Github fork https://github.com/mipengine/mip2-extensions 仓库，并 clone 到本地。

2.开发

git clone 出来的项目结构与 mip2 init 命令初始化的项目结构类似，我们可以在 components 目录新增组件。

• 组件开发
• 调试
• 校验

3.发起 Pull Request

开发完成后，发起 pull Request

4.官方审核通过，合入上线

官方审核通过后，代码将合入 master 分支并上线。若不通过，请根据反馈修改后再次提交。

5.使用

// 页面中引用
<script src="https://c.mipcdn.com/static/v2/mip-example/mip-example.js"></script>

mip2-extensions's Issues

move mip-fixed to mip2

迁移mip-story组件

#组件介绍
https://www.mipengine.org/examples/mip-extensions/mip-story.html

使用mip-map组件时，页面上存在输入框focus时报错

BUG 描述
当页面上引用的mip-map组件时，input 输入框 focus报错

复现步骤
访问：https://m.jikexiu.com/resources/mip/order.html?categoryId=12-12
点击输出凯获得焦点，
页面报错

截图

排查代码发现
mip2核心代理了input的focus事件，此时会向parent发送message,

地图sdk的代码里，有全局监听message事件的逻辑
调用了JSON.parse，但是没有try catch

作为极速服务的的基础解决方案，需要有一套标准的带UI组件库实现

对于产品内部来说，设计规范都是一致的，
为了尽可能的减少极速服务的接入成本(对内、对外)
我们都需要一套标准的UI组件库，以提高下游的接入效率。

Move mip-filter to mip2

迁移百度统计组件 mip-stats-baidu

要解决什么问题
迁移百度统计组件 mip-stats-baidu

描述一下你理想中的解决方案
只改变语法

描述你的备选方案

补充信息

mip-shell-xiaoshuo fix: 修复多次点击目录章节数再返回直接跳转结果页

BUG 描述
小说目录页 fix: 修复多次点击目录章节数再返回直接跳转结果页失效
#182
复现步骤
重新复现 Bug 的步骤

1. 多次点某目录页（5次以上）
2. 点返回，不跳回结果页

期望结果

1. 多次点某目录页（5次以上）
2. 点返回，跳回结果页

其他信息
其他补充信息

增加pull reaquest netlify预览

目前的PR： #2

可以考虑改成这样子：mipengine/mip-extensions#1169

mip-anim 迁移mip2.0【申请免测】

要解决什么问题
#190
动图加载是否有默认图片支持

描述一下你理想中的解决方案
1、有默认图，动图加载完成前先加载默认图
2、无默认图，直接加载动图
3、只有默认图

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

move to mip-form to mip2

【申请免测】fix: 小说阅读器修复小说目录页和文章页bug

PR : #233
BUG 描述
1、样式被站长覆盖问题，默认样式保持不变动，不能被覆盖
http://newicafe.baidu.com:80/issue/TemplateBugs-16295/show?from=page
2、ios10+uc,safari 小说阅读器文字部分靠右显示，不稳定复现 （不复现）
http://newicafe.baidu.com:80/issue/TemplateBugs-16213/show?from=page
复现步骤
重新复现 Bug 的步骤
1、bug1 只修改了样式 ，和UE沟通后站长页面不改动，只修改

期望结果
清晰和准确的描述你期望的结果

截图
如果合适，添加问题相关的截图

环境及版本信息:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• 浏览器 Version [e.g. 64]
• mip-cli 版本

其他信息
其他补充信息

小说代码优化，针对webkitTrans准确赋值

BUG 描述

mip2-extensions/components/mip-shell-xiaoshuo/feature/catalog.js

Line 145 in d333cfa

$catalogScroll.style.WebkitTransform = 'translateY( ' + scrollTop + 'px)'

代码有问题，需要驼峰式小写

move mip-showmore to mip2

move mip-html-os to mip2

mip-html-os 组件说明详见：https://www.mipengine.org/examples/mip-extensions/mip-html-os.html

move mip-nav-slidedown to mip2

feat：mip2组件迁移，app调起组件 mip_app_banner

#221

要解决什么问题
清晰准确的描述要解决什么问题

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

move mip-analytics to mip2

fix：mip-shell-xiaoshuo阅读器与凤巢小说的部分bug

BUG 描述
1、调整字体大小，翻页时字体会有一个变化的过程；
2、小说上方浮层展示异常；

复现步骤
重新复现 Bug 的步骤
1、调整字体大小，翻页时字体会有一个变化的过程；
每次点击下一页，字体跳跃
2、小说上方浮层展示异常；
页面下拉，头部header丢失，有黑色框存在

期望结果
1、调整字体大小，点击翻页时字体无跳跃变化；
2、小说上方header正常展现；

其他信息
其他补充信息

move mip-anim to mip2

move mip-link to mip2

迁移 天润统计组件 mip-stats-tianrun

要解决什么问题
迁移 MIP 1.0 天润统计组件至 2.0

迁移 mip-map

代码仓库增加 css/less 校验

要解决什么问题
review 代码的时候，css/less 的文件格式规范的问题占了很大一部分，这一部分其实在开发的时候就可以借助一些格式检验工具检查出来，因此建议加上 css/less 的代码格式检查工具去完成这类工作。

描述一下你理想中的解决方案
增加 stylelint + stylelint-config-standard，在 git commit 阶段强制进行 css/less 检查

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

move mip-stats-baidu to mip2

move mip-sidebar to mip2

小说阅读器 修复目录页点击章节后边空白处不跳转

BUG 描述
#198
小说阅读器 修复目录页点击章节后边空白处不跳转

复现步骤
重新复现 Bug 的步骤
点击小说目录页章节文字后边空白处不跳转
期望结果
点击小说目录页章节文字后边空白处跳转

截图
如果合适，添加问题相关的截图

环境及版本信息:

其他信息
其他补充信息

迁移mip-gototop

move mip-ad to mip2

move mip-story to mip2

mip-story: https://www.mipengine.org/examples/mip-extensions/mip-story.html

mip-shell-xiaoshuo页面下滑，吊起手百下拉框

要解决什么问题
目前小说阅读器在页面下滑的时候，无法吊起手百下拉框

描述一下你理想中的解决方案
目前只要有小说需要吊起手百，目前在小说阅读器中配合给SFServer发消息，吊起手百搜索框

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

小说阅读器 feat: 新增左滑目录页收起，上下滑设置收起功能 #235

#235
要解决什么问题
清晰准确的描述要解决什么问题
1、目录页展开时，向左滑收起目录；
2、设置页展开时，向上、下滑收起设置。
3、目录修窄，遮盖层目前不加
4、去掉滚动条

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

move mip-semi-fixed to mip2

mip-history 迁移mip2.0

要解决什么问题
清晰准确的描述要解决什么问题

描述一下你理想中的解决方案
可以实现正常的页面回退

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

move mip-infinitescroll to mip2

move mip-stats-tianrun to mip2

mip-nav-slidedown迁移mip2

要解决什么问题
1、页面过宽可直接在header处横向显示菜单列；
如：

2、页面宽度较小，在header出显示下拉icon；
如：

3、这个宽度可由开发者自己配置；
4、点击下拉icon可以显示下来菜单框；
如：

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

feat : mip-accordion 迁移mip2

要解决什么问题
#211
feat : mip-accordion 迁移mip2

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

MIP Shell页面切换时支持引入缓存过的历史页面的状态

要解决什么问题
MIP Shell在页面切换时可以考虑引入历史页面的状态。
场景描述：在MIP Shell底部导航栏点击tab打开了A，浏览到了某一位置，再点击另一个tab打开了B，再点击另一个tab打开了C，如果这时再次点击tab打开A，还想要定位到刚才的位置

描述一下你理想中的解决方案
在MIP.viewer.open()中添加参数，表示优先走缓存

fix: 折叠组件mip-accordion，mip1 bug, 修复ios的safari无痕下折叠菜单失效问题（mip1,mip2一起修复） #248

#248
BUG 描述
清晰和准确的描述 Bug 是什么
ios的safari无痕下折叠菜单失效问题（mip1,mip2一起修复）
复现步骤
重新复现 Bug 的步骤

期望结果
清晰和准确的描述你期望的结果

截图
如果合适，添加问题相关的截图

环境及版本信息:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• 浏览器 Version [e.g. 64]
• mip-cli 版本

其他信息
其他补充信息

move mip-history to mip2

move mip-history to mip2

迁移mip-vd-tabs

迁移城市选择组件 mip-group-selection 到 MIP2.0

mip-lightbox迁移mip2.0

要解决什么问题
#202
1、点按钮弹出弹出层（分为普通弹出层，可关闭，自动关闭，可滚弹层，不可滚弹层）

描述一下你理想中的解决方案

描述你的备选方案

补充信息

小说异步获取目录

要解决什么问题
清晰准确的描述要解决什么问题

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

move mip-list to mip2

mip2.0 迁移mip-app-banner App调起组件

#221
要解决什么问题
mip2.0 迁移mip-app-banner App调起组件

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

在mip-form中添加校验的功能点

要解决什么问题
目前在mip1中会有站长提出针对mip-form的表单的校验的功能点；
issue地址：mipengine/mip-extensions#1213

描述一下你理想中的解决方案
希望在mip2的form组件中集成类似的功能点；
比如：如果内部的输入框设置必选项，在form点击提交时，可以进行错误信息的定位；

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等

迁移mip-audio至mip2

要解决什么问题
迁移mip-audio组件到mip2-extensions
描述一下你理想中的解决方案
回归原有属性即可

描述你的备选方案
customElement

补充信息

move mip-share to mip2

mip-share: https://www.mipengine.org/examples/mip-extensions/mip-share.html

feat: 小说新功能左滑目录页消失，上下滑设置页消失，增加无book字段测试用例

pr : #243
要解决什么问题
清晰准确的描述要解决什么问题

1、目录页展开时，向左滑收起目录；
2、设置页展开时，向上、下滑收起设置。
3、目录修窄，遮盖层目前不加
4、去掉滚动条
5、新增测试用例，无book字段，mipx-xiaoshuo-4-1.html

描述一下你理想中的解决方案
清晰准确的描述你想怎么解决

描述你的备选方案
清晰准确的描述你考虑的备选方案

补充信息
补充其他信息，如截图等