全部产品
云市场

前端框架兼容性

更新时间:2019-01-28 19:24:44

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

Vue.js 工程

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

  1. <template>
  2. <div>
  3. <drawer
  4. width="200px;"
  5. :show.sync="drawerVisibility">
  6. <div slot="drawer">
  7. <!-- 菜单内容 -->
  8. </div>
  9. <!-- rourer-view 作为默认插槽内容 -->
  10. <div>
  11. <router-view></router-view>
  12. </div>
  13. </drawer>
  14. </div>
  15. </template>

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

二维码

效果图

React 工程

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

  1. import { Accordion, List } from 'antd-mobile';
  2. class AccordionExmple extends React.Component {
  3. onChange = (key) => {
  4. console.log(key);
  5. }
  6. render() {
  7. return (
  8. <div style={{ marginTop: 10, marginBottom: 10 }}>
  9. <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onChange}>
  10. <Accordion.Panel header="Title 1">
  11. <List className="my-list">
  12. <List.Item>content 1</List.Item>
  13. <List.Item>content 2</List.Item>
  14. <List.Item>content 3</List.Item>
  15. </List>
  16. </Accordion.Panel>
  17. <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
  18. <Accordion.Panel header="Title 3" className="pad">
  19. text text text text text text text text text text text text text text text
  20. </Accordion.Panel>
  21. </Accordion>
  22. </div>
  23. );
  24. }
  25. }
  26. ReactDOM.render(<AccordionExmple />, mountNode);

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

二维码

效果图

Angular 工程

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'demo-stepper-basic',
  4. template: `
  5. <List>
  6. <ListItem [extra]="stepperNgModel">Show number value</ListItem>
  7. <ListItem [extra]="stepper">Show number value</ListItem>
  8. <ListItem [extra]="stepperDisabled">Disabled</ListItem>
  9. </List>
  10. <ng-template #stepper>
  11. <Stepper [value]="value" [min]="1" [max]="3" [showNumber]="true" (onChange)="change($event)"></Stepper>
  12. </ng-template>
  13. <ng-template #stepperDisabled>
  14. <Stepper [defaultValue]="6" [min]="1" [max]="10" [disabled]="true" [showNumber]="true"></Stepper>
  15. </ng-template>
  16. <ng-template #stepperNgModel>
  17. <Stepper [(ngModel)]="value1" [min]="1" [max]="10" [showNumber]="true" (ngModelChange)="change($event)"></Stepper>
  18. </ng-template>
  19. `,
  20. styles: [``]
  21. })
  22. export class DemoStepperBasicComponent {
  23. value = 3;
  24. value1 = 6;
  25. constructor() {}
  26. change($event) {
  27. console.log($event, 'change');
  28. }
  29. }

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

二维码

效果图