业界还存在一些其他的跨平台技术框架,如果你是采用这些技术框架实现的移动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应用。