BUI BUI-Fast 編輯器插件

目錄

[TOC]

簡介

BUI Fast 是BUI提供的快速書寫代碼提示插件，在Sublime,Atom,VSCode,APICloud Studio2 ,Webstorm中集成BUI控件及方法的代碼提示，為快速開發(fā)助力. 里面封裝了控件的常用參數(shù)及常用方法的語法補(bǔ)全, 版本對應(yīng) BUI的版本.

1.3.1版本新增 控件名加"-demo" 快速生成控件初始化及結(jié)構(gòu),只要把結(jié)構(gòu)復(fù)制到body對應(yīng)的位置就行.

重要: LinkIDE, Webstorm 這兩個編輯器的代碼不再更新. 推薦使用 vscode 編輯器.

安裝

1. bui-fast 插件

下載解壓以后,找到對應(yīng)的編輯器插件

點(diǎn)擊下載 BUI Fast 插件

在VScode安裝 推薦

方法1: 在應(yīng)用市場輸入 bui-fast , 安裝即可.

在HBuilderX的安裝

1. 頂部菜單--工具--html代碼塊, 把下載解壓的 BUI-Fast-Snippet-HbuilderX 目錄的 bui-html-snippets.json 復(fù)制進(jìn)去,保存;
2. 頂部菜單--工具--javascript代碼塊, 把下載解壓的 BUI-Fast-Snippet-HbuilderX 目錄的 bui-js-snippets.json 復(fù)制進(jìn)去,保存;

在Sublimetext安裝

Sublimetext 安裝 BUI-Fast

• Windows: 打開頂部 Sublime Text 菜單 --> Preferences --> Browse Packages , 復(fù)制BUI-Fast-Snippet-SublimeText目錄進(jìn)去就好.

• Mac: 打開頂部 Sublime Text 菜單 --> Preferences --> Browse Packages ,復(fù)制BUI-Fast-Snippet-SublimeText目錄進(jìn)去就好

在Atom,APICloud安裝

Atom ,APICloud Studio2 安裝 BUI-Fast

使用快捷鍵 mac: command + shift + p , windows: ctrl + shift + p;

• 輸入open your snippets, 回車; 打開下載的 bui-fast-snippet-atom/snippets.cson 文件, 復(fù)制內(nèi)容到 snippets.cson 文件里面, 保存即可.

在Webstorm安裝 (1.6.x 不再單獨(dú)更新)

Webstorm 安裝 BUI-Fast

方法1:

• 打開下載的 bui-fast-snippet-webstorm windows 目錄, 復(fù)制 settings.jar 到桌面.

• 打開頂部菜單 File -> Import Settings, 找到剛剛的 settings.jar

• 重新啟動webstorm 就可以了

方法2:

mac 的安裝有可能會出現(xiàn) import Settings 導(dǎo)入成功,但是無法使用的情況, 是因?yàn)閣ebstorm的導(dǎo)入把templates導(dǎo)入在根目錄了WebStorm2017.3/templates, 正確的目錄應(yīng)該是 WebStorm2017.3/settingsRepository/repository/templates.

復(fù)制 bui-fast-snippet-webstorm/templates 目錄,替換 資源庫/Preferences/WebStorm2017.3/settingsRepository/repository/templates

簡單使用示例

需要保存文件后綴為.html以后才能生效

ui-html 演示:

ui-page 演示:

bui-slide-demo 演示:

html觸發(fā)結(jié)構(gòu)代碼片段的指令格式為: 'ui-控件名'，之后點(diǎn)擊Tab鍵即可進(jìn)行補(bǔ)全 JS觸發(fā)代碼片段的指令格式為： 'bui-控件名'，之后點(diǎn)擊Tab鍵即可進(jìn)行補(bǔ)全

注意: 生成代碼后, 按Tab會定位在常用的編輯區(qū)域, 如果要寫另外的控件代碼, 要先按 Esc 再重復(fù)之前操作.

HTML 快速生成BUI控件結(jié)構(gòu)

(在body里面書寫) ui-accordion Tab ( 生成折疊菜單結(jié)構(gòu) )

<dl id="uiAccordion" class="bui-accordion">
  <dt class="bui-btn bui-box">
      <div class="span1"><!--折疊菜單--></div>
      <i class="icon-accordion"></i>
  </dt>
  <dd>
      <!--折疊菜單內(nèi)容-->
  </dd>
</dl>

注意:如果忘記控件的名字, 輸入 <ui- 會有提醒相關(guān)的控件 ( 生成的結(jié)構(gòu)記得刪掉第一個 < ).

JS 快速生成BUI控件初始化

(在script里面書寫)

bui-accordion Tab

var uiAccordion = bui.accordion({
  id:"#uiAccordion"
});

JS 快速生成完整demo ( 推薦, 1.3.0 新增 )

(在script里面書寫)

bui-list-demo <kbd>Tab</kbd> ( 生成list控件的初始化跟html結(jié)構(gòu) )

需要把html結(jié)構(gòu)剪切到對應(yīng)的位置去. 更多demo 請查看底部的控件列表

// 列表控件 js 初始化: 


var uiList = bui.list({
  id: "#uiList",
  url: "",
  data: {},             // 數(shù)據(jù)請求帶過去的參數(shù),分頁在field配置
  template: listTemplate,
  field: {
      page: "page",     // 分頁參數(shù)名
      size: "pageSize", // 分頁大小參數(shù)名
      data: ""          // 數(shù)據(jù)字段名
  }
});
// 列表模板
function listTemplate (data) {
  var html = "";
  $.each(data,function(index, el) {
      html += '<li class="bui-btn" href="index.html"><i class="icon-facefill"></i>'+el.name+'</li>';
  });


  return html;
}


// 列表控件 html 對應(yīng)的結(jié)構(gòu):


<div id="uiList" class="bui-scroll">
  <div class="bui-scroll-head"></div>
  <div class="bui-scroll-main">
      <ul class="bui-list">
      </ul>
  </div>
  <div class="bui-scroll-foot"></div>
</div>

JS 快速生成BUI常用方法

(在script里面書寫)

bui-ajax Tab ( 生成請求的方法 )

bui.ajax({
    url: "http://",
    data: {},//接口請求的參數(shù)


    // 可選參數(shù)
    method: "GET",
    timeout: 20000
}).done(function(result){


}).fail(function(result){


});

BUI JS方法及控件縮寫

JS觸發(fā)代碼片段的指令格式為： 'bui-控件名'，之后點(diǎn)擊Tab鍵即可進(jìn)行補(bǔ)全

控件簡單初始化

控件名: bui.accordion 我們只需要輸入 bui-accordion-demo Tab 就會生成完整的示例

控件完整demo縮寫一覽 (推薦 1.3.0新增)

控件名: bui.accordion 我們只需要輸入 bui-accordion Tab 就會生成最簡單的初始化腳本

BUI HTML結(jié)構(gòu)縮寫一覽

html觸發(fā)結(jié)構(gòu)代碼片段的指令格式為: 'ui-控件名'，之后點(diǎn)擊Tab鍵即可進(jìn)行補(bǔ)全

控件結(jié)構(gòu)縮寫

頁面結(jié)構(gòu)縮寫

布局結(jié)構(gòu)縮寫

表單元素結(jié)構(gòu)縮寫

新增結(jié)合數(shù)據(jù)驅(qū)動的標(biāo)簽, 1.6.x 從 b-text 改成 ui-b-text