从其他框架迁移 - 跨平台 DevOps

业界还存在一些其他的跨平台技术框架，如果你是采用这些技术框架实现的移动App，可以阅读以下内容来了解如何从这些技术框架迁移到EMAS跨平台H5方案。

从AppCan迁移

AppCan开发模式中，界面布局等基本要素都是使用标准HTML技术进行开发的，通过调用其提供的JSSDK和插件API来实现业务需求的开发。

HTML和css代码

这些和界面相关的代码不需要任何修改就可以用EMAS跨平台提供的H5容器（WindVane）来渲染。

JSSDK的调用

AppCan已经封装好的一些js库，如 appcan.js appcan.listview.js是标准的js库。调用到这些库的代码也不需要任何修改就可以用EMAS跨平台提供的H5容器（WindVane）中正常执行。

插件API的调用

这里所谓的插件API其实就是Native端通过jsbridge暴露一些端上能力供前端页面调用。这一部分功能是和Native端的H5容器强耦合的，所以无法兼容，需要用户在调用类似uexCamera uexLocation的地方替换成EMAS跨平台提供的JS API的调用。我们大致梳理了一下AppCan中，通过JS API或者其他方法可以替代的几个插件。如果调用了其他插件，可以通过Native端使用JSBridge扩展JS API的办法来补齐这些功能。

uexApplePay

该插件实现了iPhone手机的Apple Pay 支付功能。

可以使用支付宝支付

uexCall(官方已废弃)

打电话功能插件

可以使用标准HTML标签来实现

    
     <a href="tel:400-0000-688">400-0000-688</a>

uexCamera

调用设备照相机拍摄照片,成功后返回相关图片存储地址.

可以使用JS API的WVCamera.takePhoto

uexClipboard

系统剪贴板插件

可以使用JS API的Base.copyToClipboard

uexContact

系统联系人插件

可以使用JS API的WVContacts.choose

uexControl

日期选择器插件

可以使用pickadate.js

uexDevice

设备信息插件

可以使用JS API的WVNativeDetector.getModelInf

uexLocation

定位插件

可以使用JS API的WVLocation.getLocation

uexSensor

设备传感器插件,设备传感器.

可以使用JS API的WVMotion.listenGyro

uexPDFReader

PDF阅读器插件

可以使用pdf.js

uexVideo

视频播放插件

可以使用标准HTML标签来实现

    
     <video width="320" height="240" controls>
         <source src="movie.mp4" type="video/mp4">
         <source src="movie.ogg" type="video/ogg">
     </video>

uexDownloaderMgr

文件下载插件

可以使用以下代码来实现
    
     window.open(url)
    

uexWebSocket

webSocket 插件

可以使用websocket

从Cordova迁移

Cordova的开发模式和AppCan非常类似，界面布局等基本要素都是使用标准HTML技术进行开发的，通过调用插件API来实现业务需求的开发。

HTML和css代码

这些和界面相关的代码不需要任何修改就可以用EMAS跨平台提供的H5容器（WindVane）来渲染。

JSSDK的调用

Cordova已经封装好的一些js库，如 cordova.js是标准的js库。调用到这些库的代码也不需要任何修改就可以用EMAS跨平台提供的H5容器（WindVane）中正常执行。

插件的调用

这里所谓的插件其实也是Native端通过jsbridge暴露一些端上能力供前端页面调用。这一部分功能是和Native端的H5容器强耦合的，所以也无法兼容，需要用户在调用类似cordova-plugin-camera cordova-plugin-geolocation的地方替换成EMAS跨平台提供的JS API的调用。我们大致梳理了一下Cordova中，通过JS API或者其他方法可以替代的几个插件。如果调用了其他插件，可以通过Native端使用JSBridge扩展JS API的办法来补齐这些功能。

cordova-plugin-contacts(联系人)

可以使用JS API的WVContacts

cordova-plugin-device(设备)

可以使用JS API的WVNativeDetector

cordova-plugin-geolocation(地理位置)

可以使用JS API的WVLocation

cordova-plugin-network-information(网络信息)

可以使用JS API的WVNativeDetector

cordova-plugin-media-capture(媒体捕获)

可以使用JS API的WVAudio音频，WVScreen截图

cordova-plugin-camera(相机)

可以使用JS API的WVCamera

cordova-plugin-dialogs(对话框)

可以使用JS API的Widget

cordova-plugin-inappbrowser(InAppBrowser打开Web浏览器)

可以通过window.open(url)打开链接，或者通过JS API的Base.openBrowser

cordova-plugin-vibration(震动)

可以使用JS API的WVNotification

建议

AppCan或者Cordova的编码模式，还是停留在比较原始的阶段，落后于业界流行的各种前端框架的编码思想。建议客户使用Vue.js、React 等主流的前端框架，配合EMAS跨平台H5容器的能力，打造先进、稳定的跨平台Hybrid应用。