整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
不知不覺已經(jīng)是第四次接手負責每年的大型 H5 活動，這也意味著 4 年啦啊啊啊啊，哎時間過得真是太快，也是應該做一點總結了。
每年都會有大型的 H5 項目上線，這一些項目的邏輯在一般的情況下，它們的差別不會很大，但是每一次都會有不同的樣式、條件和玩法。如果每一次大活動都是寫死邏輯且不可復用，下一次 H5 項目過來又再寫一次其實就是很沒有必要的事情。
如果能把這一些做過的組件做成通用可配置的，即插即用。那么肯定是會極大的提高開發(fā)效率，同時項目的穩(wěn)定性也有保證。只不過組件的代碼邏輯就會比較復雜，開發(fā)難度會比較高，就單單組件內(nèi)的一個按鈕就需要考慮到這個按鈕的顏色，大小，按鈕內(nèi)的字體各種樣式和背景色以及這按鈕是不是設計狀態(tài)變化，若有還要考慮這一個狀態(tài)變化的邏輯或者是一些聯(lián)動的可能。所以，一個通用組件需要考慮和實現(xiàn)的邏輯就很多。
舉個例子，比如今年的 H5 有一個 “我的獎品” 模塊 ( 頁面 or 彈窗 )，這個模塊里面有的獎品的信息展示、時間的展示、數(shù)量的展示以及底部還有一些其他的按鈕。以下是我截取兩次不同的活動的“我的獎品”列表展示模塊。
這兩種樣式的組件，大致的框架上都是一樣的，點擊側邊欄的 “我的獎勵” 和 “我的背包”，只是展現(xiàn)形式和展示數(shù)據(jù)類型以及按鈕的點擊事件是不一樣的。
所以，如果第三次 H5 ，或者以后的 H5 都寫一遍這樣的東西意義不大。所以，這樣使用頻率比較高的模塊，就必須和業(yè)務方討論。我們可以把這樣的模塊定出一個基本的交互和原型，統(tǒng)一做成一個通用列表展示組件，這個組件必須支持通用樣式的展示，也需要支持特殊的樣式展示，例如下面的情況
最左邊的也就是正常的列表樣式，右邊的就是一些特殊的卡片和文字樣式，所以，一個組件需要考慮的東西有很多。
這里叫列表展示組件而不叫“我的獎品組件”的原因是：我們只需要通過參數(shù)控制它需要展示什么的內(nèi)容、標題是什么、按鈕名稱是什么、點擊之后的邏輯是什么，而不是只局限于我的獎品列表，它也可以用于其他數(shù)據(jù)的展示。同時，這樣的通用組件可以適用于各種 H5 。組件拿來即用或者用于一些 H5 自動生成的平臺，只要根據(jù)文檔傳參數(shù)就可以了。
通過 config 控制具體的展示名字還有按鈕id的標記區(qū)分事件，data 初始化組件的列表，與業(yè)務區(qū)分開來這里就變成了一個很純粹的列表展示組件，可以展示任意的數(shù)據(jù)，只要按照格式傳參就行。這里只是寫一個很簡單的 DEMO ，后面會提到入?yún)⒑秃瘮?shù)綁定。
拿到設計稿之后找出通用的模塊，再根據(jù)類似模塊之間的差異定出一個通用的規(guī)則。下面是本次大型 H5 的設計稿總覽：
第一大類：分組賽，資格賽，彈窗，規(guī)則和投票等
第二大類：沖刺賽，總決賽，PK模塊等
此次大型 H5 的分為了幾個大階段，分組賽，資格賽，沖刺賽和總決賽。看上去是非常多內(nèi)容的，所以需要找出相似的模塊，再和業(yè)務側溝通從這幾個賽段來看，可以抽離成組件的是
這里就拿一部分的組件描述一下實現(xiàn)思路，全部寫的話就太多了，而且有些地方邏輯實現(xiàn)上也是比較像的。
一個通用組件所需要的配置參數(shù)一般歸納為幾種，最重要的是這個組件的所有需要使用的值，也就是這個初始化參數(shù)。其次，是這個組件的一些樣式配置或者是全局參數(shù)輔助使用，還有一些情況需要特定的屬于這個組件的 key 。當然，不是說樣式和全局參等等是不重要的參數(shù)，而是根據(jù)業(yè)務的需求來定，可能樣式的參數(shù)才是重點這個也是可能的，具體的還得從業(yè)務或者這個組件本身的性質(zhì)考慮，只是在做組件的時候優(yōu)先考慮功能的實現(xiàn)。以下是我封裝通用組件的一個習慣，分別綁定的參數(shù)是 data, styleForm, commonStyle, global, componentKey。以下是一個組件綁定參數(shù)和方法的例子：
<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 是這個組件傳入的初始化參數(shù)或者是渲染組件的所有數(shù)據(jù)，類型是 Object 。組件可以用初始化參數(shù)通過 ajax 獲取數(shù)據(jù)也可以通過 class 執(zhí)行初始化邏輯或者是直接將數(shù)據(jù)綁定在這個 data 中。
<script>
// 組件
export default {
props: {
data: {
type: Object,
default: ()=> ({
// list:[], example
// total: 10 example
}),
},
}
</script>
styleForm 這個是組件的配置信息，比如這個組件的一些背景、樣式信息以及一些固定的數(shù)據(jù)不會發(fā)生變化的數(shù)據(jù)。數(shù)據(jù)格式類型是 Object 。
<script>
// 組件
export default {
props: {
styleForm: {
type: Object,
default: ()=> ({
// styles: {}, example
// bg: './images/xx.png' example
}),
},
}
</script>
commonForm 這個參數(shù)是通用的樣式配置，比如，控制這個組件的寬、高以及背景色等等。這個我們在自己在獨立開發(fā)的 H5 的時候，會按照這樣的參數(shù)格式配置。目的是讓組件更加通用，適用于不同的地方，比如一些 H5 的自動生成平臺。 因為，在互聯(lián)網(wǎng)大廠里 H5 的開發(fā)如果是比較簡單的頁面，是不會單獨用人力去開發(fā)的，而是通過平臺配置生成 H5。我們需要做的就是提供各種各樣的組件，讓業(yè)務同學去配置使用。所以，平臺的配置是以每個功能模塊劃分，commonForm 可以接入他們的平臺的接口數(shù)值，直接在平臺上控制這個組件的寬、高、是否居中等等的基礎樣式。
<script>
// 組件
export default {
props: {
commonStyle: {
type: Object,
default: ()=> ({
// width: 300, example
// height: 20 example
}),
},
}
</script>
全局屬性指的是這個項目的唯一標記，適用于項目中的任意一個地方。比如說這個項目的 id ，他可能在做上報操作或者在請求接口的時候需要帶上這個參數(shù)。那么就由 global 這個參數(shù)統(tǒng)一接收。類型也是 Object 。
<script>
// 組件
export default {
props: {
global: {
type: Object,
default: ()=> ({
// page_id: 111, example
}),
},
}
</script>
componentKey 是組件的標記，主要用于在做區(qū)分組件的時候，使用比如上報數(shù)據(jù)。同時也可以用于一些非常特定的邏輯，提供臨時的解決方法。舉個非常簡單例子：業(yè)務方需要畫 10 個圓且背景都是白色，突然間提出要在第 9 個圓中某個位置加上一個黑色的點，其他不變。 這樣既不合理也不通用還砍不掉的需求，臨時的解決方法就是通過 key 寫一個 if else ，之后再說。
<script>
// 組件
export default {
props: {
componentKey: {
type: [String,Number],
default: 1, // example
},
}
</script>
在組件內(nèi)通過輸出按鈕 id 或者事件類型，由上一層組件進行執(zhí)行特定邏輯，這樣的好處是通用的樣式和 DOM 與 JavaScript 分離，不含有業(yè)務邏輯一下次也可以直接復用這個組件，不需要再去改。
組件
<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,
};
// 區(qū)分不同事件類型 傳參
clickEventMap[id](value);
},
goAnchor(params) {
// ...
},
goPage(params) {
// ...
}
},
}
</script>
首先從功能上看，這個組件只能適用于獨立開發(fā)的 H5 ，它不適合 H5 生成平臺。或者說這樣的組件在 H5 生成平臺完全沒有意義。因為，左邊的 icon 和右邊按鈕列表，他們在 H5 生成平臺里面，這些按鈕都是靠使用者自己手動配置的地方。例如： 左邊的 icon 就是使用一個按鈕組件拖拽進去，再加上一個跳轉事件。 右邊的 btn-list 可以看成是 3 個獨立按鈕，也和上面一樣用一個按鈕組件拖拽進去，加上一個跳轉事件，再連續(xù)配置 3 次。
但是，這一次是獨立開發(fā)，所以只能按照可復用定制模版的思路來實現(xiàn)。需要考慮的地方是：
如圖：對應的每個模塊使用一個 ID 作為區(qū)分，其中 btn-list 包含以 btn-x 為唯一的標記，內(nèi)容就是控制這個按鈕的背景，顯隱和文案。
之后再通過 headData 來渲染 btn-list ，數(shù)據(jù)格式為：
<script>
export default {
data() {
return {
headData:[
{
id: 'btn-1',
value: {
url: '...'
}
},
{
id: 'btn-2',
value: {
url: '...'
}
}
....
]
}
},
}
</script>
它的核心思想就是通過 ID 關聯(lián)數(shù)據(jù)，通過 ID 關聯(lián)配置。這有點像是數(shù)據(jù)庫里面的主鍵，可以根據(jù)這個主鍵可以查詢或者關聯(lián)查找其他的數(shù)據(jù)表。
寫一個通用的方法，在后面如果有新增的按鈕，可以直接通過傳參 (第幾個按鈕) 控制按鈕的位置。
@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));
錨點跳轉到參數(shù)指定位置
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 里面，每種設計的風格或者業(yè)務需求不一樣，不可能一直沿用一種樣式的倒計時，比如這樣
所以需要考慮的點是：
在計算倒計時的方法上有兩種，第一種是獲取本地手機時間再寫一個 inteval 函數(shù)遞減計算，第二種是使用 interval 每秒都向服務器進行時間獲取計算出剩余時間。 這里我一般會選擇后面那種，因為，首先本地時間不一定是正確的，也有可能是人為的去修改了系統(tǒng)的時間，其次，本地的 interval 延遲時間不一定準確。比如我們設定 1000 毫秒執(zhí)行，但是由于部分手機本身的原因，這里可能存在著誤差，設定的是 1000 毫秒，而在實際的執(zhí)行中，它相當于 800 毫秒。那么就會導致一個問題，本地的時間越算，誤差越大，如果在頁面中的時間停留較短那問題不大，但是如果在頁面的停留時間很長，到了最后看上就是一個大大的 BUG 。所以，每次都讀取服務器時間是比較靠譜的。
實現(xiàn)要點：
<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>
節(jié)點樣式方面：讓 countdown-content 的內(nèi)容居中，倒計時前后可以配置任意文案，再給 clase="time" 加上一個寬度，這樣的好處是避免了在數(shù)字變化的時，因倒計時數(shù)字切換發(fā)生的抖動而影響到了整個倒計時文案的抖動問題。另一個是，在倒計時外層再包一層 v-if 樣式，這個是來拓展倒計時多種樣式的功能。
邏輯方面：傳入一個時間格式的配置項，比如是否需要展示天數(shù)或者秒數(shù)，使用一個循環(huán)指定數(shù)據(jù)更新。最后的時間由 computed 計算屬性將 day, hours minutes , seconds 計算出來。同時，倒計時為零的時候支持配置一個方法，例如，最常見的操作就是刷新當前頁面或者是執(zhí)行跳轉。
進度條組件和倒計時組件一樣，屬于邏輯比較簡單而比較注重樣式上的一些配置。進度條組件需要考慮的點是：
<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參數(shù)， 獲取到這個進度條的顏色，為了進度條能有更多的顏色配置，就是用漸變色來配置，只要傳入一個開始和一個結束的色值。
節(jié)點的的樣式和文案全部通過數(shù)組渲染，來達到通用配置的目，以下是我截取簡易的配置數(shù)據(jù)
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 自動生成平臺。吸底組件和頂部組件它們更像是一個容器，在這個容器里面配置其他的組件，所以這里還是做成一個可復用的定制模版。需要考慮的一些點：
他們的數(shù)據(jù)格式是：
<script>
export default {
data() {
return {
// 數(shù)據(jù)源綁定
suspensionData: {
userSection: {
name: 'xxxx',
url: '....png',
},
textSection: [
{
'text': `已貢獻助力票數(shù): 600`
},
{
'text': `剩余助力票數(shù): 400`
}
],
},
// 數(shù)據(jù)配置樣式設定
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 情況下是居中還是均分的樣式。中間的文字也是同樣的方法，只是這里就多了一些細節(jié)的考慮，比如：字體容器的溢出處理和行間距的一些設定。
頭像和昵稱按理也可以做一些設定，但是這里根據(jù)實際的需求來說沒有必要，所以這里就直接固定下來。
這個 H5 的投票功能相對簡單，只有一個增加/減少和最大值。
在做這個組件之前，我其實更想把它做成這樣的形式。如圖：
它可展示圖片，還可以展示選擇票的類型，同時下面還可以配置拓展按鈕也可以綁定執(zhí)行事件，看上去非常的好。但是后來想了一下，還是覺得這樣投票組件的邏輯會有點冗余，既然是一個投票組件應該不就有其他的東西。
所以我也在原來的基礎上結合這個組件多加了一投票的類型選擇。就是這樣：
這樣看上去邏輯簡單，而且也確實多了是一個實用的功能。所以，這個組件需要考慮的點是：
<template>
...
<!-- 票數(shù)編輯區(qū)域 -->
<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>
<!-- 類型選擇區(qū)域 -->
<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>
首先用一個數(shù)組渲染類型列表，編輯區(qū)域票數(shù)區(qū)域比較重要的的就是做好數(shù)字上的校驗和統(tǒng)一管理檢驗失敗的提示文案。
const tipsMap={
error: '親！剩余助力票不足，請重新輸入！',
success: '助力成功！',
errorNum: '必須是一個數(shù)值,注意不能有空格',
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);
排行組件是這一個活動邏輯最復雜的一個，他除了需要支持到這個活動展示的列表數(shù)據(jù)，也需要支持到以后其他 H5 的數(shù)據(jù)展示，也就是支持拓展。 比如：在這個排行榜中，第一列是一個頭像列表類型，第二列是一個文字類型，第三列也是一個頭像類型，第四列是一個按鈕類型。那么，在組件初始化的時候通過 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',
}
},
....
]
};
這一段是部分配置
以后無論是需要怎么樣的一個排行榜，先查找文檔看看是不是都有這樣類型的樣式，沒有的話拓展，有的話只需要傳入配置參數(shù)之后，再傳入具體的數(shù)據(jù)就可以跑起一個排行榜的組件。
從功能上看他需要支持：
標題部分主要代碼：
<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>
使用配置項循環(huán)列出列表的標題，里面有個 icon 的提示圖標，使用插槽的方式插入，這里需要用 sub-${item.key} 作為一個區(qū)分，需要顯示 tips icon 的標題才展示。這里只能用 key 作為區(qū)分不能用 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>
第一層循環(huán)遍歷所有列表數(shù)據(jù)，第二層循環(huán)遍歷配置表，根據(jù)類型渲染具體內(nèi)容，之后每一個塊的內(nèi)容都通過小組件形式引入。
鍵字: web組態(tài)編輯器集成,web組態(tài)頁面集成,web可視化組件,web SCADA前端和后端,web可視化編輯器
web可視化編輯器，又稱WEB組態(tài)可視化軟件，即用戶可以在web頁面編輯器上直接搭建出一個行業(yè)應用系統(tǒng)出來。web組態(tài)可視化編輯器能夠運用在哪些場景中呢？
web組態(tài)可視化編輯器為工程用戶提供了二次開發(fā)的可能，不用編程、不用寫代碼，通過可視化界面即可生成web頁面，開發(fā)出一個應用系統(tǒng)來，在電力、物聯(lián)網(wǎng)、大數(shù)據(jù)平臺有廣泛的應用。
一個好的應用系統(tǒng)，應該給用戶提供業(yè)務自定義的工具。一個好的應用系統(tǒng)，應該采用圖文并茂的方式將復雜的業(yè)務邏輯直觀化、可視化。
web可視化編輯器
web組態(tài)軟件是基于瀏覽器的應用，通過瀏覽器操作組態(tài)編輯器、瀏覽組態(tài)畫面，實現(xiàn)工程管理、設備組態(tài)編輯以及設備組態(tài)運行三大功能。換句話說，web組態(tài)軟件分編輯態(tài)和運行態(tài)。通過實現(xiàn)圖元組態(tài)、可視化圖表組態(tài)、數(shù)據(jù)庫組態(tài)的配置與關聯(lián)，網(wǎng)關采集數(shù)據(jù)的實時推送，實現(xiàn)基于Web服務的實時數(shù)據(jù)監(jiān)控和可視化展示，服務端的分項目分權限的多用戶訪問等等。
從用戶操作與界面呈現(xiàn)的角度來說，WEB組態(tài)軟件采用標準HTML5技術，基于B/S架構進行開發(fā)，支持WEB端跨平臺呈現(xiàn)，在瀏覽器端完成便捷的人機交互，簡單的拖拖拽拽即可完成web可視化頁面的編排設計工作，讓用戶不需要編寫計算機程序，不需要編程知識，就能通過拖拽和配置實現(xiàn)應用系統(tǒng)的功能。
從軟件架構來說，WEB組態(tài)軟件包括前端和后端。
## 前端：主要實現(xiàn)圖形可視化編輯，包括圖元、圖表等等。
## 后端：與數(shù)據(jù)聯(lián)動，支持多數(shù)據(jù)源，包括數(shù)據(jù)庫或設備實時采集等等。
B/S結構的Web SCADA系統(tǒng)必須具備以下特征
1,對不同控制對象均可方便組態(tài) ,只是在算法組態(tài)時調(diào)用不同圖形元素。
2,控制人員用可視化語言進行“畫圖”編輯 ,鼠標連線。
3,模塊參數(shù)可動態(tài)改變。
4,開放性 ,可接入用戶自定義模塊。
5,與圖形組態(tài)軟件溶為一體 ,組成易用的圖形仿真組態(tài)軟件。
6,支持圖形化建模，自動化程度高，可維護性好；
7,支持在線模塊級和源代碼級的調(diào)試；
web組態(tài)是基于ActiveX實現(xiàn)的嗎？
Activex是由微軟開發(fā)，所以在支持上，目前原生態(tài)支持的只有IE，其他瀏覽器想要支持activex, 需要額外做一些設置或安裝補丁包。并且從2015年微軟Edge瀏覽器不再支持ActiveX。
web組態(tài)基于BS架構，采用html5和JavaScript，具有良好的集成性和技術前瞻性。
web組態(tài)的圖元庫可以擴展嗎？
web組態(tài)支持圖元自擴展，SVG格式，以支持圖形縮放。
多比物聯(lián)web組態(tài)可視化平臺圖元支持擴展
更多的web組態(tài)集成案例，見web SCADA。
總結：web組態(tài)編輯器可視化編輯器軟件為工程用戶提供了二次開發(fā)的可能，不用編程不用寫代碼，通過可視化界面即可生成web頁面。web SCADA組態(tài)編輯器軟件，經(jīng)過數(shù)年的積累和行業(yè)用戶的需求定制，包括完備的前端（圖形可視化）和后端（與數(shù)據(jù)聯(lián)動，數(shù)據(jù)庫或實時采集）。web組態(tài)可視化平臺基于B/S架構，采用html5和JavaScript，具有良好的集成性。
月13日，“互聯(lián)網(wǎng)+智能硬件”研討會在北京召開。會上，中國信息通信研究院聯(lián)合百度、華為、京東等企業(yè)共同倡議發(fā)起眾創(chuàng)空間聯(lián)合實驗室，以整合智能硬件芯片、互聯(lián)網(wǎng)開放平臺、大數(shù)據(jù)分析等物聯(lián)網(wǎng)生態(tài)的建設和標準的研究。云適配作為一家優(yōu)秀創(chuàng)業(yè)公司受邀參與了本次研討會，并分享了如何“基于HTML5技術幫助智能硬件開發(fā)更高效”的議題。
智能硬件市場前景看好，發(fā)展存在瓶頸
智能硬件的火爆超出很多人包括業(yè)內(nèi)人士的預期。隨后，也攪動了所有的科技公司、硬件制造廠商和創(chuàng)業(yè)者的心。當前的智能硬件行業(yè)呈現(xiàn)多極化的發(fā)展趨勢。一方面，由于智能硬件創(chuàng)業(yè)門檻較高，因此，各企業(yè)紛紛結成產(chǎn)業(yè)聯(lián)盟，以求優(yōu)勢互補，謀求突破;另一方面，智能硬件產(chǎn)品種類多、技術多樣化，標準不統(tǒng)一，各聯(lián)盟均致力于建立能夠兼容更多智能設備的硬件管理服務平臺，以求吸引更多的設備和服務加入。
在這樣的整體環(huán)境下，首要問題是解決統(tǒng)一的標準，在可接受的范圍內(nèi)，盡可能將硬件設計、通信協(xié)議、服務接口等進行規(guī)范化，以減少重復開發(fā)等不必要的資源消耗。
在標準難以統(tǒng)一的領域，需要尋求應用層解決方案，通過服務的統(tǒng)一化接入，屏蔽智能設備在硬件層面的異構性，使服務與設備解耦和，從而更大程度上整合資源，提供高質(zhì)量服務。
眾所周知，智能硬件已經(jīng)不再是智能手環(huán)、手表等便攜設備那么簡單，更是包括了智能電視、智能家居、智能汽車、醫(yī)療健康、智能玩具，甚至是機器人等。但智能硬件的多樣性發(fā)展同時也面臨另外一個問題，如何解決在信息碎片化的情況下，在不同屏幕上有統(tǒng)一的信息展示。
智能硬件的發(fā)展很大一塊程度上依賴于其軟件的開發(fā)，而高效實現(xiàn)信息展示和用戶體驗優(yōu)化則更是體現(xiàn)其智能所在。但如今，僅移動端系統(tǒng)就千差萬別，要實現(xiàn)不同系統(tǒng)和終端屏幕的獨立開發(fā)，無論是對于企業(yè)還是開發(fā)者，成本都十分高昂，難度非常大。
組件化應用優(yōu)化前端開發(fā)， 為智能硬件產(chǎn)業(yè)鏈發(fā)展提速
針對在智能硬件開發(fā)過程中的跨系統(tǒng)、跨平臺和不同屏幕的適配問題，如果有一種開發(fā)方式解決上述問題，則智能硬件的發(fā)展速度便能提上另一個階段。據(jù)云適配首席布道官吳育瑞表示，Amaze UI 是為開發(fā)者定制的基于HTML5標準的前端開發(fā)工具，它遵循的HTML5標準具備天然的跨屏性，可以滿足跨屏、跨平臺的應用開發(fā)。此外，Amaze UI 遵循組件式開發(fā)理念，通過拆分、封裝了一些常用的網(wǎng)頁組件，開發(fā)者只需復制代碼便可將這些跨屏組件寫入到自己的應用中。
據(jù)悉，Web組件化(Web Components)理念，自Google在2013年的I/O大會上提及起，直至去年HTML5規(guī)范的正式定稿，Web開發(fā)也隨之異常火爆，讓Web組件化的關注度也隨之水漲船高。Web組件化其實一直都被國外互聯(lián)網(wǎng)公司看好，因為從軟件架構上、開發(fā)效率上、代碼可維護性上都是一個更好的選擇。
在談到有關Amaze UI 的使用時，云適配吳育瑞表示， Amaze UI并遵循React所推崇的“一切皆組件” 的組件化理念，它以開源的形式提供了包含 25個 CSS 組件、26個 JS 組件，更有21款包含近 60 個主題的 Web 組件, 使開發(fā)者不需要再花費時間精力去編寫日歷等的代碼，便可以直接引用組件。 此外，Amaze UI 將在后續(xù)的開發(fā)工作中，還將陸續(xù)推出Amaze UI for App、Amaze UI組件市場等更多提高開發(fā)效率的工具。
互聯(lián)網(wǎng)+智能硬件的發(fā)展為“大眾創(chuàng)新、萬眾創(chuàng)業(yè)”開辟了一個新的藍海市場，但是也正因為互聯(lián)網(wǎng)的介入使信息流轉效率更高，只有更快更高效的開發(fā)才能為領先市場和占領市場創(chuàng)造優(yōu)勢條件。有了專注做最高效的開發(fā)，滿足開發(fā)者與時俱進的需求的開發(fā)工具，整個智能產(chǎn)業(yè)鏈高速發(fā)展指日可待。
原文出自【比特網(wǎng)】，轉載請保留原文鏈接：http://net.chinabyte.com/82/13509582.shtml
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
