快应用

Appearance

旧版本迁移 ​

Vue依赖 3.x 版本新增了"@extscreen/es-component"组件库。
"@extscreen/es-component"默认集成了常用的组件。
开发者只需要引入"@extscreen/es-component"并注册组件库，无需再单独引入各个组件。

点击查看es-component组件清单

第1步：package.json配置 ​

升级基础库到 3.x 版本

点击查看源码
js
"@extscreen/es-router": "3.0.0",
"@extscreen/es-log": "3.0.0",
"@extscreen/es-core": "3.0.1",
"@extscreen/es-component": "3.0.1",

第2步：main-native.js增加配置 ​

  • 注册组件
点击查看源码
js
import {ESComponent} from "@extscreen/es-component";
Vue.use(ESComponent)

第3步：main-native.js删除配置 ​

如有注册以下组件，则删除相应的注册代码。

点击查看源码
vue
Vue.use(HippyVueNativeComponents);
Vue.use(ESHorizontalSeekBarViewComponent)
Vue.use(ESVerticalSeekBarViewComponent)
Vue.use(ESBarChartViewComponent);
Vue.use(ESLineChartViewComponent);
Vue.use(ESLoadingViewComponent);
Vue.use(ESX5WebViewComponent);
Vue.use(ESWebViewComponent);
Vue.use(ESGifViewComponent);
Vue.use(ESAnimationViewComponent);
Vue.use(ESADPlayerViewComponent);
Vue.use(ESVideoPlayerViewComponent);
Vue.use(ESSurfaceViewComponent);
Vue.use(ESM1905PlayerViewComponent);
Vue.use(ESTextViewComponent);
Vue.use(ESProgressBarViewComponent);
Vue.use(ESSeekBarViewComponent);
Vue.use(ESTransitionImageViewComponent);
Vue.use(ESQRCodeViewComponent);
Vue.use(ESPageRootViewComponent);
Vue.use(ESPageRouterViewComponent);
Vue.use(ESPlayMarkViewComponent);
Vue.use(ESCanvasComponent);
Vue.use(ESLongImageViewComponent);
Vue.use(ESLargeListViewComponent)
Vue.use(ESVoiceWaveViewComponent);
Vue.use(ESCroppedImageViewComponent);

第4步：引入变量变动 ​

引入以下变量

点击查看源码
js
import {
    ES_ANIMATION_TYPE_NONE,
    ES_ANIMATION_TYPE_PLAY,
    ES_ANIMATION_TYPE_PLAY_SEQUENTIALLY,
    ES_ANIMATION_TYPE_PLAY_TOGETHER,
    ES_ANIMATION_TYPE_WITH,
    ES_ANIMATION_TYPE_BEFORE,
    ES_ANIMATION_TYPE_AFTER,
    ES_ANIMATION_TYPE_AFTER_DELAY,
    ES_ANIMATION_VALUE_TYPE_INT,
    ES_ANIMATION_VALUE_TYPE_FLOAT,
    ES_ANIMATION_PROPERTY_NAME_ALPHA,
    ES_ANIMATION_PROPERTY_NAME_ROTATION,
    ES_ANIMATION_PROPERTY_NAME_SCALE_X,
    ES_ANIMATION_PROPERTY_NAME_SCALE_Y,
    ES_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
    ES_ANIMATION_PROPERTY_NAME_TRANSLATION_Y,
    ES_ANIMATION_REPEAT_MODE_RESTART,
    ES_ANIMATION_REPEAT_MODE_REVERSE,
    ES_ANIMATION_REPEAT_MODE_INFINITE,
    ES_ACCELERATE_DECELERATE_INTERPOLATOR,
    ES_ACCELERATE_INTERPOLATOR,
    ES_ANTICIPATE_INTERPOLATOR,
    ES_ANTICIPATE_OVERSHOOT_INTERPOLATOR,
    ES_BOUNCE_INTERPOLATOR,
    ES_CYCLE_INTERPOLATOR,
    ES_DECELERATE_INTERPOLATOR,
    ES_LINEAR_INTERPOLATOR,
    ES_OVERSHOOT_INTERPOLATOR,
    ES_FAST_OUT_LINEAR_IN_INTERPOLATOR,
    ES_FAST_OUT_SLOW_IN_INTERPOLATOR,
    ES_PATH_INTERPOLATOR,
    ES_SEEK_BAR_MODE_DISABLED,
    ES_SEEK_BAR_MODE_PROGRESS,
    ES_SEEK_BAR_MODE_SEEK,
} from "@extscreen/es-core";

修改为：

点击查看源码
js
import {
    ES_ANIMATION_TYPE_NONE,
    ES_ANIMATION_TYPE_PLAY,
    ES_ANIMATION_TYPE_PLAY_SEQUENTIALLY,
    ES_ANIMATION_TYPE_PLAY_TOGETHER,
    ES_ANIMATION_TYPE_WITH,
    ES_ANIMATION_TYPE_BEFORE,
    ES_ANIMATION_TYPE_AFTER,
    ES_ANIMATION_TYPE_AFTER_DELAY,
    ES_ANIMATION_VALUE_TYPE_INT,
    ES_ANIMATION_VALUE_TYPE_FLOAT,
    ES_ANIMATION_PROPERTY_NAME_ALPHA,
    ES_ANIMATION_PROPERTY_NAME_ROTATION,
    ES_ANIMATION_PROPERTY_NAME_SCALE_X,
    ES_ANIMATION_PROPERTY_NAME_SCALE_Y,
    ES_ANIMATION_PROPERTY_NAME_TRANSLATION_X,
    ES_ANIMATION_PROPERTY_NAME_TRANSLATION_Y,
    ES_ANIMATION_REPEAT_MODE_RESTART,
    ES_ANIMATION_REPEAT_MODE_REVERSE,
    ES_ANIMATION_REPEAT_MODE_INFINITE,
    ES_ACCELERATE_DECELERATE_INTERPOLATOR,
    ES_ACCELERATE_INTERPOLATOR,
    ES_ANTICIPATE_INTERPOLATOR,
    ES_ANTICIPATE_OVERSHOOT_INTERPOLATOR,
    ES_BOUNCE_INTERPOLATOR,
    ES_CYCLE_INTERPOLATOR,
    ES_DECELERATE_INTERPOLATOR,
    ES_LINEAR_INTERPOLATOR,
    ES_OVERSHOOT_INTERPOLATOR,
    ES_FAST_OUT_LINEAR_IN_INTERPOLATOR,
    ES_FAST_OUT_SLOW_IN_INTERPOLATOR,
    ES_PATH_INTERPOLATOR,
    ES_SEEK_BAR_MODE_DISABLED,
    ES_SEEK_BAR_MODE_PROGRESS,
    ES_SEEK_BAR_MODE_SEEK,
} from "@extscreen/es-component";