「 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 项目的组件化开发思考