?今天我和大家分享一下最近 H5-Dooring 的更新內容, 方便大家更高效的使用它來制作屬于你的H5頁面.

• 屬性編輯面板UI升級, 支持展開收起, 支持自由拖拽
• 長文本組件支持點擊交互
• 項目工程配置優化

接下來我會重點介紹屬性面板的UI升級, 能給非技術人員在搭建頁面的過程中帶來哪些幫助.

1. 屬性編輯面板UI升級

像傳統的搭建平臺, 屬性面板大部分時是固定在右側的, 對于H5搭建平臺來說, 固定模式完全夠用, 也不會影響用戶搭建效率, 但是對于PC端頁面搭建來說, 因為畫布尺寸相對比較大, 并且對于小屏幕設備, 如果進行畫布等比例縮放, 不太利于用戶預覽和精準搭建, 如果屬性面板固定右側會導致畫布一部分區域被遮擋, 所以為了更好的用戶體驗和搭建效率, 我設計可拖動和支持展開收起的屬性面板, 對之前的固定模式進行了升級, 如下:

這樣我們在拖動畫布或者把畫布調成PC端大小的時候, 我們就能輕松控制屬性面板大小和位置了.

2. 長文本組件支持點擊交互

之前對Dooring低代碼組件庫中的文本組件, 圖片組件, 標題組件, 按鈕組件, 圖標組件 都支持了事件交互功能:

• 跳轉鏈接
• 打開彈窗
• 撥打手機號
• 返回頂部
• 自定義代碼

對于長文本組件, 由于前期的組件設計目標即為純展示, 所以沒有對事件交互進行支持, 由于用戶陸陸續續對的反饋, 最新近統一對長文本也進行事件支持. 如下:

3. 項目工程配置優化

這塊也是Dooring一直在迭代的一個方向, 每次功能迭代都會伴隨工程化的持續優化, 保證項目穩定性的同時具備較高的代碼質量.

工程化我們采用的是 umi3.0, 所以我們在 .umirc.ts 文件下統一管理編輯器相關的公共配置, 這里我們需要關注一下文件中的 define, 主要用來提供自定義配置:

define: {
    START_ENV,
    lang,
    // 配置h5端訪問的域名
    h5Domain: 'xxx.xxx.xx',
    // 設置當前版本號
    curVersion: dooringVersion,
    // 備案信息
    copyright: '鄂xxxxxx-3',
    // 是否顯示更新彈窗
    showUpdateModal: true,
    // 更新日志
    updateList:  [
      "1. 新增表格組件",
      "2. 國際化優化",
      "3. 表單詳情頁支持內部滾動",
      "4. 個人圖片庫性能優化",
      "5. 下載代碼功能優化"
    ],
    // 網站logo地址
    logo: 'http://cdn.dooring.cn/dr/logo.ff7fc6bb.png',
    // 入口頁面是否展示贊助品牌和版權提示
    showAdsAndTip: true,
    // 登錄時獲取登錄碼的二維碼
    qrcode: 'http://cdn.dooring.cn/dr%2Fcode1.png',
    // 默認語言
    defaultLocale: 'zh-CN',
    langMap: langMap
  },

后續H5-Dooring會持續從架構, 功能, 生態, 智能化幾個緯度持續迭代, 也會持續輸出系列教程和技術產品分享. 如果大家對低代碼零代碼感興趣, 也歡迎隨時和我反饋.