将现有H5应用快速转换为小程序，利用SuperApp产品的优势，提升应用的用户体验和开发体验。
本篇只适用于H5单页面应用，单页面应用按以下步骤改造即可快速转换为小程序；如果您的应用是多页面应用，建议先使用React、Vue等常用技术栈变更为单页面应用，或者直接参考WindVane脚手架开始您的小程序之旅。
如何修改代码
接口调整
前端代码中请求后端接口，如果使用的是相对路径，需要改为包含host的绝对路径
UI适配
Header适配
如下图，h5项目如果自带头，在小程序场景下需要将其隐藏，并通过调用JSAPI设置小程序的title
详细代码如下：
//React: 如使用框架里面没有公共的render逻辑，可将其封装成useLayout
...
useEffect(() => {
// 判断是否是小程序
const isMiniprogram = window?.WindVane
if (isMiniprogram) {
//设置navbar
const params = {
title: "{{title}}",
titleColor: '#000000',
barStyle: 'normal',
backgroundColor: '#FFFFFFFF', // rgba
hideBackButton: 'false',
theme: 'dark'
};
window?.WindVane.call('WVNavigationBar', 'update', params, function() {
// success
}, function(e: any) {
// failure
});
}
}, [])
...
// Vue3
...
setup() {
onMounted(() => {
// 判断是否是小程序
const isMiniprogram = window?.WindVane
if (isMiniprogram) {
//设置navbar
const params = {
title: "{{title}}",
titleColor: '#000000',
barStyle: 'normal',
backgroundColor: '#FFFFFFFF', // rgba
hideBackButton: 'false',
theme: 'dark'
};
window?.WindVane.call('WVNavigationBar', 'update', params, function() {
// success
}, function(e: any) {
// failure
});
}
}
}
...
页面跳转适配
跳转内部应用页面
如https://superapp.demos.com/docment属于一个 h5单页面应用，https://superapp.demos.com/console属于另外一个h5单页面应用；基于Web API的跳转，通过window.location.href的代码需改造。将两个内部应用发布为两个小程序，使用以下的代码处理：
window.WindVane.call(
"wv",
"navigateToMiniApp",
{
appId: appId // 目前小程序的id
},
function () {
console.log('open miniapp successfully');
},
function (error) {
console.log('open miniapp error', error);
}
);
跳转外部应用页面
容器SDK默认不拦截跳转至外部url，如小程序内打开网站 (https://www.alibabacloud.com); 使用Web的跳转方式跳转即可，代码如下：
window.location.href = "https://www.alibabacloud.com"如果客户端App实现了拦截逻辑，则跳转是否有效依赖具体实现逻辑。
工程适配
以下为必要项，不符合规定会导致小程序加载异常。
路由必须为hash
不同技术架构有其设置路由模式的方式，无统一修改方式，需自行改造。
Hash路由：https://superapp.demos.com/#/home （正确）
History路由：https://superapp.demos.com/home（不正确）
打包后的目录有index.html
如下图
vscode插件依赖项（走控制台上传可忽略）
根目录package.json必须有version字段
打包执行方法命名必须是build，即通过npm run build可完成打包
默认打包的target目录名称为dist，如项目打包的target目录不为dist，则需要在vscode插件setting中设置打包路径名称
引入JSAPI SDK
在单页面应用index.html中引入https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection">
<link rel="shortcut icon" href="/favicon.svg">
...
<script src="https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js"></script>
...
...
</head>
</html>如何发布小程序
控制台上传
将打包后的所有静态资源文件压缩成ZIP包，如下图在SuperApp台上传并发布。
