MIP开发教程(三) 使用MIP-CLI工具调试组件
站长开发的非通用组件,使用 组件上线平台 提交,上线后代码位于 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;
});
mip-alert.less
用于定义组件样式,可参考 mip-fixed/mip-fixed.less。README.md
用于说明组件用法,可参考 mip-fixed/README.md。package.json
用于记录组件版本及开发者信息,可参考 mip-fixed/package.json。
二 . 预览调试组件
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 组件平台使用说明
本系列共有四篇文章:
- MIP 开发教程 (一) MIP-CLI 工具安装与环境部署
- MIP 开发教程 (二) 使用 MIP-CLI 工具调试 MIP 网页
- MIP 开发教程 (三) 使用 MIP-CLI 工具调试组件
- MIP 开发教程 (四) MIP 组件平台使用说明
附:常见问题解答
页面不能预览如何解决?
将mip-ext
文件夹下的mip.config
文件删除。mip-extension-platform 中的组件如何预览?
如果代码已经提交到 mip-extension-platform 中,需要将组件文件夹复制到 mip-ext/src 中,然后使用 mip server 预览。
MIP开发教程(三) 使用MIP-CLI工具调试组件的更多相关文章
- MIP开发教程(一) MIP-CLI工具安装与环境部署
依赖安装 安装 MIP-CLI 创建开发文件结构 1. 依赖安装 MIP-CLI 使用 NPM 安装,依赖 node 环境: node 安装-windows node 安装-mac MIP-CLI 开 ...
- MIP开发教程(二) 使用MIP-CLI工具调试MIP网页
初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置: $ mip i ...
- 【安富莱专题教程第7期】终极调试组件Event Recorder,各种Link通吃,支持时间和功耗测量,printf打印,RTX5及中间件调试
说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃. ...
- Odoo 二次开发教程(三)-第一个Model及Form、Tree视图
创建完我们的模块,接下来我们就要为我们的模块添加一些对象.今天我们将要创建一个学生对象(tech.student)和一些基本的属性,并将用form和tree视图将其展示出来: 一. 创建tech.st ...
- XAF应用开发教程(三)业务对象模型之引用类型与关联关系
本节介绍信息系统开发中最常见的问题,引用关系,一对多关系,多对多关系. 以客户信息为例,客户通常需要客户分类,如VIP客户,普通客户,潜在客户.当然,我们可以定义枚举类型进行定义出这个类型,并在客户类 ...
- Boot-crm管理系统开发教程(三)
(ps:前两章我们已经把管理员登录和查看用户的功能实现了,那么今天我们将要实现:添加用户,删除用户,和修改用户功能) 由于Cusomer的POJO类型已经写好了,所以这次我们之前从CustomerCo ...
- 转载:【Oracle 集群】RAC知识图文详细教程(三)--RAC工作原理和相关组件
文章导航 集群概念介绍(一) ORACLE集群概念和原理(二) RAC 工作原理和相关组件(三) 缓存融合技术(四) RAC 特殊问题和实战经验(五) ORACLE 11 G版本2 RAC在LINUX ...
- 开发教程(四) MIP组件平台使用说明
组件审核平台用于上传 MIP 组件.经过自动校验之后,提交审核,通过审核的组件会定时推送到线上,供网站使用. 平台地址:https://www.mipengine.org/platform/ 1. 使 ...
- Android OpenGL ES 开发教程 从入门到精通
感谢,摘自:http://blog.csdn.net/mapdigit/article/details/7526556 Android OpenGL ES 简明开发教程 Android OpenGL ...
随机推荐
- TensorFlow练习13: 制作一个简单的聊天机器人
现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...
- python 工具安装
1. whl文件的安装:pip install 文件名.whl 2. 压缩包中有setup.py的安装:python setup.py install 3. 利用anaconda下载安装:conda ...
- &
在 xml 中,不能直接使用 '&' 表示 '&',要转译为 '&' (转译序列个字符不能有空格,区分大小写,以';'结束,不要丢了分号哦 ; amp;不是" ...
- Python分词模块推荐:jieba中文分词
一.结巴中文分词采用的算法 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG)采用了动态规划查找最大概率路径, 找出基于词频的最大切分组合对于未登录词,采 ...
- 查看centos系统位数和强制关闭yum
一个小命令查看centos 是什么多少位系统 getconf LONG_BIT 方法二: [root@linuxzgf ~]#uname -m 如果有x86_64就是64位的,没有就是32位的后面是X ...
- bzoj 4501 旅行
01分数规划+最大权闭合子图 倒拓扑序处理每个节点 $$f[x]=\frac{\sum{f[v]}}{n}+1$$ 二分答案$val$ 只需要判断是否存在$\sum{f[v]}+1-val>0$ ...
- BZOJ_3316_JC loves Mkk_ 二分答案 + 单调队列
BZOJ_3316_JC loves Mkk_ 二分答案 + 单调队列 题意: 分析: 拆成链,二分答案,奇偶两个单调队列维护最大子段和,记录方案. 代码: #include <cstdio&g ...
- BZOJ_3932_[CQOI2015]任务查询系统_主席树
BZOJ_3932_[CQOI2015]任务查询系统_主席树 题意: 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,P ...
- laravel 中路由的快速设置(只需一个控制器名就ok) 不用具体到方法
routes/web.php 设置路由 Route::group(['middleware' => ['\iqiyi\Http\Middleware\VerifyCsrfToken::class ...
- 【移动端web】软键盘兼容问题
软键盘收放事件 这周几天遇到了好几个关于web移动端兼容性的问题.并花了很长时间去研究如何处理这几种兼容问题. 这次我们来说说关于移动端软键盘的js处理吧. 一般情况下,前端是无法监控软键盘到底是弹出 ...