跨平台 DevOps 前端框架兼容性

我们的EMAS跨平台产品H5方案能够兼容多种前端框架编码的代码项目，只要是基于webpack、gulp、grunt打包，都可以支持。采用业界常用的几种前端框架开发的项目，可以参考以下文档来了解相关内容。

Vue.js 工程

基于Vue.js编码的项目工程，无需任何代码改动，即可直接使用EMAS跨平台产品。例如采用VuxUI库开发的代码：

  

   
<template>
   
 <div>
   
 <drawer
   
 width="200px;"
   
 :show.sync="drawerVisibility">
   

   
 <div slot="drawer">
   
 <!-- 菜单内容 -->
   
 </div>
   

   
 <!-- rourer-view 作为默认插槽内容 -->
   
 <div>
   
 <router-view></router-view>
   
 </div>
   

   
 </drawer>
   
 </div>
   
</template>
  

使用「EMAS演示」App 扫下面的二维码，可体验效果。

React 工程

基于React编码的项目工程，无需任何代码改动，即可直接使用EMAS跨平台产品。例如采用Ant Design MobileUI库开发的代码：

  

   
import { Accordion, List } from 'antd-mobile';
   

   
class AccordionExmple extends React.Component {
   
 onChange = (key) => {
   
 console.log(key);
   
 }
   
 render() {
   
 return (
   
 <div style={{ marginTop: 10, marginBottom: 10 }}>
   
 <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange}>
   
 <Accordion.Panel header="Title 1">
   
 <List className="my-list">
   
 <List.Item>content 1</List.Item>
   
 <List.Item>content 2</List.Item>
   
 <List.Item>content 3</List.Item>
   
 </List>
   
 </Accordion.Panel>
   
 <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
   
 <Accordion.Panel header="Title 3" className="pad">
   
 text text text text text text text text text text text text text text text
   
 </Accordion.Panel>
   
 </Accordion>
   
 </div>
   
 );
   
 }
   
}
   

   
ReactDOM.render(<AccordionExmple />, mountNode);
  

使用「EMAS演示」App 扫下面的二维码，可体验效果。

Angular 工程

基于Angular编码的项目工程，无需任何代码改动，即可直接使用EMAS跨平台产品。例如采用NG-ZORRO-MOBILEUI库开发的代码：

  

   
import { Component } from '@angular/core';
   

   
@Component({
   
 selector: 'demo-stepper-basic',
   
 template: `
   
 <List>
   
 <ListItem [extra]="stepperNgModel">Show number value</ListItem>
   
 <ListItem [extra]="stepper">Show number value</ListItem>
   
 <ListItem [extra]="stepperDisabled">Disabled</ListItem>
   
 </List>
   
 <ng-template #stepper>
   
 <Stepper [value]="value" [min]="1" [max]="3" [showNumber]="true" (onChange)="change($event)"></Stepper>
   
 </ng-template>
   
 <ng-template #stepperDisabled>
   
 <Stepper [defaultValue]="6" [min]="1" [max]="10" [disabled]="true" [showNumber]="true"></Stepper>
   
 </ng-template>
   
 <ng-template #stepperNgModel>
   
 <Stepper [(ngModel)]="value1" [min]="1" [max]="10" [showNumber]="true" (ngModelChange)="change($event)"></Stepper>
   
 </ng-template>
   
 `,
   
 styles: [``]
   
})
   
export class DemoStepperBasicComponent {
   
 value = 3;
   
 value1 = 6;
   

   
 constructor() {}
   

   
 change($event) {
   
 console.log($event, 'change');
   
 }
   

   
}
  

使用「EMAS演示」App 扫下面的二维码，可体验效果。