「 HTML5 」大型 H5 項目的組件化開發思考

「 HTML5 」大型 H5 項目的組件化開發思考與總結

型 H5 項目開發的思考

不知不覺已經是第四次接手負責每年的大型 H5 活動，這也意味著 4 年啦啊啊啊啊，哎時間過得真是太快，也是應該做一點總結了。

每年都會有大型的 H5 項目上線，這一些項目的邏輯在一般的情況下，它們的差別不會很大，但是每一次都會有不同的樣式、條件和玩法。如果每一次大活動都是寫死邏輯且不可復用，下一次 H5 項目過來又再寫一次其實就是很沒有必要的事情。

如果能把這一些做過的組件做成通用可配置的，即插即用。那么肯定是會極大的提高開發效率，同時項目的穩定性也有保證。只不過組件的代碼邏輯就會比較復雜，開發難度會比較高，就單單組件內的一個按鈕就需要考慮到這個按鈕的顏色，大小，按鈕內的字體各種樣式和背景色以及這按鈕是不是設計狀態變化，若有還要考慮這一個狀態變化的邏輯或者是一些聯動的可能。所以，一個通用組件需要考慮和實現的邏輯就很多。

舉個例子，比如今年的 H5 有一個 “我的獎品” 模塊 ( 頁面 or 彈窗 )，這個模塊里面有的獎品的信息展示、時間的展示、數量的展示以及底部還有一些其他的按鈕。以下是我截取兩次不同的活動的“我的獎品”列表展示模塊。

這兩種樣式的組件，大致的框架上都是一樣的，點擊側邊欄的 “我的獎勵” 和 “我的背包”，只是展現形式和展示數據類型以及按鈕的點擊事件是不一樣的。

所以，如果第三次 H5 ，或者以后的 H5 都寫一遍這樣的東西意義不大。所以，這樣使用頻率比較高的模塊，就必須和業務方討論。我們可以把這樣的模塊定出一個基本的交互和原型，統一做成一個通用列表展示組件，這個組件必須支持通用樣式的展示，也需要支持特殊的樣式展示，例如下面的情況

最左邊的也就是正常的列表樣式，右邊的就是一些特殊的卡片和文字樣式，所以，一個組件需要考慮的東西有很多。

這里叫列表展示組件而不叫“我的獎品組件”的原因是：我們只需要通過參數控制它需要展示什么的內容、標題是什么、按鈕名稱是什么、點擊之后的邏輯是什么，而不是只局限于我的獎品列表，它也可以用于其他數據的展示。同時，這樣的通用組件可以適用于各種 H5 。組件拿來即用或者用于一些 H5 自動生成的平臺，只要根據文檔傳參數就可以了。

通過 config 控制具體的展示名字還有按鈕id的標記區分事件，data 初始化組件的列表，與業務區分開來這里就變成了一個很純粹的列表展示組件，可以展示任意的數據，只要按照格式傳參就行。這里只是寫一個很簡單的 DEMO ，后面會提到入參和函數綁定。

規劃公共組件

拿到設計稿之后找出通用的模塊，再根據類似模塊之間的差異定出一個通用的規則。下面是本次大型 H5 的設計稿總覽：

第一大類：分組賽，資格賽，彈窗，規則和投票等

第二大類：沖刺賽，總決賽，PK模塊等

此次大型 H5 的分為了幾個大階段，分組賽，資格賽，沖刺賽和總決賽。看上去是非常多內容的，所以需要找出相似的模塊，再和業務側溝通從這幾個賽段來看，可以抽離成組件的是

TAB 切頁組件
進度條組件
列表記錄組件
時間軸組件
排行榜組件
倒計時組件
投票組件
側邊欄懸浮組件
pk 模塊組件
我的信息展示組件
頂部組件
吸底組件
按鈕組件
主播展示組件

這里就拿一部分的組件描述一下實現思路，全部寫的話就太多了，而且有些地方邏輯實現上也是比較像的。

組件的通用參數

組件傳入參數

一個通用組件所需要的配置參數一般歸納為幾種，最重要的是這個組件的所有需要使用的值，也就是這個初始化參數。其次，是這個組件的一些樣式配置或者是全局參數輔助使用，還有一些情況需要特定的屬于這個組件的 key 。當然，不是說樣式和全局參等等是不重要的參數，而是根據業務的需求來定，可能樣式的參數才是重點這個也是可能的，具體的還得從業務或者這個組件本身的性質考慮，只是在做組件的時候優先考慮功能的實現。以下是我封裝通用組件的一個習慣，分別綁定的參數是 data, styleForm, commonStyle, global, componentKey。以下是一個組件綁定參數和方法的例子：

<template>
  <head-section
    :data="headData"
    :global="global"
    :styleForm="headConfig"
    :commonStyle="headCommonStyle"
    :componentKey="headComponentKey"
    @methods="headMethods"
  />
</template>

<script>
export default {
	data(){
		return {
			// 全局配置
			global: {},
			
			// 頂部組件配置
			headData: {},	
			headConfig: {},
			headCommonStyle: {},
			headComponentKey: {},
		}
	}
}
</script>

data 組件初始化參數

data 是這個組件傳入的初始化參數或者是渲染組件的所有數據，類型是 Object 。組件可以用初始化參數通過 ajax 獲取數據也可以通過 class 執行初始化邏輯或者是直接將數據綁定在這個 data 中。

<script>
// 組件
export default {
props: {
  data: {
    type: Object,
    default: ()=> ({
    	// list:[],                example
    	// total: 10               example
    }),
   },
}
</script>

styleForm 組件的配置參數

styleForm 這個是組件的配置信息，比如這個組件的一些背景、樣式信息以及一些固定的數據不會發生變化的數據。數據格式類型是 Object 。

<script>
// 組件
export default {
props: {
  styleForm: {
    type: Object,
    default: ()=> ({
    	// styles: {},                example
    	// bg: './images/xx.png'      example
    }),
   },
}
</script>

commonStyle 通用樣式配置參數

commonForm 這個參數是通用的樣式配置，比如，控制這個組件的寬、高以及背景色等等。這個我們在自己在獨立開發的 H5 的時候，會按照這樣的參數格式配置。目的是讓組件更加通用，適用于不同的地方，比如一些 H5 的自動生成平臺。因為，在互聯網大廠里 H5 的開發如果是比較簡單的頁面，是不會單獨用人力去開發的，而是通過平臺配置生成 H5。我們需要做的就是提供各種各樣的組件，讓業務同學去配置使用。所以，平臺的配置是以每個功能模塊劃分，commonForm 可以接入他們的平臺的接口數值，直接在平臺上控制這個組件的寬、高、是否居中等等的基礎樣式。

<script>
// 組件
export default {
props: {
  commonStyle: {
    type: Object,
    default: ()=> ({
    	// width: 300,                example
    	// height: 20                 example
    }),
   },
}
</script>

global 全局屬性

全局屬性指的是這個項目的唯一標記，適用于項目中的任意一個地方。比如說這個項目的 id ，他可能在做上報操作或者在請求接口的時候需要帶上這個參數。那么就由 global 這個參數統一接收。類型也是 Object 。

<script>
// 組件
export default {
props: {
  global: {
    type: Object,
    default: ()=> ({
    	// page_id: 111,                example
    }),
   },
}
</script>

componentKey

componentKey 是組件的標記，主要用于在做區分組件的時候，使用比如上報數據。同時也可以用于一些非常特定的邏輯，提供臨時的解決方法。舉個非常簡單例子：業務方需要畫 10 個圓且背景都是白色，突然間提出要在第 9 個圓中某個位置加上一個黑色的點，其他不變。這樣既不合理也不通用還砍不掉的需求，臨時的解決方法就是通過 key 寫一個 if else ，之后再說。

<script>
// 組件
export default {
props: {
  componentKey: {
    type: [String,Number],
    default: 1,                     // example
   },
}
</script>

@methods 方法綁定

在組件內通過輸出按鈕 id 或者事件類型，由上一層組件進行執行特定邏輯，這樣的好處是通用的樣式和 DOM 與 JavaScript 分離，不含有業務邏輯一下次也可以直接復用這個組件，不需要再去改。

組件

<template>
    <div class="head-section" style="padding: 0px 0px">
        <div
            class="lottery-btn"
            @click="onClickBtn('lottery', 'normal')"
        ></div>
        <div
            class="nav-btn rule-btn"
            @click="onClickBtn('rule', 'page')"
        ></div>
    </div>
</template>
<script>
export default {
  methods: {
    onClickBtn(id, type='page', eventParams={}) {
      this.$emit('methods',{
        id: type,
        value: eventParams
      });
    },
  },
}
</script>

父級組件

<script>
export default {
  methods: {
    headMethods($Event) {
      const { id, value }=$Event;
      const page=(params)=> { 
        this.goPage();
      };
      const anchor=(params)=> {
        this.goAnchor();
      };
      const clickEventMap={
        'page': page,
        'anchor': anchor,
      };
      // 區分不同事件類型 傳參
      clickEventMap[id](value);
    },
    goAnchor(params) {
    	// ...
    },
    goPage(params) {
    	// ...
    }
  },
}
</script>

頁面頂部組件

組件布局和實現：

組件封裝思路

首先從功能上看，這個組件只能適用于獨立開發的 H5 ，它不適合 H5 生成平臺。或者說這樣的組件在 H5 生成平臺完全沒有意義。因為，左邊的 icon 和右邊按鈕列表，他們在 H5 生成平臺里面，這些按鈕都是靠使用者自己手動配置的地方。例如：左邊的 icon 就是使用一個按鈕組件拖拽進去，再加上一個跳轉事件。右邊的 btn-list 可以看成是 3 個獨立按鈕，也和上面一樣用一個按鈕組件拖拽進去，加上一個跳轉事件，再連續配置 3 次。

但是，這一次是獨立開發，所以只能按照可復用定制模版的思路來實現。需要考慮的地方是：

頭圖片支持背景配置
左邊的按鈕支持背景設置，文案設置和顯隱設置。
右側的按鈕列表中支持單個按鈕的背景設置，文案設置和顯隱設置以及支持再新增加多個按鈕的情況下可復用樣式。

如圖：對應的每個模塊使用一個 ID 作為區分，其中 btn-list 包含以 btn-x 為唯一的標記，內容就是控制這個按鈕的背景，顯隱和文案。

之后再通過 headData 來渲染 btn-list ，數據格式為：

<script>
export default {
  data() {
    return {
    	headData:[
    		{
    			id: 'btn-1',
    			value: {
    				url: '...'
    			}
    		},
    		{
    			id: 'btn-2',
    			value: {
    				url: '...'
    			}
    		}
    		....
    	]
    }
  },
}
</script>

它的核心思想就是通過 ID 關聯數據，通過 ID 關聯配置。這有點像是數據庫里面的主鍵，可以根據這個主鍵可以查詢或者關聯查找其他的數據表。

細節實現要點

寫一個通用的方法，在后面如果有新增的按鈕，可以直接通過傳參 (第幾個按鈕) 控制按鈕的位置。

@function head-nav-btn-top($number) {
  $top: 15;
  $boxHeight: 46;
  @if($number==1){
    @return 385;
  }
  @return 385 + (($top + $boxHeight) * ($number -  1));
}
// .class
top: remit(head-nav-btn-top(1));
top: remit(head-nav-btn-top(2));
top: remit(head-nav-btn-top(3));

錨點跳轉到參數指定位置

headMethods($Event){
  const { id, value }=$Event;
  
  if (id==='lottery-btn') {
  	const scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
  	window.scrollTo(scrollTop, this.$refs[value].offsetTop);
  }
},

倒計時組件

組件布局和實現：

組件封裝思路

倒計時組件在邏輯上是比較簡單的，更多需要考慮倒計時的展示樣式，因為在 H5 里面，每種設計的風格或者業務需求不一樣，不可能一直沿用一種樣式的倒計時，比如這樣

所以需要考慮的點是：

倒計時的多種展示樣式和展示形式，比如是否需要拼接標題和展示天數或者秒數。
倒計時在結束的時候需要執行的下一步邏輯。

細節實現要點

在計算倒計時的方法上有兩種，第一種是獲取本地手機時間再寫一個 inteval 函數遞減計算，第二種是使用 interval 每秒都向服務器進行時間獲取計算出剩余時間。這里我一般會選擇后面那種，因為，首先本地時間不一定是正確的，也有可能是人為的去修改了系統的時間，其次，本地的 interval 延遲時間不一定準確。比如我們設定 1000 毫秒執行，但是由于部分手機本身的原因，這里可能存在著誤差，設定的是 1000 毫秒，而在實際的執行中，它相當于 800 毫秒。那么就會導致一個問題，本地的時間越算，誤差越大，如果在頁面中的時間停留較短那問題不大，但是如果在頁面的停留時間很長，到了最后看上就是一個大大的 BUG 。所以，每次都讀取服務器時間是比較靠譜的。

實現要點：

<template>
  <div class="countdown-section">
    <div
    	v-if="styleForm.type==='normal'"
      :style="[{ 'background-image': `url(${styleForm.bgUrl})` }]"
      :class="['countdown-section-bg', `width-${styleForm.bgWidth}`]"
    >
      <div class="countdown-content">
        <p class="time-front" v-text="styleForm.timeFront"></p>
        <p class="time" v-text="countTime"></p>
        <p class="time-end" v-text="styleFrom.timeEnd"></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    countdown() {
      ...
      this.timeStr={}   //data
      this.format=['hours', 'minutes','seconds']  // props
      for(let i=0 ;i < format.length; i++ ){
      	this.timeStr=this.time[format[i]];
      }
    },
  },
}
</script>

節點樣式方面：讓 countdown-content 的內容居中，倒計時前后可以配置任意文案，再給 clase="time" 加上一個寬度，這樣的好處是避免了在數字變化的時，因倒計時數字切換發生的抖動而影響到了整個倒計時文案的抖動問題。另一個是，在倒計時外層再包一層 v-if 樣式，這個是來拓展倒計時多種樣式的功能。

邏輯方面：傳入一個時間格式的配置項，比如是否需要展示天數或者秒數，使用一個循環指定數據更新。最后的時間由 computed 計算屬性將 day, hours minutes , seconds 計算出來。同時，倒計時為零的時候支持配置一個方法，例如，最常見的操作就是刷新當前頁面或者是執行跳轉。

進度條組件

組件布局和實現

組件封裝思路

進度條組件和倒計時組件一樣，屬于邏輯比較簡單而比較注重樣式上的一些配置。進度條組件需要考慮的點是：

背景色支持漸變配置
進度條每個節點上面和下面的文案與樣式支持配置
進度條的節點所有內容支持顯隱

細節實現要點

<template>
<div class="progress-content">
  <div class="progress">
    <div class="progress-line" 
    :style="{ width: `${currentProgress}%`, backgroundImage: `linear-gradient(
    to right,
    ${styles.lineStyle.begin},
    ${styles.lineStyle.end}
    )`}"></div>
    <div class="progress-state">
    	<div v-for="(item, index) in styles.list"
    :key="`${index}buttom`"
    :style="[{ 'background-image': `url(${+index <=+current ? styles.dot.high: styles.dot.normal})` }]"
    class="state"
    >
        <div v-if="item.topText" :style="styles.top[index]" :class="['top']" v-text="item.topText"></div>
        <div v-if="item.bottomText" :style="styles.bottom[index]" class="buttom" v-text="item.bottomText"></div>
    	</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  methods: {
   
  },
}
</script>

首先，通過 props 進來的 styles參數，獲取到這個進度條的顏色，為了進度條能有更多的顏色配置，就是用漸變色來配置，只要傳入一個開始和一個結束的色值。

節點的的樣式和文案全部通過數組渲染，來達到通用配置的目，以下是我截取簡易的配置數據

const progress={
    top: [
        {
            color: '#f5ddff',
        },
        {
            color: '#d6a5ea',
        },
				....
    ],
    bottom: [
        {
            color: '#d6a5ea',
        },
        {
            color: '#d6a5ea',
        },
        ....
    ],
    dot: {
        high: '',
        normal: '',
    },
    list: [
        {
            topText: 'Switch',
            bottomText: '0',
            hidden: false
        },
        {
            topText: '2部',
            bottomText: '10000',
            hidden: false
        },
				...
    ],
    lineStyle:{
         begin:'rgba(255, 166, 248, 1)',
         end:'rgba(255, 58, 210, 1)'   
    }
};

吸底組件

組件布局和實現：

組件封裝思路

吸底部組件和頂部組件一樣，它不適用于 H5 自動生成平臺。吸底組件和頂部組件它們更像是一個容器，在這個容器里面配置其他的組件，所以這里還是做成一個可復用的定制模版。需要考慮的一些點：

最左邊部分的頭像和和昵稱可以寫死固定下來同時需要配置默認打底狀態數據。
中間部分的票數做成可配置的情況可以展示 1 行或者 2 行以及支持顯隱。
最右邊部分的按鈕同樣支持可配置 1 個或者 2 個以及支持顯隱。
可配置背景色

細節實現要點

他們的數據格式是：

<script>
export default {
  data() {
    return {
    	// 數據源綁定
    	suspensionData: {
        userSection: {
        	name: 'xxxx',
        	url: '....png',
        },
        textSection: [
          {
          	'text': `已貢獻助力票數: 600`
          },
          {
          	'text': `剩余助力票數: 400`
          }
        ],
    	},
      // 數據配置樣式設定
      suspensionConfig: {
      	bg: '....png',
        btn: [
          {
            'id': 'get',
            'url': '....png',
            'text': '獲取助力票'
          },
          {
            'id': 'exchange',
            'url': '....png',
            'text': '兌換助力票'
          }
        ]
      },
    },
  },
}
</script>

中間的文字展示和右邊的按鈕使用 Array 的形式渲染

<template>
...
  <div
    v-if="btn && btn.length > 0"
    :class="['item-right, `length-${btn.length}`']"
    >
    ...
  </div>
</template>
<style lang="scss" scoped>
	... 
	.btn{
		...
		&.length-2{
			justify-content: space-between;
		}
		&.length-1{
			justify-content: space-evenly;
		}
	}
</style>

在樣式上線配置好 length-x 情況下是居中還是均分的樣式。中間的文字也是同樣的方法，只是這里就多了一些細節的考慮，比如：字體容器的溢出處理和行間距的一些設定。

頭像和昵稱按理也可以做一些設定，但是這里根據實際的需求來說沒有必要，所以這里就直接固定下來。

投票組件

組件布局和實現

組件封裝思路

這個 H5 的投票功能相對簡單，只有一個增加/減少和最大值。

在做這個組件之前，我其實更想把它做成這樣的形式。如圖：

它可展示圖片，還可以展示選擇票的類型，同時下面還可以配置拓展按鈕也可以綁定執行事件，看上去非常的好。但是后來想了一下，還是覺得這樣投票組件的邏輯會有點冗余，既然是一個投票組件應該不就有其他的東西。

所以我也在原來的基礎上結合這個組件多加了一投票的類型選擇。就是這樣：

這樣看上去邏輯簡單，而且也確實多了是一個實用的功能。所以，這個組件需要考慮的點是：

增加/減少和最大值的計算
類型選擇同時可以支持拓展以及默認隱藏使用。

細節實現要點

<template>
...
<!-- 票數編輯區域 -->
<div class="ticket-section">
  <div class="ticket-edit">
    <input class="ticket-text" v-model="ticketInfo['count']"/>
    <div :class="['ticket-add']" @click="ticketAdd()" >
  		<p class="add">+</p>
  	</div>
    <div :class="['ticket-min']" @click="ticketMins">
      <p class="min">-</p>
  	</div>
  </div>
    <div :class="['ticket-max', 'allow']">
      <p class="max" @click="ticketAdd(true)">MAX</p>
  	</div>
  </div>
  
  <!-- 類型選擇區域 -->
  <div class="ticket-type-section">
    <div v-if="typeList.length > 0" class="ticket-type-content">
      <div v-for="(item,index) in typeList" :key="`type${index}`"
        class="ticket-type-item">
      <div :class="['box',item.active? 'active': '']"></div>
      <div v-text="item.text"></div>
    </div>
  </div>
</div>
...
</template>

首先用一個數組渲染類型列表，編輯區域票數區域比較重要的的就是做好數字上的校驗和統一管理檢驗失敗的提示文案。

const tipsMap={
    error: '親！剩余助力票不足，請重新輸入！',
    success: '助力成功！',
    errorNum: '必須是一個數值,注意不能有空格',
    errorMax: '親，剩余助票不足，請重新輸入',
    errorZero: '親，剩余助票不足，請去獲取哦！',
};

const validCount=(num)=> {
this.$set(this, 'showTips', false);
  const regExp=/^\+?[1-9][0-9]*$/g;
  if (+this.ticketInfo.count===0) {
   return false
  }
  if (!regExp.test(this.ticketInfo.count)) {
  	this.toast(tipsMap['errorNum'])
  	return false;
	};
  if (+this.ticketInfo.count > +this.ticketInfo.left){
  	this.toast(tipsMap['errorMax'])
  	return false;
  };
  // 檢驗通過
  return true;
  }
},
validCount(1000);

排行榜組件

組件布局和實現

組件封裝思路

排行組件是這一個活動邏輯最復雜的一個，他除了需要支持到這個活動展示的列表數據，也需要支持到以后其他 H5 的數據展示，也就是支持拓展。比如：在這個排行榜中，第一列是一個頭像列表類型，第二列是一個文字類型，第三列也是一個頭像類型，第四列是一個按鈕類型。那么，在組件初始化的時候通過 config 配置定義好每一列的類型和樣式。如圖：

const rankConfig={
    init: [
          {
            type: 'headList',
            key: 'head',
            name: '超能',
            tips: 'live',
            style: {
              width: '25%',
              color: '#ffffff',
              background: '#c69494',
            }
          },
          {
            type: 'text',
            key: 'score',
            name: '總助力值',
            style: {
              width: '25%',
              color: '#ffffff',
              background: '#e53de7',
            }
          },
				....
    ]
};

這一段是部分配置

type 是數據類型，比如純文字，頭像或者按鈕。
key 是對應實際數據的 key，通過這個 key 讓這一列展示這個字段的內容。
name 是這一列的標題
style 是這一列的具體樣式配置參數。

以后無論是需要怎么樣的一個排行榜，先查找文檔看看是不是都有這樣類型的樣式，沒有的話拓展，有的話只需要傳入配置參數之后，再傳入具體的數據就可以跑起一個排行榜的組件。

從功能上看他需要支持：

支持數據分頁
支持數據展示和拓展展示的數據類型
點擊事件通用配置

細節實現要點

標題部分主要代碼：

<template>
...
<div v-for="(item, index) in styles.init"
     :style="item.style"
     :class="['column-item', 'column-type']"
     :key="`${index}column`">
     
	<div class="item-title">
		
    <p class="title-text" v-text="item.name"></p>
  	<slot class="title-tips" :name="`sub-${item.key}`"></slot>
  </div>
</div>
</template>

使用配置項循環列出列表的標題，里面有個 icon 的提示圖標，使用插槽的方式插入，這里需要用 sub-${item.key} 作為一個區分，需要顯示 tips icon 的標題才展示。這里只能用 key 作為區分不能用 type，原因是一個列表里面是有可能有相同的 type 列的。

列表的渲染，這里需要各種類型的展示再抽離成一個小組件，比如將 text ，headList 等等抽離成一個小組件，需要的時候再引用。這樣做的好處出邏輯分開容易維護，小組件容易拓展，排行榜的代碼也不會過多，如圖：

他的核心代碼如下：

<template>
...
<div
class="column"
v-for="(item, index) in info.list"
:key="`${index}rankList`"
>
  <div
  v-for="(styleItem, styleIndex) in styles.init"
  :key="`${styleIndex}rankConfig`"
  :class="'column-item'"
  >
    <HeadList
      v-if="styleItem.type==='headList'"
      @methods="onClickEvent(item.key, item)"
      ><HeadList>

    <Text v-if="styleItem.type==='text'"></Text>

    <ListBtn v-if="styleItem.type==='btn'"></ListBtn>
  </div>
</div>
</template>

第一層循環遍歷所有列表數據，第二層循環遍歷配置表，根據類型渲染具體內容，之后每一個塊的內容都通過小組件形式引入。

鍵字: web組態編輯器集成,web組態頁面集成,web可視化組件,web SCADA前端和后端,web可視化編輯器

web組態編輯器web圖形可視化軟件

web可視化編輯器，又稱WEB組態可視化軟件，即用戶可以在web頁面編輯器上直接搭建出一個行業應用系統出來。web組態可視化編輯器能夠運用在哪些場景中呢？

web組態可視化編輯器為工程用戶提供了二次開發的可能，不用編程、不用寫代碼，通過可視化界面即可生成web頁面，開發出一個應用系統來，在電力、物聯網、大數據平臺有廣泛的應用。

一個好的應用系統，應該給用戶提供業務自定義的工具。一個好的應用系統，應該采用圖文并茂的方式將復雜的業務邏輯直觀化、可視化。

web可視化編輯器

web組態軟件是基于瀏覽器的應用，通過瀏覽器操作組態編輯器、瀏覽組態畫面，實現工程管理、設備組態編輯以及設備組態運行三大功能。換句話說，web組態軟件分編輯態和運行態。通過實現圖元組態、可視化圖表組態、數據庫組態的配置與關聯，網關采集數據的實時推送，實現基于Web服務的實時數據監控和可視化展示，服務端的分項目分權限的多用戶訪問等等。

從用戶操作與界面呈現的角度來說，WEB組態軟件采用標準HTML5技術，基于B/S架構進行開發，支持WEB端跨平臺呈現，在瀏覽器端完成便捷的人機交互，簡單的拖拖拽拽即可完成web可視化頁面的編排設計工作，讓用戶不需要編寫計算機程序，不需要編程知識，就能通過拖拽和配置實現應用系統的功能。

從軟件架構來說，WEB組態軟件包括前端和后端。

## 前端：主要實現圖形可視化編輯，包括圖元、圖表等等。

## 后端：與數據聯動，支持多數據源，包括數據庫或設備實時采集等等。

B/S結構的Web SCADA系統必須具備以下特征

1,對不同控制對象均可方便組態 ,只是在算法組態時調用不同圖形元素。

2,控制人員用可視化語言進行“畫圖”編輯 ,鼠標連線。

3,模塊參數可動態改變。
4,開放性 ,可接入用戶自定義模塊。
5,與圖形組態軟件溶為一體 ,組成易用的圖形仿真組態軟件。
6,支持圖形化建模，自動化程度高，可維護性好；
7,支持在線模塊級和源代碼級的調試；

web組態可視化軟件集成Q&A

web組態是基于ActiveX實現的嗎？

Activex是由微軟開發，所以在支持上，目前原生態支持的只有IE，其他瀏覽器想要支持activex, 需要額外做一些設置或安裝補丁包。并且從2015年微軟Edge瀏覽器不再支持ActiveX。

web組態基于BS架構，采用html5和JavaScript，具有良好的集成性和技術前瞻性。

web組態的圖元庫可以擴展嗎？

web組態支持圖元自擴展，SVG格式，以支持圖形縮放。

多比物聯web組態可視化平臺圖元支持擴展

更多的web組態集成案例，見web SCADA。

總結：web組態編輯器可視化編輯器軟件為工程用戶提供了二次開發的可能，不用編程不用寫代碼，通過可視化界面即可生成web頁面。web SCADA組態編輯器軟件，經過數年的積累和行業用戶的需求定制，包括完備的前端（圖形可視化）和后端（與數據聯動，數據庫或實時采集）。web組態可視化平臺基于B/S架構，采用html5和JavaScript，具有良好的集成性。

月13日，“互聯網+智能硬件”研討會在北京召開。會上，中國信息通信研究院聯合百度、華為、京東等企業共同倡議發起眾創空間聯合實驗室，以整合智能硬件芯片、互聯網開放平臺、大數據分析等物聯網生態的建設和標準的研究。云適配作為一家優秀創業公司受邀參與了本次研討會，并分享了如何“基于HTML5技術幫助智能硬件開發更高效”的議題。

智能硬件市場前景看好，發展存在瓶頸

智能硬件的火爆超出很多人包括業內人士的預期。隨后，也攪動了所有的科技公司、硬件制造廠商和創業者的心。當前的智能硬件行業呈現多極化的發展趨勢。一方面，由于智能硬件創業門檻較高，因此，各企業紛紛結成產業聯盟，以求優勢互補，謀求突破;另一方面，智能硬件產品種類多、技術多樣化，標準不統一，各聯盟均致力于建立能夠兼容更多智能設備的硬件管理服務平臺，以求吸引更多的設備和服務加入。

在這樣的整體環境下，首要問題是解決統一的標準，在可接受的范圍內，盡可能將硬件設計、通信協議、服務接口等進行規范化，以減少重復開發等不必要的資源消耗。

在標準難以統一的領域，需要尋求應用層解決方案，通過服務的統一化接入，屏蔽智能設備在硬件層面的異構性，使服務與設備解耦和，從而更大程度上整合資源，提供高質量服務。

眾所周知，智能硬件已經不再是智能手環、手表等便攜設備那么簡單，更是包括了智能電視、智能家居、智能汽車、醫療健康、智能玩具，甚至是機器人等。但智能硬件的多樣性發展同時也面臨另外一個問題，如何解決在信息碎片化的情況下，在不同屏幕上有統一的信息展示。

智能硬件的發展很大一塊程度上依賴于其軟件的開發，而高效實現信息展示和用戶體驗優化則更是體現其智能所在。但如今，僅移動端系統就千差萬別，要實現不同系統和終端屏幕的獨立開發，無論是對于企業還是開發者，成本都十分高昂，難度非常大。

組件化應用優化前端開發，為智能硬件產業鏈發展提速

針對在智能硬件開發過程中的跨系統、跨平臺和不同屏幕的適配問題，如果有一種開發方式解決上述問題，則智能硬件的發展速度便能提上另一個階段。據云適配首席布道官吳育瑞表示，Amaze UI 是為開發者定制的基于HTML5標準的前端開發工具，它遵循的HTML5標準具備天然的跨屏性，可以滿足跨屏、跨平臺的應用開發。此外，Amaze UI 遵循組件式開發理念，通過拆分、封裝了一些常用的網頁組件，開發者只需復制代碼便可將這些跨屏組件寫入到自己的應用中。

據悉，Web組件化(Web Components)理念，自Google在2013年的I/O大會上提及起，直至去年HTML5規范的正式定稿，Web開發也隨之異常火爆，讓Web組件化的關注度也隨之水漲船高。Web組件化其實一直都被國外互聯網公司看好，因為從軟件架構上、開發效率上、代碼可維護性上都是一個更好的選擇。

在談到有關Amaze UI 的使用時，云適配吳育瑞表示， Amaze UI并遵循React所推崇的“一切皆組件” 的組件化理念，它以開源的形式提供了包含 25個 CSS 組件、26個 JS 組件，更有21款包含近 60 個主題的 Web 組件, 使開發者不需要再花費時間精力去編寫日歷等的代碼，便可以直接引用組件。此外，Amaze UI 將在后續的開發工作中，還將陸續推出Amaze UI for App、Amaze UI組件市場等更多提高開發效率的工具。

互聯網+智能硬件的發展為“大眾創新、萬眾創業”開辟了一個新的藍海市場，但是也正因為互聯網的介入使信息流轉效率更高，只有更快更高效的開發才能為領先市場和占領市場創造優勢條件。有了專注做最高效的開發，滿足開發者與時俱進的需求的開發工具，整個智能產業鏈高速發展指日可待。

原文出自【比特網】，轉載請保留原文鏈接：http://net.chinabyte.com/82/13509582.shtml

在線咨詢

上一篇：tcpdump實戰
下一篇：Spring Boot 項目打包成war如此簡單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「 HTML5 」 大型 H5 項目的組件化開發思考

型 H5 項目開發的思考

規劃公共組件

組件的通用參數

組件傳入參數

data 組件初始化參數

styleForm 組件的配置參數

commonStyle 通用樣式配置參數

global 全局屬性

componentKey

@methods 方法綁定

頁面頂部組件

組件布局和實現：

組件封裝思路

細節實現要點

倒計時組件

組件布局和實現：

組件封裝思路

細節實現要點

進度條組件

組件布局和實現

組件封裝思路

細節實現要點

吸底組件

組件布局和實現：

組件封裝思路

細節實現要點

投票組件

組件布局和實現

組件封裝思路

細節實現要點

排行榜組件

組件布局和實現

組件封裝思路

細節實現要點

web組態編輯器web圖形可視化軟件

web組態可視化軟件集成Q&A

您的項目需求

「 HTML5 」大型 H5 項目的組件化開發思考