站長開發的非通用組件,使用 組件上線平台 提交,上線后代碼位於 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 預覽。