优定义网

MIP开发教程(三) 使用MIP-CLI工具调试组件

杨旭 发表于 2018-6-20 21:11:48 | 显示全部楼层 |阅读模式

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

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

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

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

  1. $ mip -V
复制代码

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

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

  1. $ mip addelement mip-alert
复制代码
1.png

此时目录结构如下:

2.png

2. 开发组件

mip-alert.js用于定义组件,可参考下方示例。

  1. define(function (require) {
  2.     var customElement = require('customElement').create();
  3.     customElement.prototype.firstInviewCallback = function () {
  4.             var element = this.element;
  5.             var text = element.getAttribute('alert-text') || ' 默认 alert 内容 ';
  6.             element.addEventListener('click', function(){
  7.                 alert(text);
  8.             });
  9.     };
  10.     return customElement;
  11. });
复制代码

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文件中的示例。

  1. $ mip server
复制代码
3.png

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。

4.png

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

  1. $ mip add mip-alert.html mip-alert
复制代码

在 body 中引入

  1. <mip-alert alert-text=" 我是 alert 的内容: 哈哈哈 "> 点击触发 alert</mip-alert>
复制代码

3. 在html目录下启动mip server

5.png

访问http://127.0.01:8000进入调试页面。进入mip-alert.html页面, 点击文字,可以看到组件效果。

6.png

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

在 mip-ext/src 文件夹下,使用如下命令校验:

  1. $ mip validateelement mip-alert
复制代码
7.png

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

附:常见问题解答

页面不能预览如何解决?

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

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

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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精华推荐
  • 一个人开始废掉的3种迹象

    一个人开始废掉的3种迹象

  • 从零到60秒的惬意冰镇啤酒

    从零到60秒的惬意冰镇啤酒

  • 马云、马化腾、王石都弃之不用的人,有一个共同点

    马云、马化腾、王石都弃之不用的人,有一个

  • 哥特式高迪凳子

    哥特式高迪凳子

  • 千亿小米,雷军逆袭

    千亿小米,雷军逆袭

  • 她一战赚了几十亿,她说:世界上最好的生意有三种

    她一战赚了几十亿,她说:世界上最好的生意有

  • 雷军:合伙人比制度更重要!

    雷军:合伙人比制度更重要!

  • 一个美美的令人喜欢的自行车铃

    一个美美的令人喜欢的自行车铃

QQ客服热线
QQ:1090281100 周一至周日:09:00 - 21:00
WeChat:dianlingkeji
Email:kaixin1069@vip.qq.com

优定义logo

勿要吝啬你无形资产,请为创新续源,知识、点子、灵感、经验、需求等均是创新源泉,你不经意的一句话将是另一个人的灵感。明天的明天,还有明天,我们应该把握今天,每一个今天,都有一个新的事物在出现,今天的漠视明天的落后,不浪费每一个学习的时刻,学习助力非凡。

技术支持 Discuz! X3.4 - 3.5 beta © 2001-2018 Comsenz Inc.

小黑屋|手机版|优定义 ( 粤ICP备16085288号-2 )|申请友链|网站地图

粤公网安备 44011102001144 号 GMT+8, 2018-11-16 22:36 , Processed in 0.094605 second(s), 29 queries .

快速回复 返回顶部 返回列表