【MIP官方博客】MIP开发教程(三) 使用MIP-CLI工具调试组件

• 一. 在mip-extensions仓库中创建新的组件
• 二. 预览调试组件
• 三. 在MIP页中引用自己编写的MIP组件
• 四. 组件提交到github仓库时需要进行校验

一. 在mip-extensions仓库中创建新的组件

1. 在mip-extensions目录中创建组件：

$ mip addelement mip-alert

此时在mip-extensions文件夹中创建了mip-alert组件：

2. 开发组件

• mip-alert.js

  用于定义组件，可参考下方示例。

• mip-alert.less

  用于定义组件样式，可参考 mip-fixed/mip-fixed。

• README.md

  用于说明组件用法，可参考 mip-fixed/README.md。

• package.json用于记录组件版本及开发者信息，可参考 mip-fixed/package.json。

/**
 * @file mip-alert 组件
 * @author Grace
 */
define(function(require) {
    var customElement = require('customElement').create();
    customElement.prototype.build = function() {
        var element = this.element;
        var text = element.getAttribute('alert-text') || '默认alert内容';
        element.onclick = function() {
            alert(text);
        };
    };
    return customElement;
});

二. 预览调试组件

1. 在mip-extensions目录下启动mip server来预览组件，预览页面访问的是README.md文件中的示例。

$ mip server

2. 打开调试网页http://127.0.0.1:8000/会列出当前仓库中的组件，点击进入mip-alert组件预览。

访问http://127.0.01:8000进入调试页面。

进入mip-alert组件中

页面不能预览如何解决？

三. 在MIP页中引用自己编写的MIP组件

1. 修改mip.config

进入mip-project/html文件夹下，如果没有mip.config文件则执行mip init命令创建此文件。如果已经存在，修改mip.config文件的字段extensionsDir为../mip-extensions。

2. 在html目录下创建mip-alert.html文件，并添加mip-alert组件

mip add mip-alert.html mip-alert

在body中引入

<mip-alert alert-text="我是alert的内容">点击触发alert</mip-alert>

3. 在html目录下启动mip server

访问http://127.0.01:8000进入调试页面。进入mip-alert.html页面

四. 组件提交到github仓库时需要进行校验

使用如下命令校验：

$ mip validateelement mip-demo

组件通过校验之后，提交到仓库，通过github提交 pull request，等待项目组审核。

本系列共有四篇文章：

• MIP开发教程(一) MIP-CLI工具安装与环境部署
• MIP开发教程(二) 使用MIP-CLI工具调试MIP网页
• MIP开发教程(三) 使用MIP-CLI工具调试组件
• MIP开发教程(四) MIP组件平台使用说明

附：常见问题解答

1. 页面不能预览如何解决？

   将mip-extensions文件夹下的mip.config文件删除。