站长开发的非通用组件,使用 组件上线平台 提交,上线后代码位于 GitHub/mip-extension-platform 仓库中。

## 一 . 在组件仓库中创建新的组件

在创建组件之前,需要确认 mip-cli 工具已经安装。在命令行执行:

$ mip -V

如果返回版本号,则安装成功,可以进行下一步。如果报错,则需要参考 MIP 开发教程 (一) MIP-CLI 工具安装与环境部署 安装 MIP 依赖。

1. 在mip-ext/src目录中创建组件:
$ mip addelement mip-alert

此时目录结构如下:

2. 开发组件
  • mip-alert.js用于定义组件,可参考下方示例。
define(function (require) {
var customElement = require('customElement').create();
customElement.prototype.firstInviewCallback = function () {
var element = this.element;
var text = element.getAttribute('alert-text') || ' 默认 alert 内容 ';
element.addEventListener('click', function(){
alert(text);
});
};
return customElement;
});

二 . 预览调试组件

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

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

页面不能预览如何解决?

此时可以修改 mip-alert/mip-alert.js,mip-alert/mip-alert.less 实时预览效果。

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

1. 修改mip.config

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

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-ext/src 文件夹下,使用如下命令校验:

$ mip validateelement mip-alert

根据报错修改对应文件,确认组件通过校验之后,就可以提交到 MIP GitHub 或 MIP 组件平台了。MIP 组件平台的教程见 MIP 开发教程 (四) MIP 组件平台使用说明


本系列共有四篇文章:

附:常见问题解答

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

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

  2. mip-extension-platform 中的组件如何预览?

    如果代码已经提交到 mip-extension-platform 中,需要将组件文件夹复制到 mip-ext/src 中,然后使用 mip server 预览。

MIP开发教程(三) 使用MIP-CLI工具调试组件的更多相关文章

  1. MIP开发教程(一) MIP-CLI工具安装与环境部署

    依赖安装 安装 MIP-CLI 创建开发文件结构 1. 依赖安装 MIP-CLI 使用 NPM 安装,依赖 node 环境: node 安装-windows node 安装-mac MIP-CLI 开 ...

  2. MIP开发教程(二) 使用MIP-CLI工具调试MIP网页

    初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置: $ mip i ...

  3. 【安富莱专题教程第7期】终极调试组件Event Recorder,各种Link通吃,支持时间和功耗测量,printf打印,RTX5及中间件调试

    说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃.  ...

  4. Odoo 二次开发教程(三)-第一个Model及Form、Tree视图

    创建完我们的模块,接下来我们就要为我们的模块添加一些对象.今天我们将要创建一个学生对象(tech.student)和一些基本的属性,并将用form和tree视图将其展示出来: 一. 创建tech.st ...

  5. XAF应用开发教程(三)业务对象模型之引用类型与关联关系

    本节介绍信息系统开发中最常见的问题,引用关系,一对多关系,多对多关系. 以客户信息为例,客户通常需要客户分类,如VIP客户,普通客户,潜在客户.当然,我们可以定义枚举类型进行定义出这个类型,并在客户类 ...

  6. Boot-crm管理系统开发教程(三)

    (ps:前两章我们已经把管理员登录和查看用户的功能实现了,那么今天我们将要实现:添加用户,删除用户,和修改用户功能) 由于Cusomer的POJO类型已经写好了,所以这次我们之前从CustomerCo ...

  7. 转载:【Oracle 集群】RAC知识图文详细教程(三)--RAC工作原理和相关组件

    文章导航 集群概念介绍(一) ORACLE集群概念和原理(二) RAC 工作原理和相关组件(三) 缓存融合技术(四) RAC 特殊问题和实战经验(五) ORACLE 11 G版本2 RAC在LINUX ...

  8. 开发教程(四) MIP组件平台使用说明

    组件审核平台用于上传 MIP 组件.经过自动校验之后,提交审核,通过审核的组件会定时推送到线上,供网站使用. 平台地址:https://www.mipengine.org/platform/ 1. 使 ...

  9. Android OpenGL ES 开发教程 从入门到精通

    感谢,摘自:http://blog.csdn.net/mapdigit/article/details/7526556 Android OpenGL ES 简明开发教程 Android OpenGL ...

随机推荐

  1. sap 内表

    内表的目的在ABAP/4中,主要使用表格.表格是R/3系统中的关键数据结构.长期使用的数据存储在关系数据库表格中.关于如何读取和处理数据库表格的详细信息,参见读取并处理数据库表.除了数据库表格,还可以 ...

  2. java的系统时间,怎么计算从现在到凌晨还剩下多少时间?

    Apache commons-lang3 long milliSecondsLeftToday = 86400000 - DateUtils.getFragmentInMilliseconds(Cal ...

  3. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  4. oracle+mybatis 使用动态Sql在要insert的字段不确定的情况下实现批量insert

    最近做项目遇到一个挺操蛋的问题,由于业务的关系,DB的数据表无法确定,在使用过程中字段可能会增加,这样在insert时给我造成了很大的困扰. 先来看一下最终我是怎么实现的: <insert id ...

  5. APNs 推送原理及问题

    http://bbs.csdn.net/topics/390461996 在 iOS 平台上,大部分应用是不允许在后台运行并连接网络的.在应用没有被运行的时候,只能通过 Apple Push Noti ...

  6. SublimeText 自带格式化代码功能

    其实sublime自身就有格式化命令,就不再安装插件,位置在[Preferences]->[Key Bindings]->[User]中,   中文版的位置在  [首选项]->[按键 ...

  7. Netty与网络编程

    Netty什么? Netty项目是一个提供异步事件驱动网络应用框架和快速开发可维护的高性能高扩展性服务端和客户端协议工具集的成果.换句话说,Netty是一个NIO客户端服务端框架,它使得快速而简单的开 ...

  8. Spring-cloud (九) Hystrix请求合并的使用

    前言: 承接上一篇文章,两文本来可以一起写的,但是发现RestTemplate使用普通的调用返回包装类型会出现一些问题,也正是这个问题,两文没有合成一文,本文篇幅不会太长,会说一下使用和适应的场景. ...

  9. 斜率优化入门学习+总结 Apio2011特别行动队&Apio2014序列分割&HZOI2008玩具装箱&ZJOI2007仓库建设&小P的牧场&防御准备&Sdoi2016征途

    斜率优化: 额...这是篇7个题的题解... 首先说说斜率优化是个啥,额... f[i]=min(f[j]+xxxx(i,j)) ;   1<=j<i (O(n^2)暴力)这样一个式子,首 ...

  10. Python数据结构应用6——树

    数据结构中的树的结点和机器学习中决策树的结点有一个很大的不同就是,数据结构中的树的每个叶结点都是独立的. 树的高度(Height)指叶结点的最大层树(不包含根结点) 一.树的建立 树可以这样定义:一棵 ...