一、升级方向

1.多页应用->单页应用

MTL与Summer项目最大的区别在于:MTL只支持单页应用(单一webview),Summer支持多页应用(多webview)。因此升级成本最高的地方在于使用H5的跳转方式代替summer.openWin方法,同时传参方式也要做出相应的改变。

2.插件替换

Summer插件替换为MTL插件,如推送插件等,另外MTL提供了自定义插件扩展机制,用户可自行开发原生插件。

3.api替换

使用具有相同功能的MTL API代替Summer API,例如:使用mtl.chooseImage代替summer.openPhotoAlbum。详见第三章

二、准备工作

1.统计原summer项目中使用的API

对summer工程中使用的api进行统计,参照mtl文档确定替换的api。
mtl api文档地址

2.安装MTL开发环境

1)安装vscode、安装mtl-cli命令行工具、安装mtl插件、创建mtl空工程
2)详细配置见文档:文档地址
3)参照mtl工程模板改造原summer工程,如project.json、script脚本等需要拷贝到summer工程内
4)summer工程引入mtl.js,同时删除summer.js相关文件
5)mtl工程调试及打包方法见文档:文档地址

三、常用summerAPI替换方案

summerAPI MTL API 备注
summer.getStorage mtl.getStorage
summerready 代码见excel文档
summer.openWin mtl.navigateTo 参数拼接到url后
summer.ajax mtl.request 也可以使用axios等前端请求
$summer.byId document.getElementById("xxx")
summer.pageParam summer配合openWin使用,现在可把参数拼接至url后面
$summer.jsonToStr JSON.stringify(JsonObject)
$summer.strToJson JSON.parse(strdata)
summer.closeWin({}) mtl.navigateBack 或window.history.go()
summer.getDeviceInfo() mtl.getSystemInfo
summer.get mtl.request
summer.setStorage mtl.setStorage
summer.getPermission mtl.getAuthorizationStatus
summer.getAppVersion mtl.getSystemInfo
summer.getSysInfo mtl.getSystemInfo
summer.toast mtl.showToast 也可以前端实现一个js的toast
summer.multiUpload mtl.uploadFile
summer.openCamera mtl.chooseImage
summer.fileToBase64 mtl.getLocalImgData
summer.openPhotoAlbum mtl.chooseImage
summer.openWebView mtl.openSchema
summer.compressImage canvas2image.js


summerApi升级mtlApi替换方案.xls